information visualization informs roundtable ben shneiderman (ben@cs.umd.edu) founding director...

Information VisualizationInformation VisualizationINFORMS RoundtableINFORMS Roundtable

Ben ShneidermanBen Shneiderman(ben@cs.umd.edu)(ben@cs.umd.edu)

Founding Director (1983-2000), Human-Computer Interaction Lab Founding Director (1983-2000), Human-Computer Interaction Lab Professor, Department of Computer ScienceProfessor, Department of Computer Science

Member, Institutes for Advanced Computer Studies &Member, Institutes for Advanced Computer Studies &Systems ResearchSystems Research

Human-Computer Interaction Laboratory

Interdisciplinary research community - Computer Science & Psychology - Information Studies & Education www.cs.umd.edu/hcil

User Interface Design GoalsUser Interface Design Goals

Cognitively comprehensible:Consistent, predictable & controllable

Affectively acceptable: Mastery, satisfaction & responsibility

NOT:

Adaptive, autonomous & anthropomorphic

Scientific ApproachScientific Approach (beyond user friendly)(beyond user friendly)

Specify users and tasksSpecify users and tasks Predict and measurePredict 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 satisfactionAssess subjective satisfaction (Questionnaire for User Interface Satisfaction)(Questionnaire for User Interface Satisfaction)

Accommodate individual differencesAccommodate individual differences Consider social, organizational & cultural contextConsider social, organizational & cultural context

Design IssuesDesign 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 hcibib.org useit.com

Library of CongressLibrary of Congress

Scholars, Journalists, CitizensScholars, Journalists, Citizens

Teachers, StudentsTeachers, Students

Visible Human Explorer (NLM)Visible Human Explorer (NLM)

DoctorsDoctors

SurgeonsSurgeons

ResearchersResearchers

StudentsStudents

NASA Environmental DataNASA Environmental Data

ScientistsScientists

FarmersFarmers

Land plannersLand planners

StudentsStudents

Bureau of CensusBureau of Census

Economists, Policy Economists, Policy makers, Journalistsmakers, Journalists

Teachers, StudentsTeachers, Students

NSF Digital Government InitiativeNSF Digital Government Initiative

Find what you needFind what you need Understand what you FindUnderstand what you Find

UMd & UNC

www.ils.unc.edu/govstat/

Session 1: The Case for

Information Visualization

Seven types (1-, 2-, 3-, multi-dimensional data, temporal, tree and network data)

Seven user tasks (overview, zoom, filter, details-on-demand, relate, history, and extract)

Direct manipulation

Dynamic queries

Session 2: Structured data

Multidimensional and multivariate data

Temporal data visualization

Hierarchical and tree structured data

Network information visualization

Session 3: User controls

Zooming interfaces

Focus+Context vs Overview+Detail

Large Screen High Resolutions Displays

2D versus 3D desktops & workspaces

Coordination of visualizations

Other Challenges

Information VisualizationInformation 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 VisualizationInformation VisualizationCompact 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: Using Vision to Think 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: US Research CentersInformation Visualization: US 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 Pacific Northwest National Labs

Which of my high-spending customers are most profitable?

Which customers should I target for cross-sell/up-sell?

Dynamic Queries: HomeFinderDynamic Queries: HomeFinder

www.cs.umd.edu/hcil/spotfire

Information Visualization: MantraInformation 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

www.cs.umd.edu/hcil/spotfireFilmFinderFilmFinder

www.spotfire.com

Dynamap: Choropleth mapsDynamap: Choropleth maps www.cs.umd.edu/hcil/census

Dynamap: Choropleth mapsDynamap: Choropleth maps

Dynamap: Choropleth mapsDynamap: Choropleth maps

Influence ExplorerInfluence Explorer

Tweedie, Spence et al. CHI 96

Information Visualization: Data TypesInformation 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(Online Library of Information Visualization Environments) otal.umd.edu/Olive

Overview Gain an overview of the entire collection Zoom Zoom Zoom in on items of interestZoom in on items of interest FilterFilter Filter out uninteresting itemsFilter out uninteresting items

Details-on-demandDetails-on-demand Select an item or group and Select an item or group and

get details when neededget details when needed RelateRelate View relationships among itemsView relationships among items

HistoryHistory Keep a history of actions to support Keep a history of actions to support undo, replay, and progressive refinementundo, replay, and progressive refinement

Extract Allow extraction of sub-collections and of the query parameters

Information Visualization: TasksInformation Visualization: Tasks

Information Visualization: Design GuidelinesInformation 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

Visual Information Seeking: Design Principles

Dynamic queries• Visual query formulation and immediate output• Rapid, incremental and reversible actions• Sliders, buttons, selectors

Starfield display• Complete overview: ordinal & categorical variables as axes• Colored points of light reveal patterns• Zoom bars to focus attention

Tight coupling to preserve display invariants• No errors• Output becomes input• Details-on-demand

Session 2: Structured data

Multidimensional and multivariate data

Temporal data visualization

Hierarchical and tree structured data

Network information visualization

Parallel Coordinates Parallel Coordinates

One vertical bar per dimension Each point becomes a set of connected lines True multidimensional technique Needs powerful interface for filtering, marking,

coloring Powerful technique but long learning period

Parallel Coordinates (Parallax-Inselberg)Parallel Coordinates (Parallax-Inselberg)

TableLens/Eureka and InfozoomTableLens/Eureka and Infozoom

Two compact views of tables Learned easily TableLens: local enlargement of areas of interest,

creation of subtables Infozoom: shows distributions, allows

progressive filtering Different orientation (vertical/horizontal)

TableLens/EurekaTableLens/Eureka www.inxight.com

InfoZoomInfoZoom www.humanit.de

InfoZoomInfoZoom

Temporal data visualization:LifeLines

Parallel lines color/size coded & grouped in categories Zooming or hierarchical browsing allows focus+context

• Examples

• Youth histories & medical records

• Personal resumes, student records & performance reviews• Challenges

• Aggregation & alerts Overview & detail views

• Easy import & export Labeling

(Plaisant et al., CHI96) www.cs.umd.edu/hcil/LifeLines

LifeLines www.cs.umd.edu/hcil/lifelines

Lifelines: Customer recordsLifelines: Customer records

Temporal data visualizationTemporal data visualization

Medical patient historiesMedical patient histories Customer relationship managementCustomer relationship management Legal case historiesLegal case histories

Perspective wall (Xerox Parc)Perspective wall (Xerox Parc)

Mackinlay et al, CHI91

TimeSearcherTimeSearcher www.cs.umd.edu/hcil/timesearcher

Hierarchical dataHierarchical data Challenge: understand relationships without Challenge: understand relationships without

getting lostgetting lost Explicit vs. implicit depictions of treesExplicit vs. implicit depictions of trees

• Connections vs. containmentsConnections vs. containments

Size limitations – breadth and depthSize limitations – breadth and depth

Tree Visualizations

www.ilog.comTree Visualization ToolkitsTree Visualization Toolkits

SpacetreeSpacetree www.cs.umd.edu/hcil/spacetree

+ Familiar & animated+ Familiar & animated

+ Space limited+ Space limited

+ Focuses attention+ Focuses attention Requires some learningRequires some learning

Hyperbolic treesHyperbolic trees

Visually appealingVisually appealing Space limitedSpace limited 2-level look-ahead2-level look-ahead Easy affordancesEasy affordances Hard to scanHard to scan Poor screen usagePoor screen usage Too volatileToo volatile

Lamping et al. CHI 95

www.inxight.comStartree ToolkitStartree Toolkit

CamTree - ConeTreeCamTree - ConeTree

Xerox PARC

Treemap - view large trees with node valuesTreemap - view large trees with node values

+ Space fillingSpace filling+ Space limitedSpace limited+ Color codingColor coding+ Size codingSize coding Requires learningRequires learning

www.cs.umd.edu/hcil/treemaps

TreeViz (Mac, Johnson, 1992)NBA-Tree(Sun, Turo, 1993)Winsurfer (Teittinen, 1996)Diskmapper (Windows, Micrologic)Treemap97 (Windows, UMd)Treemap 3.0 (Java)

Treemap - Stock market, clustered by industryTreemap - Stock market, clustered by industry

www.smartmoney.com/marketmap

www.hivegroup.comTreemap – Product catalogsTreemap – Product catalogs

Treemap – MonitoringTreemap – Monitoring www.hivegroup.com

Million-Item TreemapMillion-Item Treemap www.cs.umd.edu/hcil/millionvis

GRIDL – Hierarchical AxesGRIDL – Hierarchical Axeswww.cs.umd.edu/hcil/west-legal/

Network VisualizationNetwork Visualization Arbitrarily connected items

• Nodes-links-paths-clusters

Problems• Layout as size grows• Clutter vs clusters

External relationships • Geography• Taxonomies

Entrieva SemioMap

NetMap

Web BrowsingWeb Browsing www.kartoo.com

Communication NetworksCommunication Networks

www.netviz.com

www.ilog.com

Enterprise NetworksEnterprise Networks www.lumeta.com

Treemap – Directed, Acyclic GraphsTreemap – Directed, Acyclic Graphs

Session 3: User controls

Zooming interfaces

Focus+Context vs Overview+Detail

Large Screen High Resolutions Displays

2D versus 3D desktops & workspaces

Coordination of visualizations

Other Challenges

Fisheye views & Zooming User InterfacesFisheye views & Zooming User Interfaces Distortion to magnify areas of interest

User-control, zoom factors of 3-5 Multi-scale spaces

Zoom in/out & Pan left/right Smooth zooming Semantic zooming Overviews + details-on-demand

Stasko, GATech

GlassEye – Zooming ExplorationGlassEye – Zooming Exploration

(see Hochheiser paper (see Hochheiser paper www.cs.umd.edu/hcilwww.cs.umd.edu/hcil))

DateLensDateLens www.cs.umd.edu/hcil/datelens

PhotoMesaPhotoMesa www.cs.umd.edu/hcil/photomesa

PhotoFinderPhotoFinder www.cs.umd.edu/hcil/photolib

Snap-Together VisualizationSnap-Together Visualization

• Allow coordination designers to create novel layouts that combine existing visualizations

• Allow users to navigate large datasets conveniently

www.cs.umd.edu/hcil/snapwww.cs.umd.edu/hcil/snap

Snap in Java – with BuilderSnap in Java – with Builder snap.cs.vt.edusnap.cs.vt.edu

Hierarchical Clustering ExplorerHierarchical Clustering Explorer

www.cs.umd.edu/hcil/multi-cluster

High-Resolution, Wall-Size DisplaysHigh-Resolution, Wall-Size Displays

graphics.stanford.edu/~francois/

www.cs.umd.edu/gvil/

Spectrum of 3-D VisualizationsSpectrum of 3-D Visualizations Immersive Virtual Environment

with head-mounted stereo display and head tracking Desktop 3-D for 3-D worlds

• medical, architectural, scientific visualizations Desktop 3-D for artificial worlds

• Bookhouse, file-cabinets, shopping malls Desktop 3-D for information visualization

• cone/cam trees, perspective wall, web-book • SGI directories, Visible Decisions, Media Lab landscapes• XGobi scatterplots, Themescape, Visage

Chartjunk 3-D: barcharts, piecharts, histograms

Themescape

Wise et al., 1995 - see also www.omniviz.com

StarlightStarlight Battelle – Pacific Northwest National Lab

Mineset

WebBook-WebForagerWebBook-WebForager

Card, Robertson, George and York, CHI 96

Microsoft: Task GalleryMicrosoft: Task Gallery

research.microsoft.com/ui/TaskGallery/research.microsoft.com/ui/TaskGallery/

Clockwise3d Clockwise3d www.clockwise3d.comwww.clockwise3d.com

Clockwise3dClockwise3d

Other challenges: LabelingOther challenges: Labeling

www.cs.umd.edu/hcil/excentric

Excentric LabelingExcentric Labeling

Other challenges: Universal UsabilityOther challenges: Universal Usability Helping novice users get started

508 / disabled users

Range of devices, network speed, etc.www.otal.umd.edu/uupractice

Human-Computer Interaction Laboratory

www.cs.umd.edu/hcil

20th Anniversary Open House May 29-30, 2003

For More InformationFor More Information

Visit the HCIL website for 300 papers & info on videosVisit the HCIL website for 300 papers & info on videos (www.cs.umd.edu/hcil)(www.cs.umd.edu/hcil)

See Chapter 15 on Info VisualizationSee Chapter 15 on Info Visualization Shneiderman, B., Shneiderman, B., Designing the User Interface:Designing the User Interface: Strategies for Effective Human-Computer Interaction: Strategies for Effective Human-Computer Interaction: Third Edition Third Edition (1998) (1998) (www.awl.com/DTUI)(www.awl.com/DTUI)

Book of readings:Book of readings: Card, S., Mackinlay, J., and Shneiderman, B. Card, S., Mackinlay, J., and Shneiderman, B. Information Visualization: Using Vision to Think Information Visualization: Using Vision to Think (1999)(1999)