Download presentation
Presentation is loading. Please wait.
Published byLeon Boone Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.