perception and - tu wienieg.ifs.tuwien.ac.at/~aigner/presentations/20091105_perception... ·...
TRANSCRIPT
WOLFGANG AiGNER perception and visualization 1
perception andvisualization
Wolfgang [email protected]
http://ieg.ifs.tuwien.ac.at/~aigner/
[email protected]://ike.donau-uni.ac.at/~aigner/
Version 1.05.11.2009
WOLFGANG AiGNER perception and visualization 2
Part Aperception
WOLFGANG AiGNER perception and visualization 3London 1854
WOLFGANG AiGNER perception and visualization 4
Analytical ReasoningProcess
[Thomas & Cook, 2005]
WOLFGANG AiGNER perception and visualization 5
Visual Perception
[Goldstein, 2005]
Light reflected from map
Dr. Snow’s eye
Pattern of light and darkis formed on Dr. Snow’s retina
WOLFGANG AiGNER perception and visualization 6
Human Eye
[Goldstein, 2005]
WOLFGANG AiGNER perception and visualization 7
Brain Pixel
[Ware, 2008]
WOLFGANG AiGNER perception and visualization 8
Visual Perception
Optic Nerve
Primary Visual Cortex
WOLFGANG AiGNER perception and visualization 9
Immediate perceptionImmediate understanding - no learning necessary
Behaviour can‘t be forgottenOptical illusions are seen even when knowing that they are illusions
Sensual immediacyCertain phenomena are perceived very quickly because they are notlearned but „hardwired“ in the brain
Studied by brain research
Effective and stable
Mostly innate and cultural invariant
Phenomena of immediate perception (e.g., color and pattern perception)can be generalized to mankind
But also learned differentiations of the brain: most perceptual processes arebased on a combination of innate and learned mechanisms
WOLFGANG AiGNER perception and visualization 10
Optical illusions
WOLFGANG AiGNER perception and visualization 11
Müller-Lyer Illusion
WOLFGANG AiGNER perception and visualization 12
Conventional representations
Hard to learne.g., script
Easy to forgetBut there are visual representations that can‘t be
forgotten easily (e.g., numbers)
Embedded within cultural context
Powerful form of representatione.g., mathematical symbols
Easy to change
Studied by e.g., psychology, sociology, HCI
WOLFGANG AiGNER perception and visualization 13
Preattentive Processing
WOLFGANG AiGNER perception and visualization 14
Preattentive Processing
1561321203658413076510374627417312752732759273299070974217037077741795279317492709734019743217909370945179279417
1561321203658413076510374627417312752732759273299070974217037077741795279317492709734019743217909370945179279417
WOLFGANG AiGNER perception and visualization 15
Color
Hue
[Dürsteler, 2006]
Intensity
WOLFGANG AiGNER perception and visualization 16
Form
[Few, 2004]
WOLFGANG AiGNER perception and visualization 17
Movement
(Direction of) motion Flicker
[Dürsteler, 2006]
WOLFGANG AiGNER perception and visualization 18
Gestalt Laws
WOLFGANG AiGNER perception and visualization 19
Proximity
[Winkler, 2005]
WOLFGANG AiGNER perception and visualization 20
Similarity
[Winkler, 2005]
WOLFGANG AiGNER perception and visualization 21
Prägnanz
[Goldstein, 2005]
WOLFGANG AiGNER perception and visualization 22
Good Continuation
[Winkler, 2005]
WOLFGANG AiGNER perception and visualization 23
Common Fate
[Pedroza, 2005]
WOLFGANG AiGNER perception and visualization 24
Familiarity
[Schmidt, 2005]
WOLFGANG AiGNER perception and visualization 25
Symmetry
[Ware, 2004]
WOLFGANG AiGNER perception and visualization 26
Enclosure
WOLFGANG AiGNER perception and visualization 27
Connection
[Ware, 2004]
WOLFGANG AiGNER perception and visualization 28
Closure
WOLFGANG AiGNER perception and visualization 29
Change Blindness
WOLFGANG AiGNER perception and visualization 30
Inattentional Blindness
WOLFGANG AiGNER perception and visualization 31
Cognition
WOLFGANG AiGNER perception and visualization 32
Analytical Reasoning Process
[Thomas & Cook, 2005]
WOLFGANG AiGNER perception and visualization 33
Resources[Thomas and Cook, 2005] J.J. Thomas and K.A. Cook, eds., Illuminating the Path: The Researchand Development Agenda for Visual Analytics, IEEE CS Press, 2005;http://nvac.pnl.gov/agenda.stm.
[Card et al., 1999] Card, S. and Mackinlay, J. and Shneiderman, B., Readings in InformationVisualization: Using Vision to Think, Morgan Kaufmann Publishers, 1999.
[Healey, 2009] Christopher G. Healey, Perception in Visualization, Retrieved at: November 2,2009. http://www.csc.ncsu.edu/faculty/healey/PP/index.html
[Dürsteler, 2005] Juan C. Dürsteler, Processes that pop out, Inf@Vis! (The digital magazine ofInfoVis.net), Created at: Feb. 12, 2006, Retrieved at: Feb. 16, 2006,http://www.infovis.net/printMag.php?num=179&lang=2
[Few, 2004] Stephen Few, Data Presentation: Tapping the Power of Visual Perception,intelligent enterprise, September 2004.http://www.intelligententerprise.com/showArticle.jhtml?articleID=31400009
[Bertin, 1981] Bertin, J. Graphics and Graphic Information Processing. Walter De Gruyter, Inc.,Berlin, 1981.
[Ware, 2008] Ware, C. Visual Thinking for Design, Morgan Kaufmann, Burlington, MA, 2008.
[Ware, 2004] Ware, C., Information Visualization: Perception for Design, Second Edition, MorganKaufmann, San Francisco, 2004.
[Goldstein, 2005] Goldstein, Bruce. Cognitive Psychology, Thomson Wadsworth, 2005.
WOLFGANG AiGNER perception and visualization 34
Part Bvisualization
WOLFGANG AiGNER perception and visualization 35
Goal
WOLFGANG AiGNER perception and visualization 36
Why visualization?
[Few, 2006]
WOLFGANG AiGNER perception and visualization 37
Why visualization?
[Card et al., 1999]
Increasing cognitive resourcessuch as by using a visual resource to expand human working memory
Reducing searchsuch as by representing a large amount of data in a small space
Enhancing the recognition of patternssuch as when information is organized in space by its time relationships
Supporting the easy perceptual inference of relationshipsthat are otherwise more difficult to induce
Perceptual monitoring of a large number of potential events
Providing a manipulable mediumthat, unlike static diagrams, enables the exploration of a space ofparameter values
WOLFGANG AiGNER perception and visualization 38
Method
WOLFGANG AiGNER perception and visualization 39
Data
[garysaid.com]
year
length
popularity
subject
award?
WOLFGANG AiGNER perception and visualization 40
Visual Mapping
[Spotfire]
WOLFGANG AiGNER perception and visualization 41
Raw data
WOLFGANG AiGNER perception and visualization 42
Visual Mapping
WOLFGANG AiGNER perception and visualization 43
Interactivity / Dynamic Queries
WOLFGANG AiGNER perception and visualization 44
Visual Variables
[Mackinlay, 1987][Cleveland & McGill, 1984]
WOLFGANG AiGNER perception and visualization 45
Graphical Excellence
WOLFGANG AiGNER perception and visualization 46
Tell the truth about thedata
[Tufte, 1983]
WOLFGANG AiGNER perception and visualization 47
Fuel Economy StandardRedesign
WOLFGANG AiGNER perception and visualization 48
Lie Factor
WOLFGANG AiGNER perception and visualization 49
Beer Sales Redesign
WOLFGANG AiGNER perception and visualization 50
Avoid Chartjunk
[Jansen & Scharfe, 1999]
WOLFGANG AiGNER perception and visualization 51
Tufte Design Principles
1. Above all else show the data.
2. Maximize the data-ink ratio.
3. Erase non-data-ink.
4. Erase redundant data-ink.
5. Revise and edit.
[Tufte, 1983]
WOLFGANG AiGNER perception and visualization 52
Example
[Seed, 2006] Edit Staff, State of the Planet - Bigger, Faster, Stronger, More, Seed - seedmagazine.com,
Created at: April 20, 2006, Retrieved at: June 21, 2006. http://www.seedmagazine.com/news/2006/04/state_of_the_planet.php
WOLFGANG AiGNER perception and visualization 53
Redesign
[Weber et al., 2006] Sonja Weber, Christof Kopfer, Matteo Savio, Nicole Brosch, Category 4-5 Hurricances,
Created at: November 14, 2006, Retrieved at: November 3, 2009. http://www.infovis-wiki.net/index.php?title=Image:Verbessert3.jpg
WOLFGANG AiGNER perception and visualization 54
Using Color
WOLFGANG AiGNER perception and visualization 55
Color Context
Rule #1: If you want different objects of the same color in a table or graphto look the same, make sure that the background--the color thatsurrounds them--is consistent.
Rule #2: If you want objects in a table or graph to be easily seen, use abackground color that contrasts sufficiently with the object.
[Few, 2008]
WOLFGANG AiGNER perception and visualization 56
Color UsageRule #3: Use color only when needed to serve a particular communicationgoal.
Rule #4: Use different colors only when they correspond to differences ofmeaning in the data.
To highlight particular dataTo group itemsTo encode quantitative values
[Few, 2008]
WOLFGANG AiGNER perception and visualization 57
Color UsageRule #5: Use soft, natural colors to display most information and brightand/or dark colors to highlight information that requires greater attention.
[Few, 2008]
WOLFGANG AiGNER perception and visualization 58
Palette TypesCategorical
Sequential
Diverging
Rule #6: When using color to encode a sequential range of quantitative values,stick with a single hue (or a small set of closely related hues) and vary intensityfrom pale colors for low values to increasingly darker and brighter colors for highvalues.
[Few, 2008]
WOLFGANG AiGNER perception and visualization 59
Example
WOLFGANG AiGNER perception and visualization 70
De-emphasize non-data componentsRule #7: Non-data components of tables and graphs should be displayed justvisibly enough to perform their role, but no more so, for excessive salience couldcause them to distract attention from the data.
[Few, 2008]
WOLFGANG AiGNER perception and visualization 71
Avoid Red-Green
Rule #8: To guarantee that most people who are colorblind candistinguish groups of data that are color coded, avoid using a combinationof red and green in the same display.
[Few, 2008]
WOLFGANG AiGNER perception and visualization 72
Avoid visual effects
Rule #9: Avoid using visual effectsin graphs.
[Few, 2008]
WOLFGANG AiGNER perception and visualization 73
InfoVis Reference Model
[Card et al., 1999]
WOLFGANG AiGNER perception and visualization 74
Visualization Design Process
Analyze problem
Design solutions
Evaluate solutions
WOLFGANG AiGNER perception and visualization 76
Resources[Card et al., 1999] Card, S. and Mackinlay, J. and Shneiderman, B., Readings in Information Visualization: UsingVision to Think, Morgan Kaufmann Publishers, 1999.
[Fekete et al., 2008] Fekete. J.. Wijk, J. J., Stasko. J. T.. and North, C. 2008. The Value of InformationVisualization. in Information Visualization: Human-Centered Issues and Perspectives, A. Kerren. J. T. Stasko, JFekete. and C. North. Eds. Lecture Notes In Computer Science, vol. 4950. Springer-Verlag. Berlin, Heidelberg,1-18.
[Few, 2009] Stephen Few, Now You See It: Simple Visualization Techniques for Quantitative Analysis,Analytics Press, 2009.
[Few, 2004] Stephen Few, Show Me the Numbers: Designing Tables and Graphs to Enlighten, Analytics Press,2004.
[Few, 2008] Stephen Few, Practical Rules for Using Colors in Charts, Visual Business Intelligence Newsletter,February 2008.
[North, 2007] Chris North, Information Visualization Lecture Notes, Virginia Tech,http://people.cs.vt.edu/~north/
[Shneiderman, 1996] Ben Shneiderman, The Eyes Have It: A Task by Data Type Taxonomy for InformationVisualizations. In Proceedings of the IEEE Symposium on Visual Languages, pages 336-343, Washington. IEEEComputer Society Press, 1996.
[Thomas and Cook, 2005] J.J. Thomas and K.A. Cook, eds., Illuminating the Path: The Research andDevelopment Agenda for Visual Analytics, IEEE CS Press, 2005; http://nvac.pnl.gov/agenda.stm.
[Tufte, 1983] Edward R. Tufte, The Visual Display of Quantitative Information. 2nd Edition, Graphics Press,Cheshire, Connecticut, 1983.
[Tufte, 1990] Edward R. Tufte, Envisioning Information, Graphics Press, Cheshire, CT 1990.
WOLFGANG AiGNER perception and visualization 77
Acknowledgements
Thanks to Monika Lanzenberger, Margit Pohl and Markus Resterwhose slides form the basis of this presentation.