1. stanford hci group / cs147 http://cs147.stanford.ed u 25 September 2007 Information Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano

2. Color: Edward Tufte IMAGE REMOVED

3. Color: Edward Tufte IMAGE REMOVED

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

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

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

8. “Pridefully Obvious Presentation”

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

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

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

13. 13

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

30. 30 Matthew Ericson, NY Times 2004 presidential election

31. 31 Matthew Ericson, NY Times 2004 presidential election

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

33. 33 From Cartography, Dent

34. 34 From Cartography, Dent

35. 35

36. 36 Phan et al. 2005

37. 37 Minard (1861)

38. 38 Dynamic Queries TimeSearcher: Hochheiser and Shneiderman 2001

39. Announcements  Now online  Sample midterm questions  This week’s feedback schedule  Python tutorial video & resources  Submissions: you can now view other group members  Winter d.school class info session Thurs, 11/1, 5–6pm, Sweet Hall 2 nd floor