1 / 42

30 October 2008

Information Design. Scott Klemmer. 30 October 2008. Overview. Perception and Information Visualization Collaboration. Color: Edward Tufte. IMAGE REMOVED. Color: Edward Tufte. IMAGE REMOVED. Color (Java L&F). Six color semantic scheme Clean, consistent look Easy on eyes (mostly gray).

goldy
Download Presentation

30 October 2008

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Information Design Scott Klemmer 30 October 2008

  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)

  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 Ligatures Upper and lower case numbers http://www.adobe.com/type/topics/info5.html

  10. Proper Quotes • Distinguishing open from close makes reading easier • Tags in HTML have open and close, e.g., <html> 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 &#8220; “ Left Double Quotation &#8221; ” Right Double Quotation&#8216; ‘ Left Single Quotation&#8217; ’ Right Single Quotation

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  25. Evaluation Execution Visualization user Visualization designer Visualization: A Double Gulf? Representation Conceptual model Data Visualization Manipulation

  26. Evaluation Visualization user Visualization designer Bad visualization? Representation x,y correlated? Data

  27. Evaluation Visualization user Visualization designer Better Visualization? Representation r = -.29 x,y correlated? Data

  28. Overlaid Route Sketched Route Route Maps • Find cognitive and perceptual principles • Optimize the visualization according to these principles Agrawala and Stolte, Rendering Effective Route Maps, SIGGRAPH 2001

  29. 2004 presidential election Matthew Ericson, NY Times

  30. 2004 presidential election Matthew Ericson, NY Times

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

  32. From Cartography, Dent

  33. From Cartography, Dent

  34. Phan et al. 2005

  35. Minard (1861)

  36. Dynamic Queries TimeSearcher: Hochheiser and Shneiderman 2001

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

More Related