INFORMS Roundtable
Ben Shneiderman
(ben@cs.umd.edu)
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



Visible Human Explorer (NLM)





NASA Environmental Data





Bureau of Census



NSF Digital Government Initiative


UMd & UNC www.ils.unc.edu/govstat/

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

Multidimensional and multivariate data
Temporal data visualization
Hierarchical and tree structured data
Network information visualization

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

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

www.cs.umd.edu/hcil/lifelines

Lifelines: Customer records




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

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)