Perception & Color

COMP7507
Visualization & Visual Analytics
What is Perception?
• Perception is the process by which we interpret
the world around us, forming a mental
representation of the environment.
• Processing of our sensory information
– Recognizing (being aware of)
– Organizing (gathering and storing)
– Interpreting (binding to knowledge)
• Subject to correspondence differences and errors

2
Why is something easier to find?

ehklhfdiyaioryweklblkhockxlyhirhupw
lksajdhflkihqdaklljerlajesljselusdslfjsals
oufojrtopjhklghqlkshlkfhlkdshflymcvci
• Find the p’s
• Find the q’s

• What makes an object easy to find is how easily we can

direct a rapid eye movement to focus our attention on it.

3
 Eye Movement and Attention
• When we are looking at something, we focus & process.

Find the tomatoes

4
Eye Movement and Attention
• How to get our eyes focused at something in the
absence of prior knowledge of where things are?
– Important for exploratory visualization
• How to draw one’s attention? What will stand
out in a graphic?

5
 Eye Movement Planning

[Colin 2008]

Some features has an pop-out effect that we can automatically program an eye
movement and focus our attention there. 6
Preattentive Processing
• The automatic mechanisms that operate prior to
the action of attention
• Uncontrolled perception
• The fast ability to detect features, usually at a
rate faster than 10 msec per item
• Time taken to find the target is independent of
the number of distracting nontargets
• Allows detecting features in parallel

7
Preattentive Features

Grey value Elongation Curvature Added surround box

Shape Added surround color Filled Sharpness

[Colin 2008] 8
Preattentive Features

Shadow Convex and concave Sharp vertex Joined lines

Alignment Blinking Motion direction Phase of motion

[Colin 2008] 9
Non-Preattentive Features
• Not all features are preattentive

Juncture Parallelism
[Colin 2008]

10
Easy vs. Hard to Find
• Some features are easier to find:

Find

Find

[Colin 2008]
11
Easy vs. Hard to Find
• Some features are easier to find:

Find

Find

[Colin 2008]
12
Easy vs. Hard to Find
• Some features are easier to find:

Find

Find

[Colin 2008]
13
Easy vs. Hard to Find
• Some features are easier to find:

Find

Find

[Colin 2008]
14
Basic Popout Channels

15
Visual Conjunctions
• A combination of non-unique features

[Colin 2008]
Find the green square

16
Effective Use of Conjunctions
• Not all conjunctions are as effective as the others.

Find the green ellipse Find the green target in the lower cluster

Color + Shape Color + Location

17
Effective Use of Conjunctions
Less effective

[Colin 2013]
More effective

18
Preattentive Salience
• Stronger effects:
– Color, orientation, size, contrast, motion/blinking
• But depends also on degrees of differences
– E.g. large vs. small color differences

Use strong preattentive features/cues before

weak ones to facilitate ease of search

19
Preattentive Salience

[Colin 2008]

t: target d: distractor

20
Preattentive Salience
• Other factors determining if a feature stands out
preattentively:
– Degree of difference of the target from the
nontargets (distractors)
– Degree of difference of the nontargets from each
other

21
Preattentive Salience

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pellentesque ornare nisi erat, eget luctus magna faucibus eu.
Aliquam auctor mollis nulla, at pretium turpis. Sed porttitor
nec justo quis mollis. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse mollis vulputate justo sed aliquet.
Proin a ante nec tellus condimentum lobortis. In ornare sit
amet lorem et sollicitudin. In mollis risus at risus cursus, sed
laoreet magna molestie. Sed gravida metus a gravida aliquet.
Nam dapibus metus lectus, vel fringilla turpis facilisis in.
Phasellus non velit dolor.

22
Preattentive Salience

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pellentesque ornare nisi erat, eget luctus magna faucibus eu.
Aliquam auctor mollis nulla, at pretium turpis. Sed porttitor
nec justo quis mollis. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse mollis vulputate justo sed aliquet.
Proin a ante nec tellus condimentum lobortis. In ornare sit
amet lorem et sollicitudin. In mollis risus at risus cursus, sed
laoreet magna molestie. Sed gravida metus a gravida aliquet.
Nam dapibus metus lectus, vel fringilla turpis facilisis in.
Phasellus non velit dolor.

23
Asymmetric Preattentive Cues
• The “reverse” of a preattentive feature is not
necessary preattentive.

24
Asymmetric Preattentive Cues
• Examples
– Underlining words in a paragraph
– Big targets surrounded by small ones

• Use positively asymmetric preattentive cues for

highlighting

25
Color

26
Visible Light Spectrum
• A spectrum of wavelengths from 370 to 730
nanometers (nm)

Higher Frequency Lower Frequency

UV IR

27
The Visual System
• How do we see?
– Light travels through cornea, pupil, lens, retina,
optical nerves, then brain
– Imaging sensors on the
retina: rods & cones

[Wikimedia Commons]

28
Rods and Cones
• Cones
– active at normal light levels
– color vision involves cone only
• Rods
– sensitive at low light levels
– not sensitive to color
– responsible for our dark-adapted vision
– low influence on color perception
• There is an uneven distribution of cones and rods
in the retina

29
Cone Response
• Sensitivity functions for the three classes of cone
receptors―long(L), medium(M), and short(S) wavelength-
sensitive cones.

This is why we should not

show blue over a dark
background since S cone
receptors are much less
sensitive.

[Ware, 2008]
30
Opponent Color
• Input from the cones is processed into 3 distinct channels:
luminance (black-white), red-green, and yellow-blue.
• Explain how we perceive some of the color effects, e.g.,
brightness contrasts or chromatic contrasts.

[Ware, 2013]
31
Opponent Color
• An experiment

The afterimage caused by

saturating the red-green,
blue-yellow, and luminance
channels.

[Stone]

32
Primary Colors
• Red, Green, Blue
– liquid crystal, CRT displays
• Red, Yellow, Blue
– paint
• Cyan, Magenta, Yellow
– color printing
• Orange, Green, Violet
– color photography

33
Physical Color Spaces

Additive, RGB Subtractive, CMY

For media that emits light For media that reflects light

34
RGB Color Space

Not intuitive to describe a color

35
 Perceptual Color Spaces
For describing a color based on
human perception

(Value)

[Stone]

• How human perceive a color:

hue, lightness and colorfulness (color saturation)
36
Perceptual Color Spaces
The HSL color model Lightness=1

Lightness=0.5

Lightness=0

SharkDderivative work
https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:HSL_color_solid_dblcone_chroma_gray.png

37
Color Wheel
• Analogous colors lie close and contrasting colors lie opposite.

[Stone]

• Color Harmony
– Contrasts: focus attention
– Analogy: unify design
38
Lightness Scales
• Lightness / Brightness – (qualitative) perceived
reflectance of a surface
• Luminance – (quantitative) measured amount of
light energy weighted by the spectral sensitivity
function of the human eye

Relative sensitivity of the

human eye to light of [Ware, 2013]
different wavelengths 39
Lightness vs. Luminance
Colors of different hues

Same lightness, e.g., 0.5

Different luminance

40
 Contrast
• Difference in luminance
• Determines legibility and sharpness

[Ware, 2013]
Large chromatic
difference but equal
luminance 41
Equal Luminance Value

[Stone]

• Gives same importance or emphasis

42
Color on Color
• Chromatic aberration – different colors focus at a
different depth in the eye

Difficult to focus on both red lines

and blue background

43
Color on Color
• Chromatic aberration

44
Color on Color
• Blue-sensitive cones are few and weak.

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
Pellentesque ornare nisi erat, Pellentesque ornare nisi erat,
eget luctus magna faucibus eu. eget luctus magna faucibus eu.

45
Color on Color
• Yellow is the lightest of all pure hues.

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
Pellentesque ornare nisi erat, Pellentesque ornare nisi erat,
eget luctus magna faucibus eu. eget luctus magna faucibus eu.

46
Color on Color
• Perceived differences are enhanced where the
values are close to the background gray value.

47
Color on Color
• Perceived differences are enhanced where the
values are close to the background gray value.

48
Color on Color
• Contextual effects

[E.A. Adelson, MIT] [R. B. Lotto, www.lottolab.org]

49
Color on Color
• Contextual effects

[E.A. Adelson, MIT] [R. B. Lotto, www.lottolab.org]

50
Color on Color
• How to reduce unpredictable effect of color on
color?
– Avoid doing color on color entirely
– Layering colors only with neutral colors

• Ensure that edges are visible and text is legible

51
Purpose of Color
• Purpose of color in information design:
– To label (color as noun)
– To measure (color as quantity)
– To represent or imitate reality (color as
representation)
– To enliven or decorate (color as beauty)
• Most important of all is that color should do no
harm

[Tufte, Envisioning Information]

52
To Label
• For categorical data
• A preattentive process, we can group data by
colors at a glance

[Stone]
53
To Label
• Stroop effect: your right brain is trying to say the
color, while your left brain insists in saying the word

Name the color of each word

• Stronger pre-attentive cues by text than by color

• Avoid color labeling that conflicts with convention
54
To Quantify
• Color scales: sequences of color values to
indicate relative quantity

For labeling

For indicating quantity

Two sequential scales cross-fade through

a neutral color
[Stone]

55
To Quantify
• http://www.colorbrewer.org

56
To Quantify
• Univariate data

A diverging scale

[Stone]

57
 To Quantify
• Multivariate data

Hue to represent population

Lightness to represent change over time

[Stone]

58
Bad Use of Color

Original MRI data Pseudocolor Pseudocolor

blue-yellow gradient rainbow color

Obscures the original data

Similar lightness scale

[Stone] 59
Color Blindness
• About 10% of people (mostly men) has
color vision deficiencies.
• Most have problems in processing red-
green variations.
• Most have no problem in processing
luminance information.
• Rule 1: maintain sufficient value contrast
when reduce to shades of gray
Rule 2: reinforce color encoding with
position, size, shape [Stone]

60
References
• Matthew Ward, Georges Grinstein and Daniel Keim,
"Interactive Data Visualization: Foundations,
Techniques, and Applications", 2010 [Chapter 3]
• Colin Ware, “Visual thinking for design”, 2008.
• Colin Ware, “Information Visualization – Perception
for Design”, 2013.
• Maureen C. Stone, “A Field Guide to Digital Color”,
2003.
• Edward R. Tufte, “Envisioning Information”, 1992.

61