Information visualization: perception and principles
3 likes3,184 views
This document contains lecture slides about information visualization and perception principles from a lecture at Vrije Universiteit Brussel. It discusses topics like how the brain perceives visuals, pre-attentive processing techniques to make things "pop out", encoding methods for representing quantitative data, Gestalt grouping principles, and the use of color in visualization. The slides include examples and illustrations related to these concepts.
![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]](https://image.slidesharecdn.com/lecture2-perceptionandprinciples-140227091630-phpapp01/85/Information-visualization-perception-and-principles-18-320.jpg)
![Find the cherries
“Color
helps
us
break
camouflage”
[Ware,
2013]
Slide
adapted
from
S.
Hsiao
27/02/14
pag. 60](https://image.slidesharecdn.com/lecture2-perceptionandprinciples-140227091630-phpapp01/85/Information-visualization-perception-and-principles-60-320.jpg)
![Simultaneous brightness contrast
[Ware,
1988]
27/02/14
pag. 89](https://image.slidesharecdn.com/lecture2-perceptionandprinciples-140227091630-phpapp01/85/Information-visualization-perception-and-principles-89-320.jpg)
![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](https://image.slidesharecdn.com/lecture2-perceptionandprinciples-140227091630-phpapp01/85/Information-visualization-perception-and-principles-91-320.jpg)
![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](https://image.slidesharecdn.com/lecture2-perceptionandprinciples-140227091630-phpapp01/85/Information-visualization-perception-and-principles-92-320.jpg)
![Haloing effect
• Enhancing the edges
• Luminance contrast as a
highlighting method
[Ware,
2013]
Slide
adapted
from
S.
Hsiao
27/02/14
pag. 99](https://image.slidesharecdn.com/lecture2-perceptionandprinciples-140227091630-phpapp01/85/Information-visualization-perception-and-principles-99-320.jpg)
Information visualization: perception and principles
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 89. Simultaneous brightness contrast [Ware, 1988] 27/02/14 pag. 89
- 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
- 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
- 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
- 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