1. stanford hci group / cs147 http://cs147.stanford.ed u 30 October 2008 Information Design Scott Klemmer

2. Overview  Perception and Information  Visualization  Collaboration

3. Color: Edward Tufte IMAGE REMOVED

4. Color: Edward Tufte IMAGE REMOVED

5. Color (Java L&F)  Six color semantic scheme  Clean, consistent look  Easy on eyes (mostly gray)

7. How to get color right  Design in grayscale first  Keep luminance values from grayscale when moving to color

8. Proportion and Scale Kevin Mullet and Darrell Sano, Designing Visual Interfaces

9. “Pridefully Obvious Presentation”

10. Marks of Typographic Style http://www.adobe.com/type/topics/info5. html Ligatures Upper and lower case numbers

11. Proper Quotes  Distinguishing open from close makes reading easier  Tags in HTML have open and close, e.g., as opposed to |html|  Spanish has open and close exclamation, question mark, e.g., ¡hay caramba!, ¿que pasa?  Quotes “ ” have open and close too Quotes in HTML ““Left Double Quotation ””Right Double Quotation ‘ ‘Left Single Quotation ’ ’Right Single Quotation

13. Some Starting Points  Gather materials you find successful  Could be from a very different domain  “Good artists borrow, great artists steal” - Picasso  Include visual design professionals in the iterative design cycle

14. 14

15. 15 Challenger Disaster 1 of 13 pages of material faxed to NASA by Morton Thiokol

16. 16 Challenger Disaster 1 of 13 pages of material faxed to NASA by Morton Thiokol

17. 17 Challenger Disaster E. Tufte, pp. 46-47, Visual Explanations

18. 18 Challenger Disaster Redrawn by E. Tufte, p. 49, Visual Explanations

19. 19 Functions of visualizations Communicate information to others Make a point Tell a story Make decisions Support analysis and reasoning Answer a question “One image = One diagnosis” To explore and discover; encourage creativity Look at things in a new way “The purpose of computing is insight, not numbers” [R. Hamming] Inspire

20. 20 The Purpose of Data Visualization is to Help People Think and Communicate

21. Basics of info. viz.  Overview first  Zoom and filter  Details on command (Shneiderman)

22. 22 Gulfs of Execution & Evaluation Real world (Interactions) Conceptual model (Goals) Evaluation Execution Gulfs Norman 1986

23. 23 Gulf of Evaluation Real world: Conceptual model: x,y correlated? Evaluation Gulf

24. 24 Gulf of Evaluation Real world: Conceptual model: x,y correlated? Evaluation Gulf

25. 25 Gulf of Evaluation Real world: Conceptual model: x,y correlated? Evaluation Gulf  = -.29

26. 26 Gulf of Execution Real world Conceptual model: Draw a rectangle Execution Gulf Move 90 30 Rotate 35 Pen down …

27. 27 Gulf of Execution Real world Execution Gulf Conceptual model: Draw a rectangle

28. 28 DataConceptual model Evaluation Execution Visualization Representation Manipulation Visualization userVisualization designer Visualization: A Double Gulf?

29. 29 Data Evaluation Representation x,y correlated? Visualization userVisualization designer Bad visualization?

30. 30 Data Evaluation Representation  = -.29 x,y correlated? Visualization userVisualization designer Better Visualization?

31. 31 Route Maps Overlaid RouteSketched Route Agrawala and Stolte, Rendering Effective Route Maps, SIGGRAPH 2001 1.Find cognitive and perceptual principles 2.Optimize the visualization according to these principles

32. 32 Matthew Ericson, NY Times 2004 presidential election

33. 33 Matthew Ericson, NY Times 2004 presidential election

34. 34 2004 presidential election http://www-personal.umich.edu/~mejn/election/

35. 35 From Cartography, Dent

36. 36 From Cartography, Dent

37. 37

38. 38 Phan et al. 2005

39. 39 Minard (1861)

40. 40 Dynamic Queries TimeSearcher: Hochheiser and Shneiderman 2001

41. The Future: Collaboration  Many Eyes  17 visualization types  Anyone can upload a data set  Anyone can create visualization