Information Design Scott Klemmer Overview Perception and Information Visualization Collaboration Color Edward Tufte IMAGE REMOVED Color Edward Tufte IMAGE REMOVED Color Java LampF Six color semantic scheme ID: 300963
Download Presentation The PPT/PDF document "30 October 2008" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
![[Received May 12, 2008; Accepted October 08, 2008]](https://thumbs.docslides.com/200929/received-may-12-2008-accepted-october-08-2008.jpg)
Slide1
30 October 2008
Information Design
Scott KlemmerSlide2
OverviewPerception and InformationVisualizationCollaborationSlide3
Color: Edward Tufte
IMAGE REMOVEDSlide4
Color: Edward Tufte
IMAGE REMOVEDSlide5
Color (Java L&F)
Six color semantic scheme
Clean, consistent lookEasy on eyes (mostly gray)Slide6Slide7
How to get color rightDesign in grayscale firstKeep luminance values from grayscale when moving to colorSlide8
Proportion and Scale
Kevin Mullet and Darrell Sano, Designing Visual InterfacesSlide9
“Pridefully Obvious Presentation”Slide10
Marks of Typographic Style
http://www.adobe.com/type/topics/info5.html
Ligatures
Upper and lower case numbersSlide11
Proper QuotesDistinguishing 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 Slide12Slide13
Some Starting Points Gather materials you find successfulCould be from a very different domain
“Good artists borrow, great artists steal” - PicassoInclude visual design professionals in the iterative design cycleSlide14
14Slide15
15Challenger Disaster
1 of 13 pages of material faxed to NASA by Morton ThiokolSlide16
16Challenger Disaster
1 of 13 pages of material faxed to NASA by Morton ThiokolSlide17
17Challenger Disaster
E. Tufte, pp. 46-47 , Visual ExplanationsSlide18
18Challenger Disaster
Redrawn by E. Tufte, p. 49 , Visual ExplanationsSlide19
19Functions of visualizations
Communicate information to others Make a point
Tell a storyMake decisions Support analysis and reasoningAnswer 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]
InspireSlide20
20
The Purpose of Data Visualization is to Help People Think and CommunicateSlide21
Basics of info. viz.Overview firstZoom and filterDetails on command
(Shneiderman)Slide22
22
Gulfs of Execution & Evaluation
Real world(Interactions)Conceptual model(Goals)
Evaluation
Execution
Gulfs
Norman 1986Slide23
23
Gulf of Evaluation
Real world:Conceptual model:x,y correlated?
Evaluation
GulfSlide24
24
Gulf of Evaluation
Real world:Conceptual model:x,y correlated?
Evaluation
GulfSlide25
25
Gulf of Evaluation
Real world:Conceptual model:x,y correlated?
Evaluation
Gulf
r
= -.29Slide26
26
Gulf of Execution
Real worldConceptual model:Draw a rectangle
Execution
Gulf
Move 90 30
Rotate 35
Pen down
…Slide27
27
Gulf of Execution
Real world
Execution
Gulf
Conceptual
model:
Draw a rectangleSlide28
28
Data
Conceptualmodel
Evaluation
Execution
Visualization
Representation
Manipulation
Visualization user
Visualization designer
Visualization: A Double Gulf?Slide29
29
Data
Evaluation
Representation
x,y
correlated?
Visualization user
Visualization designer
Bad visualization?Slide30
30
Data
Evaluation
Representation
r
= -.29
x,y
correlated?
Visualization user
Visualization designer
Better Visualization?Slide31
31Route Maps
Overlaid Route
Sketched Route
Agrawala and Stolte, Rendering Effective Route Maps, SIGGRAPH 2001
Find cognitive and perceptual principles
Optimize the visualization according to these principlesSlide32
32
Matthew Ericson, NY Times
2004 presidential electionSlide33
33
Matthew Ericson, NY Times
2004 presidential electionSlide34
34
2004 presidential election
http://www-personal.umich.edu/~mejn/election/Slide35
35
From Cartography, DentSlide36
36
From Cartography, DentSlide37
37Slide38
38
Phan et al. 2005Slide39
39
Minard (1861)Slide40
40Dynamic Queries
TimeSearcher: Hochheiser and Shneiderman 2001Slide41
The Future: CollaborationMany Eyes17 visualization typesAnyone can upload a data set
Anyone can create visualizationSlide42