information visualization: perception and principles

27/02/14 pag. 1

Information visualization lecture 2

perception and principles

Katrien Verbert Department of Computer Science

Faculty of Science Vrije Universiteit Brussel

[email protected]

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?


27/02/14 pag. 23

Where is Waldo?


27/02/14 pag. 24

encoding methods

27/02/14 pag. 25

Magnitude estimation

How much bigger is the lower bar?


27/02/14 pag. 26


How much bigger is the lower bar?

X 4


27/02/14 pag. 27


How much bigger is the right circle?


27/02/14 pag. 28



X 5


27/02/14 pag. 29




27/02/14 pag. 30


How much bigger is the right circle? X 9


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?


27/02/14 pag. 33

Perceptual or apparent scaling

Compensating magnitude to match perception


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


27/02/14 pag. 42

Principles: proximity


27/02/14 pag. 43

Principles: proximity


27/02/14 pag. 44

Principles: similarity


27/02/14 pag. 45

Principles: connectedness


27/02/14 pag. 46

Principles: continuity


27/02/14 pag. 47



27/02/14 pag. 48



27/02/14 pag. 49

Principles: closure


27/02/14 pag. 50

Principles: closure


27/02/14 pag. 51

Principles: closure


27/02/14 pag. 52

Principles: closure


27/02/14 pag. 53

Principles: smallness


27/02/14 pag. 54

Principles: smallness


27/02/14 pag. 55

Principles: surroundedness


27/02/14 pag. 56

Principles: surroundness


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?


27/02/14 pag. 62

Ready to eat


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


27/02/14 pag. 66

10% CAUCASIAN MALE IS COLOR BLIND!


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?


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


27/02/14 pag. 83

Relative differences

27/02/14 pag. 84


27/02/14 pag. 85

Simultaneous contrast

27/02/14 pag. 86


27/02/14 pag. 87


27/02/14 pag. 88


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


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]


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


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)


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


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


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


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!

information visualization: perception and principles

Education

magnitude estimation

preattentive processingan

different colour

right circle

attentive differences

things pop

pop outshape

scientific research