Embed Size (px)
Citation preview
stanford hci group / cs147
http://cs147.stanford.edu25 September 2007
Information Design
Scott Klemmertas: Marcello Bastea-Forte, Joel Brandt,Neil Patel, Leslie Wu, Mike Cammarano
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)
How to get color right
Design in grayscale first Keep luminance values from
grayscale when moving to color
Proportion and Scale
Kevin Mullet and Darrell Sano, Designing Visual Interfaces
“Pridefully Obvious Presentation”
Marks of Typographic Style
http://www.adobe.com/type/topics/info5.html
Ligatures
Upper and lower case numbers
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
“ “ Left Double Quotation ” ” Right Double Quotation‘ ‘ Left Single Quotation’ ’ Right Single Quotation
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
14
Challenger Disaster
1 of 13 pages of material faxed to NASA by Morton Thiokol
15
Challenger Disaster
1 of 13 pages of material faxed to NASA by Morton Thiokol
16
Challenger Disaster
E. Tufte, pp. 46-47 , Visual Explanations
17
Challenger Disaster
Redrawn by E. Tufte, p. 49 , Visual Explanations
18
Functions of visualizationsCommunicate information to others
Make a pointTell a story
Make decisions Support analysis and reasoning
Answer a question“One image = One diagnosis”
To explore and discover; encourage creativityLook at things in a new way“The purpose of computing is insight, not numbers” [R. Hamming]
Inspire
19
The Purpose of Data Visualization is to Help People Think and Communicate
20
Gulfs of Execution & Evaluation
Real world(Interactions)
Conceptual model(Goals)
Evaluation
Execution
Gulfs
Norman 1986
21
Gulf of EvaluationReal world:
Conceptual model:x,y correlated?
Evaluation
Gulf
X Y0.67 0.790.32 0.630.39 0.720.27 0.850.71 0.430.63 0.090.03 0.030.20 0.540.51 0.380.11 0.330.46 0.46
22
Gulf of EvaluationReal world:
Conceptual model:x,y correlated?
Evaluation
Gulf
0
0.5
1
0 0.5 1
X
Y
23
Gulf of EvaluationReal world:
Conceptual model:x,y correlated?
Evaluation
Gulf
= -.29
24
Gulf of ExecutionReal world
Conceptual model:Draw a rectangle
Execution
Gulf
Move 90 30Rotate 35Pen down…
25
Gulf of ExecutionReal world
Execution
Gulf
Conceptual model:Draw a rectangle
26
DataConceptualmodel
Evaluation
Execution
Visualization
Representation
Manipulation
Visualization userVisualization designer
Visualization: A Double Gulf?
27
Data
Evaluation Representation
X Y0.67 0.790.32 0.630.39 0.720.27 0.850.71 0.430.63 0.090.03 0.030.20 0.540.51 0.380.11 0.330.46 0.46
X Y0.67 0.790.32 0.630.39 0.720.27 0.850.71 0.430.63 0.090.03 0.030.20 0.540.51 0.380.11 0.330.46 0.46
x,ycorrelated?
Visualization userVisualization designer
Bad visualization?
28
Data
Evaluation Representation
X Y0.67 0.790.32 0.630.39 0.720.27 0.850.71 0.430.63 0.090.03 0.030.20 0.540.51 0.380.11 0.330.46 0.46
0
0.5
1
0 0.5 1
X
Y
= -.29x,ycorrelated?
Visualization userVisualization designer
Better Visualization?
29
Route Maps
Overlaid Route Sketched Route
Agrawala and Stolte, Rendering Effective Route Maps, SIGGRAPH 2001
1. Find cognitive and perceptual principles
2. Optimize the visualization according to these
principles
30Matthew Ericson, NY Times
2004 presidential election
31Matthew Ericson, NY Times
2004 presidential election
32
2004 presidential election
http://www-personal.umich.edu/~mejn/election/
33From Cartography, Dent
34From Cartography, Dent
35
36Phan et al. 2005
37Minard (1861)
38
Dynamic Queries
TimeSearcher: Hochheiser and Shneiderman 2001
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 sessionThurs, 11/1, 5–6pm, Sweet Hall 2nd floor
