Information Visualization

INFORMS Roundtable Ben Shneiderman

([email protected])

Founding Director (1983-2000), Human-Computer Interaction Lab 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

hcibib.org

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

NSF Digital Government Initiative



Find what you need



Understand 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 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

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: 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 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: HomeFinder

www.cs.umd.edu/hcil/spotfire

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

FilmFinder

www.cs.umd.edu/hcil/spotfire

www.spotfire.com

Dynamap: Choropleth maps

www.cs.umd.edu/hcil/census

Dynamap: Choropleth maps

Dynamap: Choropleth maps

Influence Explorer

Tweedie, Spence et al. CHI 96

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

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

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

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

     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)

TableLens/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/Eureka

www.inxight.com

InfoZoom

www.humanit.de

InfoZoom

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 records

Temporal data visualization



Medical patient histories



Customer relationship management



Legal case histories

Perspective wall (Xerox Parc)

Mackinlay et al, CHI91

TimeSearcher

www.cs.umd.edu/hcil/timesearcher

Tree Visualizations

  Hierarchical data Challenge: understand relationships without getting lost  Explicit vs. implicit depictions of trees • Connections vs. containments  Size limitations – breadth and depth

Tree Visualization Toolkits

www.ilog.com

Spacetree

www.cs.umd.edu/hcil/spacetree

+ Familiar & animated + Space limited + Focuses attention  Requires some learning

Hyperbolic trees

       Visually appealing Space limited 2-level look-ahead Easy affordances Hard to scan Poor screen usage Too volatile Lamping et al. CHI 95

Startree Toolkit

www.inxight.com

CamTree - ConeTree

Xerox PARC

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) Treemap 3.0 (Java)

www.cs.umd.edu/hcil/treemaps

Treemap - Stock market, clustered by industry

www.smartmoney.com/marketmap

Treemap – Product catalogs

www.hivegroup.com

Treemap – Monitoring

www.hivegroup.com

Million-Item Treemap

www.cs.umd.edu/hcil/millionvis

GRIDL – Hierarchical Axes

www.cs.umd.edu/hcil/west-legal/

Network Visualization

   Arbitrarily connected items • Nodes-links-paths-clusters Problems • • Layout as size grows Clutter vs clusters External relationships • • Geography Taxonomies NetMap Entrieva SemioMap

Web Browsing

www.kartoo.com

Communication Networks

www.netviz.com

www.ilog.com

Enterprise Networks

www.lumeta.com

Treemap – 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 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 Exploration

(see Hochheiser paper

www.cs.umd.edu/hcil

)

DateLens

www.cs.umd.edu/hcil/datelens

PhotoMesa

www.cs.umd.edu/hcil/photomesa

PhotoFinder

www.cs.umd.edu/hcil/photolib

Snap-Together Visualization

www.cs.umd.edu/hcil/snap

• Allow coordination designers to create novel layouts that combine existing visualizations • Allow users to navigate large datasets conveniently

Snap in Java – with Builder

snap.cs.vt.edu

Hierarchical Clustering Explorer

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

High-Resolution, Wall-Size Displays

graphics.stanford.edu/~francois/ www.cs.umd.edu/gvil/

Spectrum 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

Starlight

Battelle – Pacific Northwest National Lab

Mineset

WebBook-WebForager

Card, Robertson, George and York, CHI 96

Microsoft: Task Gallery

research.microsoft.com/ui/TaskGallery/

Clockwise3d

www.clockwise3d.com

Clockwise3d

Other challenges: Labeling

Excentric Labeling

www.cs.umd.edu/hcil/excentric

Other 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 20 th Anniversary Open House May 29-30, 2003

www.cs.umd.edu/hcil

For More Information

 Visit the HCIL website for 300 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.awl.com/DTUI)

 Book of readings: Card, S., Mackinlay, J., and Shneiderman, B.

Information Visualization: Using Vision to Think

(1999)