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
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
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 (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.
Information Visualization: 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
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
Document Lens, SeeSoft, Info Mural, Value Bars

1-D Linear
2-D Map
3-D World
Multi-Dim

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
Zoom
Filter

Details-on-demand

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


Gain an overview of the entire collection
Zoom in on items of interest
Filter out uninteresting items
Select an item or group and
get details when needed
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