The Eyes Have It! User Interfaces for Information Visualization Ben Shneiderman [e-mail] Founding Director (1983-2000), Human-Computer Interaction Lab Professor, Department of Computer Science Member, Institutes for Advanced Computer Studies

1
The Eyes Have It!User Interfaces for Information
VisualizationBen Shneiderman
ben_at_cs.umd.eduFounding Director (1983-2000),
Human-Computer Interaction LabProfessor,
Department of Computer ScienceMember, Institutes
for Advanced Computer Studies Systems
ResearchUniversity of MarylandCollege Park,
MD 20742
2
Human-Computer Interaction Laboratory
Interdisciplinary research community -
Computer Science Psychology - Information
Studies Education
(www.cs.umd.edu/hcil)
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
• 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

www.awl.com/DTUI hcibib.org useit.com
6
U.S. 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
Bureau of the Census

• Economists, Policy makers, Journalists
• Teachers, Students

10
NSF Digital Government Initiative

• Find what you need
• Understand what you Find

• Census,
• NCHS,
• BLS, EIA,
• NASS, SSA

www.ils.unc.edu/govstat/
11
International Childrens Digital Libary
12
Zooming User Interfaces

www.cs.umd.edu/jazz
www.cs.umd.edu/hcil/datelens
13
Zooming User Interfaces DateLens
www.cs.umd.edu/hcil/datelens
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
• (1452 - 1519)

15
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

16
Information Visualization Definition

• Compact graphical presentation AND
• user interface for
• manipulating large numbers of items (102 -
  106),
• 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.

17
Information Visualization US Research Centers

• Xerox PARC
• 3-D cone trees, perspective wall, spiral calendar
• table lens, hyperbolic trees, document lens
• Univ. of Maryland
• dynamic queries, range sliders, starfields,
  treemaps, timeboxes, zoombars
• tight coupling, dynamic pruning, lifelines
• IBM, Microsoft, ATT
• Georgia Tech, MIT Media Lab
• Univ. of Wisconsin, Minnesota, Calif-Berkeley
• Pacific Northwest National Labs

18
Treemap Stock market, industry clustered
19
Treemap Product catalogs
www.hivegroup.com
20
Treemap Monitoring
www.hivegroup.com
21
Treemap Gene Ontology
www.cs.umd.edu/hcil/treemap/
22
LifeLines
www.cs.umd.edu/hcil/lifelines/
23
PhotoMesa
www.cs.umd.edu/hcil/photomesa
24
Leonardos Laptop
The old computing is about what computers can
do, The New Computing is about what people can
do
mitpress.mit.edu/leonardoslaptop www.cs.umd.edu/h
cil/newcomputing
25
An Inspirational Muse Leonardo da Vinci
(1452-1519)

• Renaissance Man
• Combined science art
• Integrated engineering esthetics
• Balanced technology advances human
  values
• Merged visionary practical

26
ZUI Pocket PhotoMesa
www.windsorinterfaces.com
27
(No Transcript)
28
(No Transcript)
29
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

30
(No Transcript)
31
(No Transcript)
32
(No Transcript)
33
www.mayaviz.com
34
Visualization Toolkits
www.ilog.com
35
Information Visualization Mantra

• Overview, zoom filter, details-on-demand
• Overview, zoom filter, details-on-demand
• Overview, zoom filter, details-on-demand
• Overview, zoom filter, details-on-demand
• Overview, zoom filter, details-on-demand
• Overview, zoom filter, details-on-demand
• Overview, zoom filter, details-on-demand
• Overview, zoom filter, details-on-demand
• Overview, zoom filter, details-on-demand
• Overview, zoom filter, details-on-demand

36
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
37
LifeLines Patient Histories
38
LifeLines Customer Histories

• Temporal data visualization
• Medical patient histories
• Customer relationship management
• Legal case histories

39
Temporal Data TimeSearcher 1.3

• Time series
• Stocks
• Weather
• Genes
• User-specified patterns
• Rapid search

40
Temporal Data TimeSearcher 2.0

• Long Time series (gt10,000 time points)
• Multiple variables
• Controlled precision in match (Linear, offset,
  noise, amplitude)

41
Hyperbolic Tree
42
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) Treemap3 (Windows, UMd,
2001)
(Shneiderman, ACM Trans. on Graphics, 1992)
43
Treemap Stock market, clustered by industry
44
Treemap Product catalogs
www.hivegroup.com
45
Treemap Monitoring
www.hivegroup.com
46
Treemap Newsmap
www.hivegroup.com
47
Treemap Gene Ontology
http//www.cs.umd.edu/hcil/treemap/
48
Treemap Daily Production Reports
691 wells grouped by Asset team. Size barrels
of oil produced per day Color lost oil
(difference between actual and expected)
49
Treemap Project Management
Projects grouped by owner and type. Size
gross budget Color funds above or below
budget
50
Spacetree
www.cs.umd.edu/hcil/spacetree

• Familiar animated
• Space limited
• Focuses attention
• Requires some learning

51
Hierarchical Clustering Explorer
www.cs.umd.edu/hcil/hce/
52
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

53
Leonardo da Vinci (1452-1519)

• Renaissance Man
• Painter
• Inventor
• Visionary
• Mathematician
• Philosopher
• Engineer

MIT Press, 2003
54
Upcoming Events
October 10-12, 2004 IEEE Information
Visualization Symposium Austin, TX
www.infovis.org
Information Visualization Contest
www.cs.umd.edu/hcil/iv04contest/
55
Upcoming Events
January 17-18, 2005 SPIE Visual Data Analysis
Symposium San Jose, CA www.infovis.org
July 2005 9th International Conference on
Information Visualisation - London
www.graphicslink.demon.co.uk/IV05/
Asia Pacific Information Visualization www/
56
www.cs.umd.edu/hcil
57
AudioMap Sonification

• Motivation improve vision-impaired users access
  to geo-referenced statistical data
• Approach interactive sonification
• Tie spatial sound to areas to create a virtual
  map
• Data-to-sound mapping Piano pitch -gt value.
  Can be followed by short string pitch -gt
  vertical position
• Interactions for auditory information seeking
• Gist (overview) spatial sweeping
• Navigation state-by-state exploration
• Details-on-demand name value
• spoken on request
• Pilot user study (9 sighted subjects)
• Users can recognize some geographical patterns
• Users preferred spatial audio map over table

58
For More Information

• Visit the HCIL website for 350 papers info on
  videos www.cs.umd.edu/hcil
• Conferences resources www.infovis.org
• See Chapter 14 on Info Visualization
  Shneiderman, B. and Plaisant, C., Designing the
  User Interface Strategies for Effective
  Human-Computer Interaction Fourth Edition
  (April 2004) www.awl.com/DTUI
• Edited Collections Card, S., Mackinlay, J.,
  and Shneiderman, B. (1999) Readings in
  Information Visualization Using Vision to Think
  Bederson, B. and Shneiderman, B. (2003)
  The Craft of Information Visualization Readings
  and Reflections

59
For More Information

• Treemaps
• HiveGroup www.hivegroup.com
• Smartmoney www.smartmoney.com/marketmap
• HCIL Treemap 4.0 www.cs.umd.edu/hcil/treemap
• Spotfire www.spotfire.com
• TimeSearcher www.cs.umd.edu/hcil/treemap
• Hierarchical Clustering Explorer
  www.cs.umd.edu/hcil/hce