2/23/05 1

Human Abilities:Color, Vision, & Perception

CS 160, Spring 2005Slides from: James Landay

2/23/2005 2

Interface Hall of Shame or Fame?

From IBM’s RealCD* prompt* button

2/23/2005 3

Interface Hall of Shame !

From IBM’s RealCD* prompt* button

Black on black????* cool!* but you can’t see it* “click here...”

shouldn’t be necessary -> lack of affordances

2/23/05 4

Human Abilities:Color, Vision, & Perception

CS 160, Spring 2005Slides from: James Landay

2/23/2005 5

Outline

Human visual system Guidelines for design Color & memory

2/23/2005 6

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

Why Study Color?

2/23/2005 7

Visible Spectrum

2/23/2005 8

Human Visual System

Light passes through lens Focussed on retina

2/23/2005 9

Retina

Retina covered with light-sensitive receptors* cones

+used to sense color

* rods+primarily for night vision & perceiving

movement+sensitive to broad spectrum of light+can’t discriminate between colors+sense intensity or shades of gray

2/23/2005 10

Retina

Center of retina has most of the cones ?* allows for high acuity of objects focused at center &

color perception

Edge of retina is dominated by rods ?* allows detecting motion of threats in periphery

2/23/2005 11

Color Perception via Cones

“Photopigments” 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

2/23/2005 12

Color Sensitivity

from: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm

Really yellow

2/23/2005 13

from http://insight.med.utah.edu/Webvision/index.html

Color Sensitivity

Really yellow

2/23/2005 14

Distribution of Photopigments

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 ? * disappearance of small blue objects you

fixate on

2/23/2005 15

Color Sensitivity & Image Detection

Most sensitive to the center of the spectrum* blues & reds must be brighter than greens & yellows

Brightness determined mainly by R+G Shapes detected by finding edges

* combine brightness & color differences for sharpness

Implications?* hard to deal w/ blue edges & blue shapes

2/23/2005 16

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?* don’t rely on blue for text or small objects!* older users need brighter colors

2/23/2005 17

Focus

Different wavelengths of light focused at different distances behind eye’s lens* need for constant refocusing ?

+causes fatigue

* be careful about color combinations

2/23/2005 18

Focus

Different wavelengths of light focused at different distances behind eye’s lens* need for constant refocusing ?

+causes fatigue* be careful about color combinations

Pure (saturated) colors require more focusing then less pure (desaturated)* don’t use saturated colors in UIs unless you

really need something to stand out (stop sign)

2/23/2005 19

Trouble discriminating colors* besets about 9% of population* two major types

Different photopigment response* reduces capability to discern small color diffs

+particularly those of low brightness* most common

Red-green deficiency is best known* lack of either green or red photopigment ?

+can’t discriminate colors dependent on R & G

Color Deficiency (also known as “color

blindness”)

2/23/2005 20

Color Deficiency Example

2/23/2005 21

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 (yellow) or darker (blue)

Saturation* purity of the hue

+e.g., red is more saturated than pink* color is mixture of pure hue & achromatic color

+achromatic: a color lacking hue; white, gray, or black

+portion of pure hue is the degree of saturation

2/23/2005 22

Color Components (cont.)

Lightness Saturation

from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.

2/23/2005 23

HSV Color Model

HSV model - hue, saturation, & value* hue is primary wavelength (i.e., basic color)* saturation is a measure of how pure light is

+high is pure, low means it is mixed w/ white/gray* value is intensity (dark vs. light)

HSV is easier for people to use. Why?* uses people’s intuition of what color is* there is a direct conversion to RGB

Other colors models:* RGB: specify color by red, green, & blue components* CMY: in terms of mixing pigments cyan, magenta, &

yellow

2/23/2005 24

HSV Color Model (cont.)

from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.

2/23/2005 25

Color Guidelines

Avoid simultaneous display of highly saturated, spectrally extreme colors* e.g., no cyans/blues at the same time as reds,

why?+refocusing!

* desaturated combinations are better pastels

2/23/2005 26

Opponent colors go well together* (red & green) or

(yellow & blue)* Hering's opponent

colors diagram Pick non-adjacent

colors on the hue circle

Color Guidelines

2/23/2005 27

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 brightness levels to distinguish colors

Hard to focus on edges created by color alone ?* use both brightness & color differences

2/23/2005 28

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 shouldn’t differ only by amount of red

* helps color-deficient observers

2/23/2005 29

Encoding Info with Color

Beware… Working memory interferes with

long term memory

2/23/2005 30

Simple Experiment

Volunteer Start saying colors you see in list of

words* when slide comes up* as fast as you can

Say “done” when finished Everyone else time it…

PaperHomeBackSchedulePageChange

2/23/2005 32

Simple Experiment

Do it again Say “done” when finished

BlueRedBlackWhiteGreenYellow

2/23/2005 34

Memory

Interference (recall MHP lecture)* two strong cues in working memory* link to different chunks in long term memory

Why learn about memory?* know what’s behind many HCI techniques* helps you understand what users will “get”* aging population of users

2/23/2005 35

Memory Review

Memory* three types?

+sensor, WM, & LTM

* use cues in ? to get to ?+WM -> LTM

* interference can make hard to access?+LTM

Cues can make it easier to access LTM

2/23/2005 36

Summary

Color can be very helpful, but Pay attention to

* how colors combine* human perception* people with color deficiency

Coding information w/ color is a further issue