1. Information visualization lecture 2
perception and principles
Katrien Verbert
Department of Computer Science
Faculty of Science
Vrije Universiteit Brussel
katrien.verbert@vub.ac.be
27/02/14
pag. 1

2. perception
how our brain perceives and interprets visuals
27/02/14
pag. 2

5. Moving Illusions
h"p://www.youtube.com/watch?v=Iw8idyw_N6Q
Watch
00:00
–
07:23
27/02/14
pag. 5

6. pre-attentive processing
How do we make things pop-out?
27/02/14
pag. 6

7. Where is Waldo?
27/02/14
pag. 7

8. How many 3’s?
1281768756138976546984506985604982826762
9809858458224509856458945098450980943585
9091030209905959595772564675050678904567
8845789809821677654876364908560912949686
27/02/14
pag. 8

9. How many 3’s?
1281768756138976546984506985604982826762
9809858458224509856458945098450980943585
9091030209905959595772564675050678904567
8845789809821677654876364908560912949686
27/02/14
pag. 9

10. Pre-attentive vs. attentive
Differences in speed of perception
Pre-attentive
≤500 ms
≤10 ms
parallel processing
Slide
adapted
from
Michael
Porath
Attentive
task
individual object
>500 ms
>10 ms
sequential processing
27/02/14
pag. 10

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. 11

12. Different shapes can often pop out
Shape
27/02/14
pag. 12

13. A single lack of enclosure can quickly be
identified pre-attentively
Enclosure
27/02/14
pag. 13

14. Pre-attentive processing:
‘things that pop out’
Orientation
The
‘odd
one
out’
can
quickly
be
idenJfied,
by
pre-­‐a"enJve
processing
27/02/14
pag. 14

15. A different colour can be
pre-attentively identified
Colour
27/02/14
pag. 15

16. Did you notice the red square?
27/02/14
pag. 16

17. With conjunction encoding the red square
is not pre-attentively identified
27/02/14
pag. 17

18. But multiple pop-outs are possible
Usage
load
Forced
termination
rate
Number
of users
Direction
of growth
Predominant
frequency
New call
blockage
rate
Call
signal
strength
RepresentaJon
of
a"ributes
associated
with
a
mobile
telephone
network
cell
[Irani
and
pag. 18
27/02/14
Eskicioglu,
2003]

19. Multiple pop-outs
RepresentaJon
of
a"ributes
associated
with
a
network
of
mobile
telephone
cells,
averaged
over
one
hour
27/02/14
pag. 19

20. 27/02/14
pag. 20

21. Pre-attentive features
27/02/14
pag. 21

22. Where is Waldo?
Slide
adapted
from
Michael
Porath
27/02/14
pag. 22

23. Where is Waldo?
Slide
adapted
from
Michael
Porath
27/02/14
pag. 23

24. encoding methods
27/02/14
pag. 24

25. Magnitude estimation
How much bigger is the lower bar?
Slide
adapted
from
Michael
Porath
27/02/14
pag. 25

26. Magnitude estimation
How much bigger is the lower bar?
X
4
Slide
adapted
from
Michael
Porath
27/02/14
pag. 26

27. Magnitude estimation
How much bigger is the right circle?
Slide
adapted
from
Michael
Porath
27/02/14
pag. 27

28. Magnitude estimation
How much bigger is the right circle?
X
5
Slide
adapted
from
Michael
Porath
27/02/14
pag. 28

29. Magnitude estimation
How much bigger is the right circle?
Slide
adapted
from
Michael
Porath
27/02/14
pag. 29

30. Magnitude estimation
How much bigger is the right circle?
X
9
Slide
adapted
from
Michael
Porath
27/02/14
pag. 30

31. Apparent magnitude curves
Slide
adapted
from
Michael
Porath
h"p://makingmaps.net/2007/08/28/
perceptual-­‐scaling-­‐of-­‐map-­‐symbols/
27/02/14
pag. 31

32. Which one is more accurate?
Slide
adapted
from
Michael
Porath
27/02/14
pag. 32

33. Perceptual or apparent scaling
Compensating magnitude to match perception
Slide
adapted
from
Michael
Porath
27/02/14
pag. 33

34. Accuracy of judgement of encoded
quantitative data
Position
Most accurate
Length
Angle
Slope
Area
Volume
Colour
Density
Least accurate
Cleveland
and
McGill
(1984)
27/02/14
pag. 34

35. Association
The marks can
be perceived as
SIMILAR
Size
Value
Texture
Colour
Orientation
Shape
Selection
Order
The marks are
perceived as
DIFFERENT,
forming families
The marks are
perceived as
ORDERED
Quantity
The marks are
perceived as
PROPORTIONAL
to each other
Choice
of
encoding
• Bertin’s guidance
• suitability of various
encoding methods
• to support common
tasks

36. Example application that uses
different encoding methods
User query
Osteoporosis
Prevention
Research
First
the
user
specifies
three
topics
of
interest
27/02/14
pag. 36

37. TileBar: which encoding methods
are used for which purposes?
‘Recent
advances
in
the
world
of
drugs’
Fortunately, scientific knowledge about this desease has grown, and there is reason for hope.
Research is revealing that prevention may be achieved through estrogen replacement therapy
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.
(top)
The
TileBar
representaJon
of
the
relevance
of
paragraphs
to
the
topic
words:
pag. 37
27/02/14
(bo"om)
a
selected
paragraph
with
topic
words
highlighted

38. Quantitative, ordinal and
categorical data
Quantitative
Position
Length
Angle
Slope
Area
Volume
Density
Shape
Treble
Ordinal
Categorical
Position
Density
Colour saturation
Colour hue
Texture
Connection
Containment
Length
Angle
Slope
Area
Volume
Position
Colour hue
Texture
Connection
Containment
Density
Colour saturation
Shape
Length
Angle
Slope
Area
Volume
Bass
Guidance
for
the
encoding
of
quanJtaJve,
ordinal
and
categorical
data
(Mackinlay
1986)
pag. 38
27/02/14

39. Gestalt grouping
27/02/14
pag. 39

40. h"p://www.youtube.com/watch?v=ZWucNQawpWY
27/02/14
pag. 40

41. Principles:
figure and ground
Slide
adapted
from
Michael
Porath
27/02/14
pag. 41

42. Principles:
proximity
Slide
adapted
from
Michael
Porath
27/02/14
pag. 42

43. Principles:
proximity
Slide
adapted
from
Michael
Porath
27/02/14
pag. 43

44. Principles:
similarity
Slide
adapted
from
Michael
Porath
27/02/14
pag. 44

45. Principles:
connectedness
Slide
adapted
from
Michael
Porath
27/02/14
pag. 45

46. Principles:
continuity
Slide
adapted
from
Michael
Porath
27/02/14
pag. 46

47. Principles:
continuity
Slide
adapted
from
Michael
Porath
27/02/14
pag. 47

48. Principles:
continuity
Slide
adapted
from
Michael
Porath
27/02/14
pag. 48

49. Principles:
closure
Slide
adapted
from
Michael
Porath
27/02/14
pag. 49

50. Principles:
closure
Slide
adapted
from
Michael
Porath
27/02/14
pag. 50

51. Principles:
closure
Slide
adapted
from
Michael
Porath
27/02/14
pag. 51

52. Principles:
closure
Slide
adapted
from
Michael
Porath
27/02/14
pag. 52

53. Principles:
smallness
Slide
adapted
from
Michael
Porath
27/02/14
pag. 53

54. Principles:
smallness
Slide
adapted
from
Michael
Porath
27/02/14
pag. 54

55. Principles:
surroundedness
Slide
adapted
from
Michael
Porath
27/02/14
pag. 55

56. Principles:
surroundness
Slide
adapted
from
Michael
Porath
27/02/14
pag. 56

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. 57

58. Application
h"p://www.youtube.com/watch?v=LlzuJqZ797U
(watch
3:39-­‐5:09)
27/02/14
pag. 58

59. Color
27/02/14
pag. 59

60. Find the cherries
“Color
helps
us
break
camouflage”
[Ware,
2013]
Slide
adapted
from
S.
Hsiao
27/02/14
pag. 60

61. Snow white may be color blind?
Slide
adapted
from
S.
Hsiao
27/02/14
pag. 61

62. Ready to eat
Slide
adapted
from
S.
Hsiao
27/02/14
pag. 62

63. How we see color
h"p://www.youtube.com/watch?v=l8_fZPHasdo
27/02/14
pag. 63

64. Our eyes
27/02/14
pag. 64

65. Trichromacy Theory: 3 color cones
sensitivity functions
Slide
adapted
from
S.
Hsiao
27/02/14
pag. 65

66. 10%CAUCASIAN MALE IS
COLOR BLIND!
Slide
adapted
from
S.
Hsiao
27/02/14
pag. 66

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. 67

68. Color blindness
27/02/14
pag. 68

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. 69

70. Color blindness: consequences
27/02/14
pag. 70

71. Colors have meaning!
27/02/14
pag. 71

72. 27/02/14
pag. 72

73. How to use colors
• hue: categorical
• saturation: ordinal and quantitative
• luminance: ordinal and quantitative
27/02/14
pag. 73

74. Sequential color schemes
27/02/14
pag. 74

75. Diverging color schemes
27/02/14
pag. 75

76. Qualitative color schemes
27/02/14
pag. 76

77. ColorBrewer2.org
27/02/14
pag. 77

78. Adobe Kuler: Focus on aesthetics
Good
Color
Scales
h"p://kuler.adobe.com
pag. 78
27/02/14

79. Good or bad use of colors?
27/02/14
pag. 79

80. h"p://eagereyes.org/basics/rainbow-­‐color-­‐map
27/02/14
pag. 80

81. Interaction of color
27/02/14
pag. 81

82. Interaction of color
27/02/14
pag. 82

83. Relative differences
27/02/14
pag. 83

84. Interaction of color
27/02/14
pag. 84

85. Simultaneous contrast
27/02/14
pag. 85

86. Simultaneous contrast
27/02/14
pag. 86

87. Simultaneous contrast
27/02/14
pag. 87

88. Simultaneous contrast
27/02/14
pag. 88

89. Simultaneous brightness contrast
[Ware,
1988]
27/02/14
pag. 89

90. The Chevreul illusion
27/02/14
pag. 90

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. 91

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. 92

93. All colors are equal
…but they are not perceived as the same
27/02/14
pag. 93

94. All colors are equal
…but they are not perceived as the same
Luminance Value
Perceived lightness
27/02/14
pag. 94

95. Luminance values
Src:
h>p://www.workwithcolor.com/color-­‐luminance-­‐2233.htm
27/02/14
pag. 95

96. Color decisions need to consider
luminance / contrast
Slide
adapted
from
S.
Hsiao
27/02/14
pag. 96

97. Test a composition for contrast
h"p://www.workwithcolor.com/to-­‐black-­‐and-­‐white-­‐picture-­‐converter-­‐01.htm
27/02/14
pag. 97

98. HSL color picker
h"p://www.workwithcolor.com/hsl-­‐color-­‐picker-­‐01.htm
27/02/14
pag. 98

99. Haloing effect
• Enhancing the edges
• Luminance contrast as a
highlighting method
[Ware,
2013]
Slide
adapted
from
S.
Hsiao
27/02/14
pag. 99

100. Saturation
Slide
adapted
from
S.
Hsiao
27/02/14
pag. 100

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. 101

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. 102

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. 103

104. Ware’s Recommended Colors for Labeling
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)
Slide
adapted
from
Terrance
Brooke
27/02/14
pag. 104

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. 105

106. Chromostereopsis
Slide
adapted
from
S.
Hsiao
27/02/14
pag. 106

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. 107

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. 108

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. 109

110. Easy to read?
27/02/14
pag. 110

111. Easy to read?
27/02/14
pag. 111

112. How to use chromostereopsis
27/02/14
pag. 112

113. How to use chromostereopsis
27/02/14
pag. 113

114. Good or bad?
27/02/14
pag. 114

115. Good or bad?
27/02/14
pag. 115

116. Solution: use colors that are less saturated
27/02/14
pag. 116

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. 117

118. We are drawn by colors!
27/02/14
pag. 118

119. Do different colors affect mood?
h"p://www.factmonster.com/spot/colors1.html
27/02/14
pag. 119

120. Moodjam.com
27/02/14
pag. 120

121. some examples
27/02/14
pag. 121

122. Good or bad us of colors?
27/02/14
pag. 122

123. Good or bad use of colors?
27/02/14
pag. 123

124. Good or bad?
27/02/14
pag. 124

125. Good or bad?
27/02/14
pag. 125

126. 27/02/14
pag. 126

127. Good or bad use of colors?
27/02/14
pag. 127

128. 27/02/14
pag. 128

129. 27/02/14
pag. 129

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. 130

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.1Ware.pdf
27/02/14
pag. 131

132. Optical Illusions
• Joy of Visual Perception by Pete Kaiser
132
Information Visualization Course, Katy Börner, Indiana University
27/02/14
pag. 132

133. Questions?
27/02/14
pag. 133

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-120
http://hci.cs.umanitoba.ca/assets/publication_files/2003Irani-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. 134

135. evaluation experiment
27/02/14
pag. 135

136. learning dashboards:
visualizing emotion, time spent
and distractions
27/02/14
pag. 136

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. 137

138. h"p://bit.ly/I7hve
Santos JL, Verbert K, Govaerts S, Duval E (2013) Addressing learner issues with StepUp!: an Evaluation. In
138
27/02/14 pag. 138
Proceedings of LAK 13

139. GLASS: visualization of emotions
27/02/14
pag. 139

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. 140

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. 141

142. participation much appreciated!
27/02/14
pag. 142