The Eyes Have It! User Interfaces for Information Visualization Ben Shneiderman [email protected] Founding Director (1983-2000), Human-Computer Interaction Lab Professor, Department of Computer Science Member, Institutes for.
Download ReportTranscript The Eyes Have It! User Interfaces for Information Visualization Ben Shneiderman [email protected] Founding Director (1983-2000), Human-Computer Interaction Lab Professor, Department of Computer Science Member, Institutes for.
The Eyes Have It! User Interfaces for Information Visualization 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 University of Maryland College Park, MD 20742 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 hcibib.org useit.com U.S. 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 the Census • Economists, Policy makers, Journalists • Teachers, Students NSF Digital Government Initiative • Find what you need • Understand what you Find Census, NCHS, BLS, EIA, NASS, SSA www.ils.unc.edu/govstat/ International Children’s Digital Libary Zooming User Interfaces www.cs.umd.edu/jazz www.cs.umd.edu/hcil/datelens Zooming User Interfaces: DateLens www.cs.umd.edu/hcil/datelens 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) 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: 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 individual items. Information Visualization: US Research Centers • • Xerox PARC • 3-D cone trees, perspective wall, spiral calendar • table lens, hyperbolic trees, document lens Univ. of Maryland • dynamic queries, range sliders, starfields, • • • • • treemaps, timeboxes, zoombars tight coupling, dynamic pruning, lifelines IBM, Microsoft, AT&T Georgia Tech, MIT Media Lab Univ. of Wisconsin, Minnesota, Calif-Berkeley Pacific Northwest National Labs Treemap: Stock market, industry clustered Treemap: Product catalogs www.hivegroup.com Treemap: Monitoring www.hivegroup.com Treemap: Gene Ontology www.cs.umd.edu/hcil/treemap/ LifeLines www.cs.umd.edu/hcil/lifelines/ PhotoMesa www.cs.umd.edu/hcil/photomesa Leonardo’s Laptop The old computing is about what computers can do, The New Computing is about what people can do mitpress.mit.edu/leonardoslaptop www.cs.umd.edu/hcil/newcomputing An Inspirational Muse: Leonardo da Vinci (1452-1519) Renaissance Man • • • • Combined science & art Integrated engineering & esthetics Balanced technology advances & human values Merged visionary & practical ZUI: Pocket PhotoMesa www.windsorinterfaces.com 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 www.mayaviz.com Visualization Toolkits www.ilog.com 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 Information Visualization: Data Types • • • • 1-D Linear 2-D Map 3-D World Multi-Dim Document Lens, SeeSoft, Info Mural, Value Bars • Temporal • • Perspective Wall, LifeLines, Lifestreams, Project Managers, DataSpiral Tree Network Cone/Cam/Hyperbolic, TreeBrowser, Treemap GIS, ArcView, PageMaker, Medical imagery CAD, Medical, Molecules, Architecture Parallel Coordinates, Spotfire, XGobi, Visage, Influence Explorer, TableLens, DEVise Netmap, netViz, SeeNet, Butterfly, Multi-trees (Online Library of Information Visualization Environments) otal.umd.edu/Olive LifeLines: Patient Histories LifeLines: Customer Histories Temporal data visualization • Medical patient histories • Customer relationship management • Legal case histories Temporal Data: TimeSearcher 1.3 • • • Time series • Stocks • Weather • Genes User-specified patterns Rapid search Temporal Data: TimeSearcher 2.0 • • • Long Time series (>10,000 time points) Multiple variables Controlled precision in match (Linear, offset, noise, amplitude) Hyperbolic Tree 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) Treemap3 (Windows, UMd, 2001) (Shneiderman, ACM Trans. on Graphics, 1992) Treemap: Stock market, clustered by industry Treemap: Product catalogs www.hivegroup.com Treemap: Monitoring www.hivegroup.com Treemap: Newsmap www.hivegroup.com Treemap: Gene Ontology http://www.cs.umd.edu/hcil/treemap/ Treemap: Daily Production Reports 691 wells grouped by Asset team. Size = barrels of oil produced per day Color = “lost” oil (difference between actual and expected) Treemap: Project Management Projects grouped by owner and type. Size = gross budget Color = funds above or below budget Spacetree + Familiar & animated + Space limited + Focuses attention Requires some learning www.cs.umd.edu/hcil/spacetree Hierarchical Clustering Explorer www.cs.umd.edu/hcil/hce/ 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 View relationships among items History Keep a history of actions to support undo, replay, and progressive refinement Extract Allow extraction of sub-collections and of the query parameters Leonardo da Vinci (1452-1519) Renaissance Man • • • • • • Painter Inventor Visionary Mathematician Philosopher Engineer MIT Press, 2003 Upcoming Events October 10-12, 2004 IEEE Information Visualization Symposium Austin, TX www.infovis.org Information Visualization Contest www.cs.umd.edu/hcil/iv04contest/ Upcoming Events January 17-18, 2005 SPIE Visual Data Analysis Symposium San Jose, CA www.infovis.org July 2005 9th International Conference on Information Visualisation - London www.graphicslink.demon.co.uk/IV05/ Asia Pacific Information Visualization www/ www.cs.umd.edu/hcil AudioMap: Sonification • • Motivation: improve vision-impaired users’ access to geo-referenced statistical data Approach: interactive sonification • Tie spatial sound to areas to create a virtual map • Data-to-sound mapping: Piano pitch -> value. Can be followed by short string pitch -> vertical position • Interactions for auditory information seeking • • Gist (overview): spatial sweeping • Navigation: state-by-state exploration • Details-on-demand: name & value spoken on request Pilot user study (9 sighted subjects) • Users can recognize some geographical • patterns Users preferred spatial audio map over table For More Information • Visit the HCIL website for 350 papers & info on videos www.cs.umd.edu/hcil • • • Conferences & resources: www.infovis.org See Chapter 14 on Info Visualization Shneiderman, B. and Plaisant, C., Designing the User Interface: Strategies for Effective Human-Computer Interaction: Fourth Edition (April 2004) www.awl.com/DTUI Edited Collections: Card, S., Mackinlay, J., and Shneiderman, B. (1999) Readings in Information Visualization: Using Vision to Think Bederson, B. and Shneiderman, B. (2003) The Craft of Information Visualization: Readings and Reflections For More Information • • • • Treemaps • HiveGroup: www.hivegroup.com • Smartmoney: www.smartmoney.com/marketmap • HCIL Treemap 4.0: www.cs.umd.edu/hcil/treemap Spotfire: www.spotfire.com TimeSearcher: www.cs.umd.edu/hcil/treemap Hierarchical Clustering Explorer: www.cs.umd.edu/hcil/hce