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 Report

Transcript 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

([email protected])

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