EyesHaveIt.ppt 2119KB Jun 23 2011 12:31:10 PM
The Eyes Have It:
User Interfaces for
Information Visualization
Ben Shneiderman
(ben@cs.umd.edu)
Director, Human-Computer Interaction Laboratory
Professor, Department of Computer Science
Member, Institutes for Advanced Computer Studies &
Systems Research
Human-Computer Interaction Laboratory
Interdisciplinary research community
- Computer Science & Psychology
- Information Studies & Education
(www.cs.umd.edu/hcil)
User Interface Design Goals
Cognitively comprehensible:
Consistent, predictable & controllable
Affectively acceptable:
Mastery, satisfaction & responsibility
NOT:
Adaptive, autonomous & anthropomorphic
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
Design Issues
Input devices & strategies
Output devices & formats
Keyboards, pointing devices, voice
Direct manipulation
Menus, forms, commands
Screens, windows, color, sound
Text, tables, graphics
Instructions, messages, help
Collaboration & communities
Manuals, tutorials, training
www.awl.com/DTUI
usableweb.com
useit.com
Library of Congress
Scholars, Journalists, Citizens
Teachers, Students
Visible Human Explorer (NLM)
Doctors
Surgeons
Researchers
Students
NASA Environmental Data
Scientists
Farmers
Land planners
Students
Bureau of Census
Economists, Policy
makers, Journalists
Teachers, Students
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)
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
Information Visualization: Definition
Compact graphical presentation and
user interface for
manipulating large numbers of items (10 2 - 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.
Information Visualization: Research Centers
Xerox PARC
Univ. of Maryland
3-D cone trees, perspective wall, spiral calendar
table lens, hyperbolic trees, document lens, butterfly
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
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
Customer Analysis Perspective addresses:
Which of my highest-spending customers are my most profitable?
Which customers should I target for cross-sell/up-sell opportunities?
Starlight
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
Information Visualization: Data Types
1-D Linear
2-D Map
3-D World
Multi-Dim
Document Lens, SeeSoft, Info Mural, Value Bars
Temporal
Perspective Wall, LifeLines, Lifestreams,
Project Managers, DataSpiral
Tree
Network
Cone/Cam/Hyperbolic, TreeBrowser, Treemap
GIS, ArcView, PageMaker, Medical imagery
CAD, Medical, Molecules, Architecture
Parallel Coordinates, Spotfire, XGobi, Visage,
Influence Explorer, TableLens, DEVise
Netmap, netViz, SeeNet, Butterfly, Multi-trees
(Online Library of Information Visualization Environments)
otal.umd.edu/Olive
LifeLines
Current Research - LifeLines
Temporal data visualization
Medical patient histories
Customer relationship management
Legal case histories
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)
(Shneiderman, ACM Trans. on Graphics, 1992)
Treemap - Stock market, clustered by industry
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
History
View relationships among items
Extract
Allow extraction of sub-collections and
of the query parameters
Keep a history of actions to support
undo, replay, and progressive refinement
Leonardo da Vinci (1452-1519)
Renaissance Man
Painter
Inventor
Visionary
Mathematician
Philosopher
Engineer
ACM Conference on Universal Usability
Washington, DC
November 16-17, 2000
www.acm.org/sigchi/cuu
Human-Computer Interaction Laboratory
www.cs.umd.edu/hcil
For More Information
Visit the HCIL website for 140 papers & info on videos
(www.cs.umd.edu/hcil)
See Chapter 15 on Info Visualization
Shneiderman, B., Designing the User Interface:
Strategies for Effective Human-Computer Interaction:
Third Edition (1998) (www.aw.com/DTUI)
January 1999 book of readings:
Card, S., Mackinlay, J., and Shneiderman, B.
Information Visualization: Using Vision to Think
User Interfaces for
Information Visualization
Ben Shneiderman
(ben@cs.umd.edu)
Director, Human-Computer Interaction Laboratory
Professor, Department of Computer Science
Member, Institutes for Advanced Computer Studies &
Systems Research
Human-Computer Interaction Laboratory
Interdisciplinary research community
- Computer Science & Psychology
- Information Studies & Education
(www.cs.umd.edu/hcil)
User Interface Design Goals
Cognitively comprehensible:
Consistent, predictable & controllable
Affectively acceptable:
Mastery, satisfaction & responsibility
NOT:
Adaptive, autonomous & anthropomorphic
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
Design Issues
Input devices & strategies
Output devices & formats
Keyboards, pointing devices, voice
Direct manipulation
Menus, forms, commands
Screens, windows, color, sound
Text, tables, graphics
Instructions, messages, help
Collaboration & communities
Manuals, tutorials, training
www.awl.com/DTUI
usableweb.com
useit.com
Library of Congress
Scholars, Journalists, Citizens
Teachers, Students
Visible Human Explorer (NLM)
Doctors
Surgeons
Researchers
Students
NASA Environmental Data
Scientists
Farmers
Land planners
Students
Bureau of Census
Economists, Policy
makers, Journalists
Teachers, Students
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)
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
Information Visualization: Definition
Compact graphical presentation and
user interface for
manipulating large numbers of items (10 2 - 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.
Information Visualization: Research Centers
Xerox PARC
Univ. of Maryland
3-D cone trees, perspective wall, spiral calendar
table lens, hyperbolic trees, document lens, butterfly
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
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
Customer Analysis Perspective addresses:
Which of my highest-spending customers are my most profitable?
Which customers should I target for cross-sell/up-sell opportunities?
Starlight
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
Information Visualization: Data Types
1-D Linear
2-D Map
3-D World
Multi-Dim
Document Lens, SeeSoft, Info Mural, Value Bars
Temporal
Perspective Wall, LifeLines, Lifestreams,
Project Managers, DataSpiral
Tree
Network
Cone/Cam/Hyperbolic, TreeBrowser, Treemap
GIS, ArcView, PageMaker, Medical imagery
CAD, Medical, Molecules, Architecture
Parallel Coordinates, Spotfire, XGobi, Visage,
Influence Explorer, TableLens, DEVise
Netmap, netViz, SeeNet, Butterfly, Multi-trees
(Online Library of Information Visualization Environments)
otal.umd.edu/Olive
LifeLines
Current Research - LifeLines
Temporal data visualization
Medical patient histories
Customer relationship management
Legal case histories
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)
(Shneiderman, ACM Trans. on Graphics, 1992)
Treemap - Stock market, clustered by industry
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
History
View relationships among items
Extract
Allow extraction of sub-collections and
of the query parameters
Keep a history of actions to support
undo, replay, and progressive refinement
Leonardo da Vinci (1452-1519)
Renaissance Man
Painter
Inventor
Visionary
Mathematician
Philosopher
Engineer
ACM Conference on Universal Usability
Washington, DC
November 16-17, 2000
www.acm.org/sigchi/cuu
Human-Computer Interaction Laboratory
www.cs.umd.edu/hcil
For More Information
Visit the HCIL website for 140 papers & info on videos
(www.cs.umd.edu/hcil)
See Chapter 15 on Info Visualization
Shneiderman, B., Designing the User Interface:
Strategies for Effective Human-Computer Interaction:
Third Edition (1998) (www.aw.com/DTUI)
January 1999 book of readings:
Card, S., Mackinlay, J., and Shneiderman, B.
Information Visualization: Using Vision to Think