information visualization informs roundtable ben shneiderman ([email protected]) founding director...
TRANSCRIPT
Information VisualizationInformation VisualizationINFORMS RoundtableINFORMS Roundtable
Ben ShneidermanBen Shneiderman([email protected])([email protected])
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)