information visualization: perception and principles
DESCRIPTION
TRANSCRIPT
27/02/14 pag. 1
Information visualization lecture 2
perception and principles
Katrien Verbert Department of Computer Science
Faculty of Science Vrije Universiteit Brussel
27/02/14 pag. 2
perception
how our brain perceives and interprets visuals
27/02/14 pag. 5
Moving Illusions
h"p://www.youtube.com/watch?v=Iw8idyw_N6Q Watch 00:00 – 07:23
27/02/14 pag. 6
pre-attentive processing
How do we make things pop-out?
27/02/14 pag. 7
Where is Waldo?
27/02/14 pag. 8
How many 3’s?
1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686
27/02/14 pag. 9
How many 3’s?
1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686
27/02/14 pag. 10
Pre-attentive vs. attentive
Pre-attentive
≤500 ms ≤10 ms
parallel processing
Attentive
>500 ms >10 ms
sequential processing
Differences in speed of perception
task individual object
Slide adapted from Michael Porath
27/02/14 pag. 11
Pre-attentive processing
“An understanding of what is processed pre-attentively is probably the most important contribution that visual science can
make to data visualization” (Ware, 2004, p. 19)
27/02/14 pag. 12
Shape
Different shapes can often pop out
27/02/14 pag. 13
Enclosure
A single lack of enclosure can quickly be identified pre-attentively
27/02/14 pag. 14
The ‘odd one out’ can quickly be idenJfied, by pre-‐a"enJve processing Orientation
Pre-attentive processing: ‘things that pop out’
27/02/14 pag. 15
Colour
A different colour can be pre-attentively identified
27/02/14 pag. 16
Did you notice the red square?
27/02/14 pag. 17
With conjunction encoding the red square is not pre-attentively identified
27/02/14 pag. 18 RepresentaJon of a"ributes associated with a mobile telephone network cell [Irani and Eskicioglu, 2003]
Usageload
Forcedterminationrate
Numberof users
Call signal strength
New call blockagerate
Predominantfrequency
Directionof growth
But multiple pop-outs are possible
27/02/14 pag. 19
RepresentaJon of a"ributes associated with a network of mobile telephone cells, averaged over one hour
Multiple pop-outs
27/02/14 pag. 20
27/02/14 pag. 21
Pre-attentive features
27/02/14 pag. 22
Where is Waldo?
Slide adapted from Michael Porath
27/02/14 pag. 23
Where is Waldo?
Slide adapted from Michael Porath
27/02/14 pag. 24
encoding methods
27/02/14 pag. 25
Magnitude estimation
How much bigger is the lower bar?
Slide adapted from Michael Porath
27/02/14 pag. 26
Magnitude estimation
How much bigger is the lower bar?
X 4
Slide adapted from Michael Porath
27/02/14 pag. 27
Magnitude estimation
How much bigger is the right circle?
Slide adapted from Michael Porath
27/02/14 pag. 28
Magnitude estimation
How much bigger is the right circle?
X 5
Slide adapted from Michael Porath
27/02/14 pag. 29
Magnitude estimation
How much bigger is the right circle?
Slide adapted from Michael Porath
27/02/14 pag. 30
Magnitude estimation
How much bigger is the right circle? X 9
Slide adapted from Michael Porath
27/02/14 pag. 31
Apparent magnitude curves
h"p://makingmaps.net/2007/08/28/perceptual-‐scaling-‐of-‐map-‐symbols/ Slide adapted from Michael Porath
27/02/14 pag. 32
Which one is more accurate?
Slide adapted from Michael Porath
27/02/14 pag. 33
Perceptual or apparent scaling
Compensating magnitude to match perception
Slide adapted from Michael Porath
27/02/14 pag. 34
Cleveland and McGill (1984)
Length
Position
AngleSlope
Area
Volume
ColourDensity
Most accurate
Least accurate
Accuracy of judgement of encoded quantitative data
The marks are perceived as PROPORTIONAL to each other
Association Selection Order Quantity
Size
Value
Texture
Colour
Orientation
Shape
The marks canbe perceived as SIMILAR
The marks are perceived as DIFFERENT,forming families
The marks are perceived as ORDERED
Choice of encoding • Bertin’s guidance • suitability of various
encoding methods • to support common
tasks
27/02/14 pag. 36
First the user specifies three topics of interest
User queryOsteoporosisPreventionResearch
Example application that uses different encoding methods
27/02/14 pag. 37
(top) The TileBar representaJon of the relevance of paragraphs to the topic words: (bo"om) a selected paragraph with topic words highlighted
‘Recent advances in the world of drugs’
Fortunately, scientific knowledge about this desease has grown, and there is reason for hope.
for older women and through adequate calcium intake and regular weight-bearing exercise for people of all ages. New approaches to diagnosis and treatment are also under active investigation. For this work to continue and for use to take advantage of the knowledge we have already gained, public awareness of osteoporosis and of the importance of further scientific research is essential.
Research is revealing that prevention may be achieved through estrogen replacement therapy
TileBar: which encoding methods are used for which purposes?
27/02/14 pag. 38 Guidance for the encoding of quanJtaJve, ordinal and categorical data (Mackinlay 1986)
Quantitative
PositionLengthAngleSlopeAreaVolumeDensityShape
Ordinal
PositionDensityColour saturation
TextureConnectionContainmentLengthAngleSlopeAreaVolume
Colour hue
Categorical
PositionColour hueTextureConnectionContainmentDensityColour saturationShapeLengthAngleSlopeAreaVolume
Treble
Bass
Quantitative, ordinal and categorical data
27/02/14 pag. 39
Gestalt grouping
27/02/14 pag. 40 h"p://www.youtube.com/watch?v=ZWucNQawpWY
27/02/14 pag. 41
Principles: figure and ground
Slide adapted from Michael Porath
27/02/14 pag. 42
Principles: proximity
Slide adapted from Michael Porath
27/02/14 pag. 43
Principles: proximity
Slide adapted from Michael Porath
27/02/14 pag. 44
Principles: similarity
Slide adapted from Michael Porath
27/02/14 pag. 45
Principles: connectedness
Slide adapted from Michael Porath
27/02/14 pag. 46
Principles: continuity
Slide adapted from Michael Porath
27/02/14 pag. 47
Principles: continuity
Slide adapted from Michael Porath
27/02/14 pag. 48
Principles: continuity
Slide adapted from Michael Porath
27/02/14 pag. 49
Principles: closure
Slide adapted from Michael Porath
27/02/14 pag. 50
Principles: closure
Slide adapted from Michael Porath
27/02/14 pag. 51
Principles: closure
Slide adapted from Michael Porath
27/02/14 pag. 52
Principles: closure
Slide adapted from Michael Porath
27/02/14 pag. 53
Principles: smallness
Slide adapted from Michael Porath
27/02/14 pag. 54
Principles: smallness
Slide adapted from Michael Porath
27/02/14 pag. 55
Principles: surroundedness
Slide adapted from Michael Porath
27/02/14 pag. 56
Principles: surroundness
Slide adapted from Michael Porath
27/02/14 pag. 57
Guideline
Use a combination of closure, common region and layout to ensure that data entities are represented by graphical patterns that will be perceived as figure, not ground.
27/02/14 pag. 58
Application
h"p://www.youtube.com/watch?v=LlzuJqZ797U (watch 3:39-‐5:09)
27/02/14 pag. 59
Color
27/02/14 pag. 60
Find the cherries
“Color helps us break camouflage”
[Ware, 2013]
Slide adapted from S. Hsiao
27/02/14 pag. 61
Snow white may be color blind?
Slide adapted from S. Hsiao
27/02/14 pag. 62
Ready to eat
Slide adapted from S. Hsiao
27/02/14 pag. 63
How we see color
h"p://www.youtube.com/watch?v=l8_fZPHasdo
27/02/14 pag. 64
Our eyes
27/02/14 pag. 65
Trichromacy Theory: 3 color cones sensitivity functions
Slide adapted from S. Hsiao
27/02/14 pag. 66
10% CAUCASIAN MALE IS COLOR BLIND!
Slide adapted from S. Hsiao
27/02/14 pag. 67
Color Tests
• The individual with normal color vision will see a 5 revealed in
the dot pattern. • An individual with Red/Green (the most common) color
blindness will see a 2 revealed in the dots. http://www.visibone.com/colorblind/
Information Visualization Course, Katy Börner, Indiana University
27/02/14 pag. 68
Color blindness
27/02/14 pag. 69
We often take color for granted
• How do blind people learn colours? • How do colourblind people drive?
Slide adapted from S. Hsiao
27/02/14 pag. 70
Color blindness: consequences
27/02/14 pag. 71
Colors have meaning!
27/02/14 pag. 72
27/02/14 pag. 73
How to use colors
• hue: categorical
• saturation: ordinal and quantitative
• luminance: ordinal and quantitative
27/02/14 pag. 74
Sequential color schemes
27/02/14 pag. 75
Diverging color schemes
27/02/14 pag. 76
Qualitative color schemes
27/02/14 pag. 77
ColorBrewer2.org
27/02/14 pag. 78
Adobe Kuler: Focus on aesthetics
Good Color Scales h"p://kuler.adobe.com
27/02/14 pag. 79
Good or bad use of colors?
27/02/14 pag. 80
h"p://eagereyes.org/basics/rainbow-‐color-‐map
27/02/14 pag. 81
Interaction of color
27/02/14 pag. 82
Interaction of color
27/02/14 pag. 83
Relative differences
27/02/14 pag. 84
Interaction of color
27/02/14 pag. 85
Simultaneous contrast
27/02/14 pag. 86
Simultaneous contrast
27/02/14 pag. 87
Simultaneous contrast
27/02/14 pag. 88
Simultaneous contrast
27/02/14 pag. 89
Simultaneous brightness contrast
[Ware, 1988]
27/02/14 pag. 90
The Chevreul illusion
27/02/14 pag. 91
Simultaneous contrast and errors in reading maps
Gravity map of the North AtlanJc Ocean. Large errors occur when gray-‐scale maps are read using a key
20% error of the enJre scale [Ware, 1988]
27/02/14 pag. 92
Guideline
Avoid using gray scales as a method for representing more than
a few (two to four) numerical values [Ware, 2013]
27/02/14 pag. 93
All colors are equal
…but they are not perceived as the same
27/02/14 pag. 94
All colors are equal
…but they are not perceived as the same
Luminance Value
Perceived lightness
27/02/14 pag. 95
Luminance values
Src: h>p://www.workwithcolor.com/color-‐luminance-‐2233.htm
27/02/14 pag. 96
Color decisions need to consider luminance / contrast
Slide adapted from S. Hsiao
27/02/14 pag. 97
Test a composition for contrast
h"p://www.workwithcolor.com/to-‐black-‐and-‐white-‐picture-‐converter-‐01.htm
27/02/14 pag. 98
HSL color picker
h"p://www.workwithcolor.com/hsl-‐color-‐picker-‐01.htm
27/02/14 pag. 99
Haloing effect
• Enhancing the edges • Luminance contrast as a
highlighting method
[Ware, 2013]
Slide adapted from S. Hsiao
27/02/14 pag. 100 Slide adapted from S. Hsiao
Saturation
27/02/14 pag. 101
Highlighting: make small subset clearly distinct from the rest
same principles apply to the highlighting of text or other features
Slide adapted from S. Hsiao
27/02/14 pag. 102
Guidelines
• Use more saturated colors for small symbols, thin lines, or small areas.
• Use less saturated colors for large areas.
27/02/14 pag. 103
Cross-cultural naming
More than 100 languages showed that primary color terms are consistent across cultures (Berlin & Kay, 1969)
Slide adapted from S. Hsiao
27/02/14 pag. 104
Ware’s Recommended Colors for Labeling
Slide adapted from Terrance Brooke
Red, Green, Yellow, Blue, Black, White, Pink, Cyan, Gray, Orange, Brown, Purple. The entire set corresponds to the eleven color names found to be the most common in a cross-cultural study, plus cyan (Berlin and Kay)
27/02/14 pag. 105
Guideline
Use easy-to-remember and consistent color codes in color pallets Red, green, blue and yellow are hard-wired into the brain as primaries. If it is necessary to remember a color coding, these colors are the first that should be considered.
27/02/14 pag. 106
Chromostereopsis
Slide adapted from S. Hsiao
27/02/14 pag. 107
How we used to think it works
Old model: Light of different wavelengths is focused differently by the eye.
Src: h>p://luminanze.com/wriMngs/chromostereopsis_in_ux_design.html
27/02/14 pag. 108
What we know
Current model: Light of different wavelengths is refracted differently by the eye.
Src: h>p://luminanze.com/wriMngs/chromostereopsis_in_ux_design.html
27/02/14 pag. 109
chromostereopsis
If we use in the same image two far pure colors the eye is not able to focus both of them
27/02/14 pag. 110
Easy to read?
27/02/14 pag. 111
Easy to read?
27/02/14 pag. 112
How to use chromostereopsis
27/02/14 pag. 113
How to use chromostereopsis
27/02/14 pag. 114
Good or bad?
27/02/14 pag. 115
Good or bad?
27/02/14 pag. 116
Solution: use colors that are less saturated
27/02/14 pag. 117
Guidelines
• Beware of interactions between some colors (e.g. red/blue) • Use can be good: for highlighting, creating 3D effect, etc. • Resolve if unintended by:
– using colors that are less saturated – surrounding the contrasMng colors with a background that moderates the
effect of their different wavelengths – separa.ng the contrasMng colors.
h>p://desdag.blogspot.be/2012/05/chromostereopsis-‐design-‐fails-‐due-‐to.html
27/02/14 pag. 118
We are drawn by colors!
27/02/14 pag. 119
Do different colors affect mood?
h"p://www.factmonster.com/spot/colors1.html
27/02/14 pag. 120
Moodjam.com
27/02/14 pag. 121
some examples
27/02/14 pag. 122
Good or bad us of colors?
27/02/14 pag. 123
Good or bad use of colors?
27/02/14 pag. 124
Good or bad?
27/02/14 pag. 125
Good or bad?
27/02/14 pag. 126
27/02/14 pag. 127
Good or bad use of colors?
27/02/14 pag. 128
27/02/14 pag. 129
27/02/14 pag. 130
Some take away messages
• Color is excellent for labeling and categorization. (However, only small number of colors can be used effectively)
• To show detail in visualization, always have considerable luminance contrast between background and foreground.
• Simultaneous contrast with background colors can dramatically alter color appearance, making color look like another.
• Beware of interaction between colors (e.g. red/blue). • Small color coded objects should be given high saturation. • Red, green, blue and yellow are hard-wired into the brain as
primaries. If it is necessary to remember a color coding, these colors are the first that should be considered.
• Remember that colors have meanings: use appropriate color palettes for qualitative, quantitative and ordinal data.
• Respect the color blind.
27/02/14 pag. 131
Readings
Required • Harrower, M., & Brewer, C. A. (2003). ColorBrewer. org: an online
tool for selecting colour schemes for maps. Cartographic Journal, The, 40(1), 27-37. Available at: http://www.albany.edu/faculty/fboscoe/papers/harrower2003.pdf
Optional • Ware, C. (2013). Information visualization: Perception for design.
Chapter 3: Lightness, Brightness, Contrast, and Constancy. Available at:http://www.diliaranasirova.com/assets/PSYC579/pdfs/01.1-Ware.pdf
27/02/14 pag. 132
Optical Illusions
• Joy of Visual Perception by Pete Kaiser
Information Visualization Course, Katy Börner, Indiana University
132
27/02/14 pag. 133
Questions?
27/02/14 pag. 134
References
• Pourang Irani and Rasit Eskicioglu. (2003). A Space-filling Visualization Technique for Cellular Network Data. In International Conference on Knowledge Management (IKNOW-03), 115-120http://hci.cs.umanitoba.ca/assets/publication_files/2003-Irani-IKNOW-CellularViz.pdf
• Ware, C. (2013). Information visualization: Perception for design. Chapter 3-5
• Mackinlay, J. (1986). Automating the design of graphical
presentations of relational information. ACM Transactions on Graphics (TOG), 5(2), 110-141.
27/02/14 pag. 135
evaluation experiment
27/02/14 pag. 136
learning dashboards: visualizing emotion, time spent
and distractions
27/02/14 pag. 137
Learning analytics dashboards
Govaerts, S., Verbert, K., Duval, E., Abelardo, P. (2012). The student acJvity meter for awareness and self-‐reflecJon. In : CHI EA '12
27/02/14 pag. 138
h"p://bit.ly/I7hve
138 Santos JL, Verbert K, Govaerts S, Duval E (2013) Addressing learner issues with StepUp!: an Evaluation. In Proceedings of LAK’13
27/02/14 pag. 139
GLASS: visualization of emotions
27/02/14 pag. 140
Data collection
• https://docs.google.com/forms/d/1gHwVWHZLzWdSz1F37jA1Gungrl56bT215M6FYW3YqGY/viewform Or
• bit.ly/N6JTyD
Anonymous! Choose your own ID.
• Report data once a week: preferably on Thursdays.
27/02/14 pag. 141
Dashboard
• Dashboard that visualizes your data and enables comparison with data from other students will be made available.
• Login with the same ID as the one you use for data collection.
• Will be made available one of the following weeks.
27/02/14 pag. 142
participation much appreciated!