1

CS 544 Human Abilities

Color Perception and Guidelines for DesignPreattentive 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 IBM’s RealCD– Prompt– Button

Black on Black?– Cool! – But you can’t 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 can’t 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 R+G 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 eye’s lens– need for constant refocusing

causes fatigue

– 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)

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.edu/~sanstis/SABlur.html

15

Color Channels

a

Long (red)

Med (green)

Short (blue)

Luminance

Y-B

R-G

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

can’t 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/colormodels/color_models2.html#saturation

22

Color components (cont.)

Lightness (Value) Saturation

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

23

Color great for classification

Rapid visual segmentation

Helps determine type Only about six

categories

white

black

redgreen

yellow

yellow

green

blue brown

pink

purple

orange

grey

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.Large areas should be coded with low saturation colors

Avoid high saturation colors for large areas

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 shouldn’t 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

a

Parallel processingof orientation, texture,color and motionfeatures

Object Identification,Working Memory

Detection of 2D patterns,contours and regions

a

AB

C

D

33

Preattentive processing

10msec or better

9812412412349asdasd1234918241231241249182313–asd1fa98

13195sd0934-gj2-09-0999653681ASgg878188425158237ASDFG

414251509sdfkjw9725792857osg72588419990123520597205920

57u0sfg98760dSDF215723208SG2826029582019dfsg79827-0555

a

89739057092794057962976509829408028085080830802809850-802808567847298872ty458202094757720021789843890r455790456099272188897594797902855892594573979209

34

Preattentive processing

10msec or better

9812412412349asdasd1234918241231241249182313–asd1fa98

13195sd0934-gj2-09-0999653681ASgg878188425158237ASDFG

414251509sdfkjw9725792857osg72588419990123520597205920

57u0sfg98760dSDF215723208SG2826029582019dfsg79827-0555

aa

897 90570927940579629765098294080280850808 0802809850-802808567847298872ty45820209475772002178984 890r45579045609927218889759479790285589259457 979209

33

33

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 channelsLength Width

Parallelism Curvature

NumberAdded marksSpatial grouping

Shape

Enclosure

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

Blinking momentarily attracts attention

A flying box leads attention

TextureTexture Using colorUsing underlining

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? Can’t 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!