stanford hci group / cs147 http://cs147.stanford.ed u 30
October 2008 Information Design Scott Klemmer
Slide 2
Overview Perception and Information Visualization
Collaboration
Slide 3
Color: Edward Tufte IMAGE REMOVED
Slide 4
Color: Edward Tufte IMAGE REMOVED
Slide 5
Color (Java L&F) Six color semantic scheme Clean,
consistent look Easy on eyes (mostly gray)
Slide 6
Slide 7
How to get color right Design in grayscale first Keep luminance
values from grayscale when moving to color
Slide 8
Proportion and Scale Kevin Mullet and Darrell Sano, Designing
Visual Interfaces
Slide 9
Pridefully Obvious Presentation
Slide 10
Marks of Typographic Style
http://www.adobe.com/type/topics/info5. html Ligatures Upper and
lower case numbers
Slide 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
Slide 12
Slide 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
Slide 14
14
Slide 15
15 Challenger Disaster 1 of 13 pages of material faxed to NASA
by Morton Thiokol
Slide 16
16 Challenger Disaster 1 of 13 pages of material faxed to NASA
by Morton Thiokol
Slide 17
17 Challenger Disaster E. Tufte, pp. 46-47, Visual
Explanations
Slide 18
18 Challenger Disaster Redrawn by E. Tufte, p. 49, Visual
Explanations
Slide 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
Slide 20
20 The Purpose of Data Visualization is to Help People Think
and Communicate
Slide 21
Basics of info. viz. Overview first Zoom and filter Details on
command (Shneiderman)
Slide 22
22 Gulfs of Execution & Evaluation Real world
(Interactions) Conceptual model (Goals) Evaluation Execution Gulfs
Norman 1986
Slide 23
23 Gulf of Evaluation Real world: Conceptual model: x,y
correlated? Evaluation Gulf
Slide 24
24 Gulf of Evaluation Real world: Conceptual model: x,y
correlated? Evaluation Gulf
Slide 25
25 Gulf of Evaluation Real world: Conceptual model: x,y
correlated? Evaluation Gulf = -.29
Slide 26
26 Gulf of Execution Real world Conceptual model: Draw a
rectangle Execution Gulf Move 90 30 Rotate 35 Pen down
Slide 27
27 Gulf of Execution Real world Execution Gulf Conceptual
model: Draw a rectangle
Slide 28
28 DataConceptual model Evaluation Execution Visualization
Representation Manipulation Visualization userVisualization
designer Visualization: A Double Gulf?
Slide 29
29 Data Evaluation Representation x,y correlated? Visualization
userVisualization designer Bad visualization?
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
Slide 32
32 Matthew Ericson, NY Times 2004 presidential election
Slide 33
33 Matthew Ericson, NY Times 2004 presidential election
