Information Visualisation: perception and principles

Lecture 2 of information visualisation course: perception, pre-attentive processing, encoding methods, color use, gestalt

1. Information Visualisation
perception and principles
Katrien Verbert
[email protected]

2. Perception
how our brain perceives and interprets visuals

5. Moving Illusions
http://www.youtube.com/watch?v=Iw8idyw_N6Q
Watch 00:00 –07:23

6. Pre-attentive processing
How do we make things pop-out?

7. Where is Waldo?

8. How many 3’s?
1281768756138976546984506985604982826762
9809858458224509856458945098450980943585
9091030209905959595772564675050678904567
8845789809821677654876364908560912949686

9. How many 3’s?
1281768756138976546984506985604982826762
9809858458224509856458945098450980943585
9091030209905959595772564675050678904567
8845789809821677654876364908560912949686

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

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)

12. Shape
Different shapes can often pop out

13. Enclosure
A single lack of enclosure can quickly be identified pre-
attentively

14. The ‘odd one out’can quickly be
identified, by pre-attentive
processing
Orientation
Pre-attentive processing:
‘things that pop out’

15. Colour
A different colourcan be pre-attentively identified

16. Did you notice the red square?

17. With conjunction encoding the red square is not pre-
attentively identified

18. Pre-attentive features

19. Where is Waldo?

20. Where is Waldo?

21. encoding methods

22. Magnitude estimation
How much bigger is the lower bar?

23. Magnitude estimation
How much bigger is the lower bar?
X 4

24. Magnitude estimation
How much bigger is the right circle?

25. Magnitude estimation
How much bigger is the right circle?
X 5

26. Magnitude estimation
How much bigger is the right circle?

27. Magnitude estimation
How much bigger is the right circle?
X 9

28. Apparent magnitude curves
http://makingmaps.net/2007/08/28/perceptual-scaling-of-map-symbols/

29. Which one is more accurate?

30. Perceptual or apparent scaling
Compensating magnitude to match perception

31. Cleveland and McGill (1984)
Length
Position
Angle
Slope
Area
Volume
Colour
Density
Most accurate
Least accurate
Accuracy of judgment of encoded quantitative
data

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

33. First the user specifies three topics of interest
User query
Osteoporosis
Prevention
Research
Example application that uses different
encoding methods

34. (top) The TileBarrepresentation of the relevance of paragraphs to the topic
words: (bottom) 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?

35. Attribute types
35
Slide source: Tamara Munzner

36. Guidance for the encoding of quantitative, ordinal and categorical data (Mackinlay
1986)
Quantitative
Position
Length
Angle
Slope
Area
Volume
Density
Shape
Ordinal
Position
Density
Colour saturation
Texture
Connection
Containment
Length
Angle
Slope
Area
Volume
Colour hue
Categorical
Position
Colour hue
Texture
Connection
Containment
Density
Colour saturation
Shape
Length
Angle
Slope
Area
Volume
Treble
Bass
Quantitative, ordinal and categorical data

37. Expressiveness types and effectiveness
Slide source: Tamara Munzner

38. Expressiveness types and effectiveness rankings
38
Slide source: Tamara Munzner

39. Gestalt grouping

40. http://www.youtube.com/watch?v=ZWucNQawpWY

41. Principles:
figure and ground
Slide adapted from Michael Porath

42. Principles:
proximity
Slide adapted from Michael Porath

43. Principles:
proximity
Slide adapted from Michael Porath

44. Principles:
similarity
Slide adapted from Michael Porath

45. Principles:
connectedness
Slide adapted from Michael Porath

46. Principles:
continuity
Slide adapted from Michael Porath

47. Principles:
continuity
Slide adapted from Michael Porath

48. Principles:
continuity
Slide adapted from Michael Porath

49. Principles:
closure
Slide adapted from Michael Porath

50. Principles:
closure
Slide adapted from Michael Porath

51. Principles:
closure
Slide adapted from Michael Porath

52. Principles:
closure
Slide adapted from Michael Porath

53. Principles:
smallness
Slide adapted from Michael Porath

54. Principles:
smallness
Slide adapted from Michael Porath

55. Principles:
surroundedness
Slide adapted from Michael Porath

56. Principles:
surroundness
Slide adapted from Michael Porath

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.

58. Application
http://www.youtube.com/watch?v=LlzuJqZ797U(watch 3:39-
5:09)

59. Color

60. Find the cherries
“Color helps us breakcamouflage”
[Ware, 2013]
Slide adapted from S. Hsiao

61. Snow white may be color blind?
Slide adapted from S. Hsiao

62. Ready toeat
Slide adapted from S. Hsiao

63. How we see color
http://www.youtube.com/watch?v=l8_fZPHasdo

64. TrichromacyTheory: 3color conessensitivity
functions
Slide adapted from S. Hsiao

65. 10% CAUCASIANMALE IS
COLORBLIND!
Slide adapted from S. Hsiao

66. Color Tests
Information Visualization
Course, Katy Börner
•The individual with normal color vision will see a 5
revealed in the dot pattern.
•An individual with Red/Green (the most common) color
deficiencywill see a 2 revealed in the dots.
http://www.visibone.com/colorblind/

67. Color blindness

68. We often take color for granted
•Howdoblind people learn colors?
•How docolorblind peopledrive?
Slide adapted from S. Hsiao

69. Color blindness: consequences

70. Designing for color deficiency: Blue-Orange is safe
[Seriously Colorful:Advanced Color Principles & Practices.
Stone.TableauCustomer Conference 2014.]
Slide source: Tamara Munzner

71. Colors have meaning!

73. How to use colors
•hue: categorical
•saturation: ordinal and quantitative
•luminance: ordinal and quantitative

74. Sequential color schemes

75. Diverging color schemes

76. Qualitative color schemes

77. ColorBrewer2.org

78. Good or bad use of colors?

79. http://eagereyes.org/basics/rainbow-color-map

80. Interaction of color

81. Interaction of color

82. Relative differences

83. Interaction of color

84. Simultaneous contrast

85. Simultaneous contrast

86. Simultaneous contrast

87. Simultaneous contrast

88. Simultaneous brightness contrast
[Ware, 1988]

89. The Chevreulillusion

90. Simultaneous contrast and errors in reading
maps
Gravity map of the North Atlantic Ocean. Large errors occur when gray-scale maps
are read using a key 20% error of the entire scale [Ware, 1988]

91. Guideline
Avoid using gray scales as a method for representing more
than a few (two to four) numerical values [Ware, 2013]

92. All colors are equal
…but they are not perceived as the same

93. All colors are equal
…but they are not perceived as the same
Luminance Value
Perceived lightness

94. Luminance values
Src: http://www.workwithcolor.com/color-luminance-2233.htm

95. Spectral sensitivity
Slide source: Tamara Munzner

96. Color decisions need to consider luminance /
contrast
Slide adapted from S. Hsiao

97. Test a composition for contrast
http://www.workwithcolor.com/to-black-and-white-picture-converter-01.htm

98. HSL color picker
http://www.workwithcolor.com/hsl-color-picker-01.htm

99. Haloing effect
•Enhancing theedges
•Luminancecontrast as a
highlighting method
[Ware, 2013]
Slide adapted from S. Hsiao

100. Slide adapted from S. Hsiao
Saturation

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

102. Guidelines
•Use more saturated colors for small symbols, thin lines, or
small areas.
•Use less saturated colors for large areas.

103. Cross-cultural naming
More than 100 languages showed that primary color terms
are consistentacross cultures (Berlin &Kay, 1969)
Slide adapted from S. Hsiao

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)

105. Guideline
Use easy-to-remember and consistentcolor 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.

106. Chromostereopsis
Slide adapted from S. Hsiao

107. How we used to think it works
Old model: Light of different wavelengths is focused differently by the eye.
Src: http://luminanze.com/writings/chromostereopsis_in_ux_design.html

108. What we know
Current model: Light of different wavelengths is refracted differently by the eye.
Src: http://luminanze.com/writings/chromostereopsis_in_ux_design.html

109. chromostereopsis
If we use in the same image two far pure colors the eye is not
able to focus both of them

110. Easy to read?

111. Easy to read?

112. How to use chromostereopsis

113. How to use chromostereopsis

114. Good or bad?

115. Good or bad?

116. Solution: use colors that are less saturated

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:
ousing colors that are less saturated
osurroundingthe contrasting colors with a background that
moderates the effect of their different wavelengths
oseparatingthe contrasting colors.
http://desdag.blogspot.be/2012/05/chromostereopsis-design-fails-due-to.html

118. We are drawn by colors!

119. Do different colors affect mood?
http://www.factmonster.com/spot/colors1.html

120. Moodjam.com

121. some examples

122. Good or bad us of colors?

123. Good or bad use of colors?

124. Good or bad?

125. Good or bad?

127. Good or bad use of colors?

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.

131. Readings
Required
•Harrower, M., & Brewer, C. A. (2003). ColorBrewer. org: an online tool for
selecting colourschemes for maps. Cartographic Journal, The, 40(1), 27-
37. Available at:
http://www.albany.edu/faculty/fboscoe/papers/harrower2003.pd
f
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
•Munzner,T.(2014)Visualization Analysis and Design –Chapter 2, 10

132. Optical Illusions
132
•Joy of Visual Perceptionby Pete Kaiser

133. Questions?

134. References
•PourangIraniand RasitEskicioglu. (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.