1. Information Visualization INFORMS Roundtable Ben Shneiderman (ben@cs
Information Visualization INFORMS Roundtable Ben Shneiderman Founding Director ( ), Human-Computer Interaction Lab Professor, Department of Computer Science Member, Institutes for Advanced Computer Studies & Systems Research

2. Human-Computer Interaction Laboratory
Interdisciplinary research community
- Computer Science & Psychology
- Information Studies & Education

3. User Interface Design Goals
Cognitively comprehensible: Consistent, predictable & controllable
Affectively acceptable: Mastery, satisfaction & responsibility
NOT:
Adaptive, autonomous & anthropomorphic

4. Scientific Approach (beyond user friendly)
Specify users and tasks
Predict and measure
time to learn
speed of performance
rate of human errors
human retention over time
Assess subjective satisfaction (Questionnaire for User Interface Satisfaction)
Accommodate individual differences
Consider social, organizational & cultural context

5. Design Issues Input devices & strategies Output devices & formats
Keyboards, pointing devices, voice
Direct manipulation
Menus, forms, commands
Output devices & formats
Screens, windows, color, sound
Text, tables, graphics
Instructions, messages, help
Collaboration & communities
Manuals, tutorials, training
usableweb.com
hcibib.org
useit.com

6. Scholars, Journalists, Citizens Teachers, Students
Library of Congress
Scholars, Journalists, Citizens
Teachers, Students

7. Visible Human Explorer (NLM)
Doctors
Surgeons
Researchers
Students

8. NASA Environmental Data
Scientists
Farmers
Land planners
Students

9. Economists, Policy makers, Journalists
Bureau of Census
Economists, Policy makers, Journalists
Teachers, Students

10. NSF Digital Government Initiative
Find what you need
Understand what you Find UMd & UNC

11. Session 1: The Case for Information Visualization
Seven types (1-, 2-, 3-, multi-dimensional data, temporal, tree and network data)
Seven user tasks (overview, zoom, filter, details-on-demand, relate, history, and extract)
Direct manipulation
Dynamic queries

12. Session 2: Structured data
Multidimensional and multivariate data
Temporal data visualization
Hierarchical and tree structured data
Network information visualization

13. Session 3: User controls
Zooming interfaces
Focus+Context vs Overview+Detail
Large Screen High Resolutions Displays
2D versus 3D desktops & workspaces
Coordination of visualizations
Other Challenges

14. Information Visualization
The eye…
the window of the soul,
is the principal means
by which the central sense
can most completely and
abundantly appreciate
the infinite works of nature.
Leonardo da Vinci
( )

15. Information Visualization
Compact graphical presentation AND
user interface for
manipulating large numbers of items ( ),
possibly extracted from far larger datasets.
Enables users to make
discoveries,
decisions, or
explanations
about
patterns (trend, cluster, gap, outlier...),
groups of items, or
individual items.

16. Information Visualization: Using Vision to Think
Visual bandwidth is enormous
Human perceptual skills are remarkable
Trend, cluster, gap, outlier...
Color, size, shape, proximity...
Human image storage is fast and vast
Opportunities
Spatial layouts & coordination
Information visualization
Scientific visualization & simulation
Telepresence & augmented reality
Virtual environments

17. Information Visualization: US Research Centers
Xerox PARC
3-D cone trees, perspective wall, spiral calendar
table lens, hyperbolic trees, document lens, butterfly
Univ. of Maryland
dynamic queries, range sliders, starfields, treemaps
zoombars, tight coupling, dynamic pruning, lifelines
IBM Yorktown, AT&T-Lucent Technologies
Georgia Tech, MIT Media Lab
Univ. of Wisconsin, Minnesota, Calif-Berkeley
Pacific Northwest National Labs

19. Which of my high-spending customers are most profitable?
Which customers should I target for cross-sell/up-sell?

21. Dynamic Queries: HomeFinder

22. Information Visualization: Mantra
Overview, zoom & filter, details-on-demand

23. FilmFinder

27. Dynamap: Choropleth maps

28. Dynamap: Choropleth maps

29. Dynamap: Choropleth maps

30. Influence Explorer
Tweedie, Spence et al. CHI 96

31. Information Visualization: Data Types
1-D Linear Document Lens, SeeSoft, Info Mural, Value Bars
2-D Map GIS, ArcView, PageMaker, Medical imagery
3-D World CAD, Medical, Molecules, Architecture
Multi-Dim Parallel Coordinates, Spotfire, XGobi, Visage, Influence Explorer, TableLens, DEVise
Temporal Perspective Wall, LifeLines, Lifestreams, Project Managers, DataSpiral
Tree Cone/Cam/Hyperbolic, TreeBrowser, Treemap
Network Netmap, netViz, SeeNet, Butterfly, Multi-trees
(Online Library of Information Visualization Environments)
otal.umd.edu/Olive

32. Information Visualization: Tasks
Overview Gain an overview of the entire collection
Zoom Zoom in on items of interest
Filter Filter out uninteresting items
Details-on-demand Select an item or group and get details when needed
Relate View relationships among items
History Keep a history of actions to support undo, replay, and progressive refinement
Extract Allow extraction of sub-collections and of the query parameters

33. Information Visualization: Design Guidelines
Direct manipulation strategies
Visual presentation of query components
Visual presentation of results
Rapid, incremental and reversible actions
Selection by pointing (not typing)
Immediate and continuous feedback
Reduces errors
Encourages exploration

34. Visual Information Seeking: Design Principles
Dynamic queries
Visual query formulation and immediate output
Rapid, incremental and reversible actions
Sliders, buttons, selectors
Starfield display
Complete overview: ordinal & categorical variables as axes
Colored points of light reveal patterns
Zoom bars to focus attention
Tight coupling to preserve display invariants
No errors
Output becomes input
Details-on-demand

35. Session 2: Structured data
Multidimensional and multivariate data
Temporal data visualization
Hierarchical and tree structured data
Network information visualization

36. Parallel Coordinates One vertical bar per dimension
Each point becomes a set of connected lines
True multidimensional technique
Needs powerful interface for filtering, marking, coloring
Powerful technique but long learning period

37. Parallel Coordinates (Parallax-Inselberg)

38. TableLens/Eureka and Infozoom
Two compact views of tables
Learned easily
TableLens: local enlargement of areas of interest, creation of subtables
Infozoom: shows distributions, allows progressive filtering
Different orientation (vertical/horizontal)

39. TableLens/Eureka

40. InfoZoom

41. InfoZoom

42. Temporal data visualization:LifeLines
Parallel lines color/size coded & grouped in categories
Zooming or hierarchical browsing allows focus+context
Examples
Youth histories & medical records
Personal resumes, student records & performance reviews
Challenges
Aggregation & alerts Overview & detail views
Easy import & export Labeling
(Plaisant et al., CHI96)

43. LifeLines

44. Lifelines: Customer records
Temporal data visualization
Medical patient histories
Customer relationship management
Legal case histories

45. Perspective wall (Xerox Parc)
Mackinlay et al, CHI91

46. TimeSearcher

47. Tree Visualizations Hierarchical data
Challenge: understand relationships without getting lost
Explicit vs. implicit depictions of trees
Connections vs. containments
Size limitations – breadth and depth

48. Tree Visualization Toolkits

49. Spacetree + Familiar & animated + Space limited + Focuses attention
+ Familiar & animated
+ Space limited
+ Focuses attention
Requires some learning

50. Hyperbolic trees Visually appealing Space limited 2-level look-ahead
Easy affordances
Hard to scan
Poor screen usage
Too volatile
Lamping et al. CHI 95

51. Startree Toolkit

52. CamTree - ConeTree
Xerox PARC

53. Treemap - view large trees with node values
Space filling
Space limited
Color coding
Size coding
Requires learning
TreeViz (Mac, Johnson, 1992)
NBA-Tree(Sun, Turo, 1993)
Winsurfer (Teittinen, 1996)
Diskmapper (Windows, Micrologic)
Treemap97 (Windows, UMd)
Treemap 3.0 (Java)

55. Treemap - Stock market, clustered by industry

56. Treemap – Product catalogs

57. Treemap – Monitoring

58. Million-Item Treemap

59. GRIDL – Hierarchical Axes

60. Network Visualization
Arbitrarily connected items
Nodes-links-paths-clusters
Problems
Layout as size grows
Clutter vs clusters
External relationships
Geography
Taxonomies
NetMap
Entrieva SemioMap

61. Web Browsing

62. Communication Networks

63. Enterprise Networks

64. Treemap – Directed, Acyclic Graphs

65. Session 3: User controls
Zooming interfaces
Focus+Context vs Overview+Detail
Large Screen High Resolutions Displays
2D versus 3D desktops & workspaces
Coordination of visualizations
Other Challenges

66. Fisheye views & Zooming User Interfaces
Distortion to magnify areas of interest User-control, zoom factors of 3-5
Multi-scale spaces Zoom in/out & Pan left/right
Smooth zooming
Semantic zooming
Overviews + details-on-demand
Stasko, GATech

67. GlassEye – Zooming Exploration
(see Hochheiser paper

68. DateLens

69. PhotoMesa

70. PhotoFinder

71. Snap-Together Visualization
Allow coordination designers to create novel layouts that combine existing visualizations
Allow users to navigate large datasets conveniently

72. Snap in Java – with Builder
snap.cs.vt.edu

73. Hierarchical Clustering Explorer

74. High-Resolution, Wall-Size Displays
graphics.stanford.edu/~francois/

75. Spectrum of 3-D Visualizations
Immersive Virtual Environment with head-mounted stereo display and head tracking
Desktop 3-D for 3-D worlds
medical, architectural, scientific visualizations
Desktop 3-D for artificial worlds
Bookhouse, file-cabinets, shopping malls
Desktop 3-D for information visualization
cone/cam trees, perspective wall, web-book
SGI directories, Visible Decisions, Media Lab landscapes
XGobi scatterplots, Themescape, Visage
Chartjunk 3-D: barcharts, piecharts, histograms

76. Themescape
Wise et al., see also

77. Starlight
Battelle – Pacific Northwest National Lab

78. Mineset

79. WebBook-WebForager
Card, Robertson, George and York, CHI 96

80. Microsoft: Task Gallery
research.microsoft.com/ui/TaskGallery/

81. Clockwise3d www.clockwise3d.com

82. Clockwise3d

83. Other challenges: Labeling
Excentric Labeling

84. Other challenges: Universal Usability
Helping novice users get started
508 / disabled users
Range of devices, network speed, etc.

85. www.cs.umd.edu/hcil Human-Computer Interaction Laboratory
20th Anniversary Open House
May 29-30, 2003

86. For More Information
Visit the HCIL website for 300 papers & info on videos (
See Chapter 15 on Info Visualization Shneiderman, B., Designing the User Interface: Strategies for Effective Human-Computer Interaction: Third Edition (1998) (
Book of readings: Card, S., Mackinlay, J., and Shneiderman, B. Information Visualization: Using Vision to Think (1999)