1. The Eyes Have It! User Interfaces for Information Visualization 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 University of Maryland College Park, MD 20742

2. Human-Computer Interaction Laboratory Interdisciplinary research community - Computer Science & Psychology - Information Studies & Education (www.cs.umd.edu/hcil)

3. User Interface Design Goals Cognitively comprehensible: Consistent, predictable & controllable Affectively acceptable: Mastery, satisfaction & responsibility NOT: Adaptive, autonomous & anthropomorphic

4. 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

5. 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

6. U.S. Library of Congress Scholars, Journalists, Citizens Teachers, Students

7. Visible Human Explorer (NLM) Doctors Surgeons Researchers Students

8. NASA Environmental Data Scientists Farmers Land planners Students

9. Bureau of the Census Economists, Policy makers, Journalists Teachers, Students

10. NSF Digital Government Initiative Find what you need Understand what you Find www.ils.unc.edu/govstat/ Census, NCHS, BLS, EIA, NASS, SSA

11. International Children’s Digital Libary

12. Zooming User Interfaces www.cs.umd.edu/jazz www.cs.umd.edu/hcil/datelens

13. Zooming User Interfaces: DateLens www.cs.umd.edu/hcil/datelens

14. 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)

15. 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

16. Information Visualization: Definition 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.

17. 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

18. Treemap: Stock market, industry clustered

19. www.hivegroup.com Treemap: Product catalogs

20. Treemap: Monitoring www.hivegroup.com

21. Treemap: Gene Ontology www.cs.umd.edu/hcil/treemap/

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

23. PhotoMesa www.cs.umd.edu/hcil/photomesa

24. 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

25. An Inspirational Muse: Leonardo da Vinci (1452-1519) Renaissance Man Combined science & art Integrated engineering & esthetics Balanced technology advances & human values Merged visionary & practical

26. ZUI: Pocket PhotoMesa www.windsorinterfaces.com

29. 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

33. www.mayaviz.com

34. www.ilog.com Visualization Toolkits

35. Information Visualization: Mantra Overview, zoom & filter, details-on-demand

36. 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 Cone/Cam/Hyperbolic, TreeBrowser, Treemap Network Netmap, netViz, SeeNet, Butterfly, Multi-trees (Online Library of Information Visualization Environments) otal.umd.edu/Olive

37. LifeLines: Patient Histories

38. LifeLines: Customer Histories Temporal data visualization Medical patient histories Customer relationship management Legal case histories

39. Temporal Data: TimeSearcher 1.3 Time series Stocks Weather Genes User-specified patterns Rapid search

40. Temporal Data: TimeSearcher 2.0 Long Time series (>10,000 time points) Multiple variables Controlled precision in match (Linear, offset, noise, amplitude)

41. Hyperbolic Tree

42. Treemap: view large trees with node values + Space filling + Space limited + Color coding + Size coding - Requires learning (Shneiderman, ACM Trans. on Graphics, 1992) TreeViz (Mac, Johnson, 1992) NBA-Tree(Sun, Turo, 1993) Winsurfer (Teittinen, 1996) Diskmapper (Windows, Micrologic) Treemap3 (Windows, UMd, 2001)

43. Treemap: Stock market, clustered by industry

44. www.hivegroup.com Treemap: Product catalogs

45. Treemap: Monitoring www.hivegroup.com

46. Treemap: Newsmap

47. Treemap: Gene Ontology http://www.cs.umd.edu/hcil/treemap/

48. 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)

49. Projects grouped by owner and type. Size = gross budget Color = funds above or below budget Treemap: Project Management

50. Spacetree www.cs.umd.edu/hcil/spacetree + Familiar & animated + Space limited + Focuses attention - Requires some learning

51. Hierarchical Clustering Explorer www.cs.umd.edu/hcil/hce/

52. Information Visualization: Tasks Overview Gain an overview of the entire collection Zoom Zoom in on items of interest Filter 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

53. Leonardo da Vinci (1452-1519) Renaissance Man Painter Inventor Visionary Mathematician Philosopher Engineer MIT Press, 2003

54. Upcoming Events October 10-12, 2004 IEEE Information Visualization Symposium Austin, TX www.infovis.org Information Visualization Contest www.cs.umd.edu/hcil/iv04contest/

55. Upcoming Events July 2005 9 th International Conference on Information Visualisation - London www.graphicslink.demon.co.uk/IV05/ January 17-18, 2005 SPIE Visual Data Analysis Symposium San Jose, CA www.infovis.org Asia Pacific Information Visualization www/

56. www.cs.umd.edu/hcil

57. 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

58. 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

59. 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