The Eyes Have It: User Interfaces for Information Visualization Ben Shneiderman ([email protected]) Director, Human-Computer Interaction Laboratory Professor, Department of Computer Science Member, Institutes for Advanced Computer Studies.
Download ReportTranscript The Eyes Have It: User Interfaces for Information Visualization Ben Shneiderman ([email protected]) Director, Human-Computer Interaction Laboratory Professor, Department of Computer Science Member, Institutes for Advanced Computer Studies.
The Eyes Have It: User Interfaces for Information Visualization
Ben Shneiderman
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 (10 2 - 10 6 ), 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
1-D Linear
2-D Map
3-D World
Multi-Dim Temporal
Tree
Network
Document Lens, SeeSoft, Info Mural, Value Bars GIS, ArcView, PageMaker, Medical imagery CAD, Medical, Molecules, Architecture Parallel Coordinates, Spotfire, XGobi, Visage, Influence Explorer, TableLens, DEVise Perspective Wall, LifeLines, Lifestreams, Project Managers, DataSpiral Cone/Cam/Hyperbolic, TreeBrowser, Treemap 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
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
History
View relationships among items 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
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