CS 544 Human Abilities

1
CS 544 Human Abilities

• Color Perception and Guidelines for Design
• Preattentive Processing

Acknowledgement Some of the material in these
lectures is based on material prepared for
similar courses by Saul Greenberg (University of
Calgary), Ravin Balakrishnan (University of
Toronto), James Landay (University of California
at Berkeley), monica schraefel (University of
Toronto), and Colin Ware (University of New
Hampshire). Used with the permission of the
respective original authors.
2
UI hall of shame

• From IBMs RealCD
• Prompt
• Button
• Black on Black?
• Cool!
• But you cant see it!
• click here prompt should not be needed.

3
Why study color?

• Color can be a powerful tool to improve user
  interfaces, but its inappropriate use can
  severely reduce the performance of the systems we
  build

4
Visible Spectrum
5
Human Visual System

• Light passes through lens
• Focused on retina

6
Retina

• covered with light-sensitive receptors
• rods
• sensitive to broad spectrum of light
• unable to resolve detail
• overstimulated in all but the dimmest light
• cant discriminate between colors
• sense intensity or shades of gray
• primarily for night vision perceiving movement
• 120 million per eye
• cones
• less sensitive to light
• used to sense color
• 6 million per eye

7
Retina

• Center of retina (fovea) has most of the cones
• allows for high acuity of objects focused at
  center
• Edge of retina, periphery, is dominated by rods
• allows detecting motion of threats in periphery

8
Trichromacy theory

• Cone receptors used to sense color
• 3 types blue, green, red (really yellow)
• each sensitive to different band of spectrum
• ratio of neural activity of the 3 ? color
• other colors are perceived by combining
  stimulation

9
Color Sensitivity
Really yellow
10
Distribution of cones

• Not distributed evenly
• mainly reds (64) very few blues (4)
• insensitivity to short wavelengths
• cyan to deep-blue
• Center of retina (high acuity) has no blue cones
• small blue objects you fixate on disappear

11
Color Sensitivity Image Detection

• Most sensitive to the center of the spectrum
• blues reds must be brighter than greens
  yellows
• Brightness determined mainly by RG
• Shapes detected by finding edges
• combine brightness (luminance actually) color
  differences for sharpness
• Implications?
• hard to deal with blue edges blue shapes

12
Color Sensitivity (cont.)

• As we age
• lens yellows absorbs shorter wavelengths
• sensitivity to blue is even more reduced
• fluid between lens and retina absorbs more light
• perceive a lower level of brightness
• Implications

Blue text on a dark background to be avoided. We
have few short-wavelength sensitive cones in the
retina and they are not very sensitive. Older
users need brighter colors.
Blue text on a dark background to be avoided. We
have few short-wavelength sensitive cones in the
retina and they are not very sensitive. Older
users need brighter colors.
13
Focus

• Different wavelengths of light focused at
  different distances behind eyes lens
• need for constant refocusing
• causes fatigue
• careful about color combinations
• Pure (saturated) colors require more focusing
  then less pure (desaturated)
• dont use saturated colors in UIs unless you
  really need something to stand out (stop sign)

14
Peripheral acuity
With strict fixation of the center spot, each
letter is equally legible because it is about ten
times its threshold size. This is true at any
viewing distance. Chart shows the increasingly
coarse grain of the retinal periphery. Each
letter is viewed by an equal area of visual
cortex ("cortical magnification factor") (Anstis,
S.M., Vision Research 1974) http//www-psy.ucsd.e
du/sanstis/SABlur.html
15
Color Channels
16
Luminance contrast
Illustration of simultaneous luminance contrast.
The upper row of rectangles are an identical
gray. The lower rectangles are a darker gray but
also identical.
17
Luminance channel

• Visual system extracts surface information
• Discounts illumination level
• Discounts color of illumination

18
Luminance is not Brightness

• Luminance refers to the measured amount of light
  coming from some region of space
• Receptors bleach and become less sensitive with
  more light
• Takes up to half an hour to recover sensitivity
• We are not light meters
• Brightness refers to perception of amount of
  light coming from a source
• Brightness non linear

19
Color blindness

• Trouble discriminating colors
• around 9 of population (8 males, 1 females)
• Different photopigment response
• reduces capability to discern small color diffs
• particularly those of low luminance
• Red-green deficiency is best known
• lack of either green or red photopigment
• cant discriminate colors dependent on R G
• Color blind acceptable palette?
• Yellow-blue, and grey variation ok

20
Color components

• Hue
• property of the wavelengths of light (i.e.,
  color)
• Lightness (or value)
• how much light appears to be reflected from a
  surface
• some hues are inherently lighter or darker
• Saturation
• purity of the hue
• e.g., red is more saturated than pink
• color is mixture of pure hue achromatic color
• portion of pure hue is the degree of saturation

21
Color components (cont.)

• Hue, Saturation, Value (HSV) model

from http//www2.ncsu.edu/scivis/lessons/colormode
ls/color_models2.htmlsaturation
22
Color components (cont.)

• Lightness (Value)

• Saturation

from http//www2.ncsu.edu/scivis/lessons/colormode
ls/color_models2.htmlsaturation.
23
Color great for classification

• Rapid visual segmentation
• Helps determine type
• Only about six categories

24
Color great for classification (cont.)

• Scatterplot example

25
Color coding/labeling

• Large areas low saturation
• Small areas high saturation
• Recommended colors for coding

• Widely agreed upon names
• First 4 black white are unique and mark ends
  of opponent color axes
• Entire set correspond to most common color names
  found across cultures
• Choose from set of first six, then from second
  set of six

26
Color coding/labeling (cont.)
The same rules apply to color coding text and
other similar information. Small areas should
have high saturation colors.
Avoid high saturation colors for large areas
Large areas should be coded with low saturation
colors
Maintain luminance contrast.
27
Color guidelines

• Avoid simultaneous display of highly saturated
• e.g., no cyans/blues at the same time as reds,
  why?
• refocusing!
• desaturated combinations are better ? pastels
• Opponent colors go well together
• (red green) or (yellow blue)

28
Color guidelines (cont.)

• Pick non-adjacent colors on hue circle

29
Color guidelines (cont.)

• Size of detectable changes in color varies
• hard to detect changes in reds, purples, greens
• easier to detect changes in yellows blue-greens
• Older users need higher luminance levels to
  distinguish colors
• Hard to focus on edges created by color alone
• use both luminance color differences

30
Color guidelines (cont.)

• Avoid red green in the periphery - why?
• lack of RG cones there yellows blues work in
  periphery
• Avoid pure blue for text, lines, small shapes
• blue makes a fine background color
• avoid adjacent colors that differ only in blue
• Avoid single-color distinctions
• mixtures of colors should differ in 2 or 3 colors
• e.g., 2 colors shouldnt differ only by amount of
  red
• helps color-deficient observers

31
Perception primitives

• Whole visual field processed in parallel
• Can tell us what kinds of information is easily
  distinguished
• Popout effects (attention)
• Segmentation effects (division of the visual
  field)

32
Machinery of perception
33
Preattentive processing

• 10msec or better

9812412412349asdasd1234918241231241249182313asd1f
a98 13195sd0934-gj2-09-0999653681ASgg8781884251582
37ASDFG 414251509sdfkjw9725792857osg72588419990123
520597205920 57u0sfg98760dSDF215723208SG2826029582
019dfsg79827-0555
34
Preattentive processing

• 10msec or better

9812412412349asdasd1234918241231241249182313asd1f
a98 13195sd0934-gj2-09-0999653681ASgg8781884251582
37ASDFG 414251509sdfkjw9725792857osg72588419990123
520597205920 57u0sfg98760dSDF215723208SG2826029582
019dfsg79827-0555
35
Color
36
Orientation
37
Motion
38
Size
39
Simple shading
40
Conjunction (does not pop out)
41
Compound features (do not pop out)
42
Surrounded colors do not pop out
43
More Preattentive channels
44
Laws of preattentive display

• Must stand out on some simple dimension
• color,
• simple shape orientation, size
• motion,
• depth
• Lessons for highlighting one of each

45
Highlighting
Texture Using color Using underlining
A flying box leads attention
Blinking momentarily attracts attention
Blinking momentarily attracts attention
Motion elicits an orienting response
46
Preattentive conjunctions

• Stereo and color
• Color and motion
• Color and position
• Shape and position
• In general spatial location and some aspect of
  form (color or shape)

47
Preattentive lessons

• Rapid visual search (10 msec/item)
• Easy to attend to
• Makes symbols distinct
• Based on simple visual attributes
• Faces, etc are not pre-attentive
• Rules for making things distinct can be used for
  individual symbols or areas
• Do not use large areas of strong color
• Orthogonality - use a different channel for a
  different type of information

48
Scale matters
Parafovea
49
UI hall of shame

• What is the empty button above MC for?
• Cant resize
• Blue for numbers!
• goes against all we know
• hard to focus on
• combined with red ? eye strain
• Grey on grey!
• Difficult for some users
• Contrast changes after user clicks the buttons!