The Eyes Have It!
User Interfaces for Information Visualization
Ben Shneiderman
ben@cs.umd.edu
Founding Director (1983-2000), Human-Computer Interaction Lab
Professor, Department of Computer Science
Member, Institutes for Advanced Computer Studies &
Systems Research
University of Maryland
College Park, MD 20742
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
hcibib.org
useit.com
U.S. 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 the Census
• Economists, Policy
makers, Journalists
• Teachers, Students
NSF Digital Government Initiative
• Find what you need
• Understand what you Find
Census,
NCHS,
BLS, EIA,
NASS, SSA
www.ils.unc.edu/govstat/
International Children’s Digital Libary
Zooming User Interfaces
www.cs.umd.edu/jazz
www.cs.umd.edu/hcil/datelens
Zooming User Interfaces: DateLens
www.cs.umd.edu/hcil/datelens
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)
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: 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, AT&T
Georgia Tech, MIT Media Lab
Univ. of Wisconsin, Minnesota,
Calif-Berkeley
Pacific Northwest National Labs
Treemap: Stock market, industry clustered
Treemap: Product catalogs
www.hivegroup.com
Treemap: Monitoring
www.hivegroup.com
Treemap: Gene Ontology
www.cs.umd.edu/hcil/treemap/
LifeLines
www.cs.umd.edu/hcil/lifelines/
PhotoMesa
www.cs.umd.edu/hcil/photomesa
Leonardo’s 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/hcil/newcomputing
An Inspirational Muse:
Leonardo da Vinci (1452-1519)
Renaissance Man
•
•
•
•
Combined
science & art
Integrated
engineering & esthetics
Balanced
technology advances
& human values
Merged
visionary & practical
ZUI: Pocket PhotoMesa
www.windsorinterfaces.com
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
www.mayaviz.com
Visualization Toolkits
www.ilog.com
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: Patient Histories
LifeLines: Customer Histories
Temporal data visualization
• Medical patient histories
• Customer relationship
management
• Legal case histories
Temporal Data: TimeSearcher 1.3
•
•
•
Time series
• Stocks
• Weather
• Genes
User-specified
patterns
Rapid search
Temporal Data: TimeSearcher 2.0
•
•
•
Long Time series (>10,000 time points)
Multiple variables
Controlled precision in match
(Linear, offset, noise, amplitude)
Hyperbolic Tree
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)
Treemap: Stock market, clustered by industry
Treemap: Product catalogs
www.hivegroup.com
Treemap: Monitoring
www.hivegroup.com
Treemap: Newsmap
www.hivegroup.com
Treemap: Gene Ontology
http://www.cs.umd.edu/hcil/treemap/
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)
Treemap: Project Management
Projects grouped by owner and type.
Size = gross budget Color = funds above or below budget
Spacetree
+ Familiar & animated
+ Space limited
+ Focuses attention
 Requires some learning
www.cs.umd.edu/hcil/spacetree
Hierarchical Clustering Explorer
www.cs.umd.edu/hcil/hce/
Information Visualization: Tasks
•
•
•
•
•
•
•
Overview
Zoom
Filter
Gain an overview of the entire collection
Zoom in on items of interest
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
Leonardo da Vinci (1452-1519)
Renaissance Man
•
•
•
•
•
•
Painter
Inventor
Visionary
Mathematician
Philosopher
Engineer
MIT Press, 2003
Upcoming Events
October 10-12, 2004
IEEE Information Visualization Symposium
Austin, TX
www.infovis.org
Information Visualization Contest
www.cs.umd.edu/hcil/iv04contest/
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/
www.cs.umd.edu/hcil
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 -> value.
Can be followed by short string pitch -> 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
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
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