EyesHaveIt.ppt 2119KB Jun 23 2011 12:31:10 PM

(1)

The Eyes Have It:

User Interfaces for

Information Visualization

Ben Shneiderman

(ben@cs.umd.edu) (ben@cs.umd.edu)

Director, Human-Computer Interaction Laboratory

Professor, Department of Computer Science

Member, Institutes for Advanced Computer Studies &

Systems Research

(2)

Human-Computer Interaction Laboratory

Interdisciplinary research community

- Computer Science & Psychology

- Information Studies & Education

(3)

User Interface Design Goals



Cognitively comprehensible:

Consistent, predictable & controllable



Affectively acceptable:

Mastery, satisfaction & responsibility

NOT:

(4)

Scientific Approach

(beyond user friendly)



Specify users and tasks



Predict and measure

 time to learntime to learn

 speed of performancespeed of performance  rate of human errorsrate of human errors

 human retention over timehuman retention over time



Assess subjective satisfaction

(Questionnaire for User Interface Satisfaction)(Questionnaire for User Interface Satisfaction)



Accommodate individual differences



Consider social, organizational & cultural context

(5)

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

(6)

Library of Congress



Scholars, Journalists, Citizens

(7)

Visible Human Explorer (NLM)



Doctors



Surgeons



Researchers

(8)

NASA Environmental Data



Scientists



Farmers



Land planners

(9)

Bureau of Census



Economists, Policy

makers, Journalists

(10)

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.

(11)

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

(12)

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

(13)

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

(14)

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

(15)

(16)

(17)

(18)

(19)

Customer Analysis Perspective addresses:

(20)

(21)

Starlight

(22)

Information Visualization: Mantra



Overview, zoom & filter, details-on-demand



Overview, zoom & filter, details-on-demand



(23)

Information Visualization: Data Types



1-D Linear

_{Document Lens, SeeSoft, Info Mural, Value Bars} 

2-D Map

_{GIS, ArcView, PageMaker, Medical imagery} 

3-D World

_{CAD, Medical, Molecules, Architecture}



Multi-Dim

_{Parallel Coordinates, Spotfire, XGobi, Visage,}

Influence Explorer, TableLens, DEVise



Temporal

_{Perspective Wall, LifeLines, Lifestreams,}

Project Managers, DataSpiral



Tree

_{Cone/Cam/Hyperbolic, TreeBrowser, Treemap} 

Network

_{Netmap, netViz, SeeNet, Butterfly, Multi-trees}

(24)

(25)

Current Research - LifeLines

Temporal data visualization



Medical patient histories



Customer relationship management

(26)

Treemap - view large trees with node values

 Space fillingSpace filling

 Space limited_{Space limited}

 Color codingColor coding

 Size coding_{Size coding}

 Requires learning_{Requires learning}

(Shneiderman, ACM Trans. on Graphics, 1992)

TreeViz (Mac, Johnson, 1992) NBA-Tree(Sun, Turo, 1993) Winsurfer (Teittinen, 1996)

(27)

Treemap - Stock market, clustered by industry

(28)

Information Visualization: Tasks



Overview

_{Gain an overview of the entire collection} 

Zoom

_{Zoom in on items of interest}_{Zoom in on items of interest}



Filter

_{Filter out uninteresting items}_{Filter out uninteresting items}



Details-on-demand

_{Select an item or group and}_{Select an item or group and}

get details when needed



Relate

_{View relationships among items}_{View relationships among items}



History

_{Keep a history of actions to support}_{Keep a history of actions to support}

undo, replay, and progressive refinement



Extract

_{Allow extraction of sub-collections and}

(29)

Leonardo da Vinci (1452-1519)

Renaissance Man

 Painter_Painter

 InventorInventor

 VisionaryVisionary

 MathematicianMathematician

 PhilosopherPhilosopher

(30)

ACM Conference on Universal Usability

Washington, DC

November 16-17, 2000

(31)

Human-Computer Interaction Laboratory

(32)

For More Information



Visit the HCIL website for 140 papers & info on videos

(www.cs.umd.edu/hcil)(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)(www.aw.com/DTUI)



January 1999 book of readings:

Card, S., Mackinlay, J., and Shneiderman, B.