Adapted from slide by James Landay

Human Perceptual Abilities

Marti Hearst (UCB SIMS)SIMS 213, UI Design &

DevelopmentFebruary 9, 1999

Adapted from slide by James Landay

Outline

Human visual system Color

– Color perception– Color deficiency– Guidelines for design with color

Preattentive Processing Visual Illusions Accuracy of Interpretation of Visual

Properties

Adapted from slide by James Landay

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?

Adapted from slide by James Landay

Visible Spectrum

Adapted from slide by James Landay

Human Visual System

Light passes through lens Focused on retina

Adapted from slide by James Landay

Retina

Retina covered with light-sensitive receptors– rods

»primarily for night vision & perceiving movement

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

– cones»used to sense color

Adapted from slide by James Landay

Retina

Adapted from slide by James Landay

Retina

Center of retina has most of the cones ?– allows for high acuity of objects focused at

center Edge of retina is dominated by rods ?

– allows detecting motion of threats in periphery

Adapted from slide by James Landay

Color Perception via Cones “Photopigments” used to sense color 3 types: blue, green, “red” (really yellowyellow)

– each sensitive to different band of spectrum

– ratio of neural activity of the 3 color»other colors are perceived by combining

stimulation

– re-coded & sent to brain

Adapted from slide by James Landay

Color Sensitivity

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

Really yellow

Adapted from slide by James Landay

Distribution of Photopigments

Not distributed evenly– mainly reds (64%) & very few blues (4%)

?» insensitivity to short wavelengths

cyan to deep-blue

»high sensitivity to long wavelengths yellow & orange

Center of retina (high acuity) has no blue cones ? – disappearance of small blue objects you

fixate on

Adapted from slide by James Landay

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

– expressed on a scale of luminance» light energy corrected for wavelength sensitivity

Shapes detected by finding edges– combine brightness & color differences for

sharpness Implications?

– hard to deal w/ blue edges & blue shapes

Adapted from slide by James Landay

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!

Adapted from slide by James Landay

Focus Different wavelengths of light focused

at different distances behind eye’s lens– need for constant refocusing ?

»causes fatigue

– careful about color combinations Red objects appear closer than blue

objects Pure (saturated) colors require more

focusing then less pure (desaturated)

Adapted from slide by James Landay

Trouble discriminating colors– about 9% of population

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

Adapted from slide by James Landay

What is Wrong with this Design?

Dialog box– ask if you want to

delete» yes (green)» no (red)

Adapted from slide by James Landay

What is Wrong with this Design?

Dialog box– ask if you want to delete

» yes (green)» no (red)

Problems?– R-G color deficiency– cultural mismatch

» Western green good red bad

» Eastern & others differ

Adapted from slide by James Landay

Color Components Hue

– property of the wavelengths of light (i.e., “color”) Lightness

– 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

Adapted from slide by James Landay

Color Components (cont.)

Lightness Saturation

Adapted from slide by James Landay

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

Opponent colors go well together– (red & green) or (yellow & blue)

Adapted from slide by James Landay

Pick Non-adjacent Colors on the Hue Circle

Adapted from slide by James Landay

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

Adapted from slide by James Landay

Color Guidelines (cont.) 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

Adapted from slide by James Landay

Color 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 topic

Preattentive Processing

All Preattentive Processing figures from Healey 97 (on the web at

http://www.cs.berkeley.edu/~healey/PP)

Preattentive Processing

A limited set of visual properties are processed preattentively (without need for focusing attention).

This is important for design of graphics and visualizations– what can be perceived immediately– what properties are good discriminators– what can mislead viewers

Example: Color Selection

Viewer can rapidly and accurately determinewhether the target (red circle) is present or absent.Difference detected in color.

Example: Shape Selection

Viewer can rapidly and accurately determinewhether the target (red circle) is present or absent.Difference detected in form (curvature)

Pre-attentive Processing

< 200 - 250ms qualifies as pre-attentive– eye movements take at least 200ms– yet certain processing can be done

very quickly, implying low-level processing in parallel

If a decision takes a fixed amount of time regardless of the number of distractors, it is considered to be preattentive.

Example: Conjunction of Features

Viewer cannot rapidly and accurately determinewhether the target (red circle) is present or absent when target has two or more features, each of which arepresent in the distractors. Viewer must search sequentially.

Example: Conjunction of Features

Viewer cannotcannot rapidly and accurately determinethe boundary if it is determined by features that areshared across groups. On the right the boundary is determined by a conjunction of shape and value and cannot be detected preattentively; the lefthand boundary can

Example: Form vs. Hue

Hue based boundary determined preattentively regardlessof variation in form (left). However, the converse is not true (right).

Example: Hue vs. Brightness

Random intensity of brightness interferes with boundary detection (left). Uniform intensity allowsfor preattentive boundary recognition (right).

More on Conjunctive Searches

However, some conjunctive searches are preattentive– some involving motion, color, depth

work– other exceptions to the kinds of cases

shown here can be found

Asymmetric and Graded Preattentive Properties

Some properties are asymmetric– a sloped line among vertical lines is

preattentive– a vertical line among sloped ones is not

Some properties have a gradation– some more easily discriminated among

than others

NOT Preattentive: Meaning Represented by Text

SUBJECT PUNCHED QUICKLY OXIDIZED TCEJBUS DEHCNUP YLKCIUQ DEZIDIXOCERTAIN QUICKLY PUNCHED METHODS NIATREC YLKCIUQ DEHCNUP SDOHTEMSCIENCE ENGLISH RECORDS COLUMNS ECNEICS HSILGNE SDROCER SNMULOCGOVERNS PRECISE EXAMPLE MERCURY SNREVOG ESICERP ELPMAXE YRUCREMCERTAIN QUICKLY PUNCHED METHODS NIATREC YLKCIUQ DEHCNUP SDOHTEMGOVERNS PRECISE EXAMPLE MERCURY SNREVOG ESICERP ELPMAXE YRUCREMSCIENCE ENGLISH RECORDS COLUMNS ECNEICS HSILGNE SDROCER SNMULOCSUBJECT PUNCHED QUICKLY OXIDIZED TCEJBUS DEHCNUP YLKCIUQ DEZIDIXOCERTAIN QUICKLY PUNCHED METHODS NIATREC YLKCIUQ DEHCNUP SDOHTEMSCIENCE ENGLISH RECORDS COLUMNS ECNEICS HSILGNE SDROCER SNMULOC

Preattentive Visual Properties(Healey 97)

length Triesman & Gormican [1988] width Julesz [1985] size Triesman & Gelade [1980] curvature Triesman & Gormican [1988] number Julesz [1985]; Trick & Pylyshyn [1994] terminators Julesz & Bergen [1983] intersection Julesz & Bergen [1983] closure Enns [1986]; Triesman & Souther [1985] colour (hue) Nagy & Sanchez [1990, 1992]; D'Zmura [1991]

Kawai et al. [1995]; Bauer et al. [1996] intensity Beck et al. [1983]; Triesman & Gormican [1988] flicker Julesz [1971] direction of motion Nakayama & Silverman [1986]; Driver & McLeod [1992] binocular lustre Wolfe & Franzel [1988] stereoscopic depth Nakayama & Silverman [1986] 3-D depth cues Enns [1990] lighting direction Enns [1990]

Visual Illusions

People don’t perceive length, area, angle, brightness they way they “should”.

Some illusions have been reclassified as systematic perceptual errors– brightness contrasts (grey square on white

background vs. on black background)– partly due to increase in our understanding of

the relevant parts of the visual system Nevertheless, the visual system does

some really unexpected things.

Illusions of Linear Extent

Mueller-Lyon (off by 25-30%)

Horizontal-Vertical

Illusions of Area

Delboeuf Illusion

Height of 4-story building overestimated by approximately 25%

Gestalt Properties

Gestalt: form or configuration Idea: forms or patterns transcend

the stimuli used to create them.– Why do patterns emerge?– Under what circumstances?

Why perceive pairs vs. triplets?

Gestalt Laws of Perceptual Organization (Kaufman 74)

Law of Proximity – Stimulus elements that are close together

will be perceived as a group Law of Similarity

– like the preattentive processing examples Law of Common Fate

– like preattentive motion property» move a subset of objects among similar ones and

they will be perceived as a group

More Gestalt Laws

Figure and Ground– Escher illustrations are good

examples– Vase/Face contrast

Subjective Contour

Visual Illusion Using Gestalt Properties

Can you guess the woman’s age? Keep looking.

Which Properties for What Information Types?

We’ve looked at preattentive processes– how quickly can individuals be

selected Also at wholistic, grouping effects Still have to consider what kind of

properties are effective for displaying different kinds of information

Accuracy Ranking of Quantitative Perceptual Tasks(Mackinlay 88 from Cleveland & McGill)

Position

Length

Angle Slope

Area

Volume

Color Density

More Accurate

Less Accurate

Interpretations of Visual Properties

Some properties can be discriminated more accurately but don’t have intrinsic meaning(Senay & Ingatious 97, Kosslyn, others)

– Density (Greyscale)Darker -> More

– Size / Length / AreaLarger -> More

– PositionLeftmost -> first, Topmost -> first

– Hue??? no intrinsic meaning

– Slope??? no intrinsic meaning

Example: Putting It Together(Healey 98)

Height: level of cultivationGreyscale: vegetation typeDensity: ground type

What’

s W

rong w

ith t

his

Pic

ture

?

What’

s W

rong w

ith t

his

Pic

ture

?

Hue does not indicate amountHue as used here not using any standard orderingDarker implies more, so inappropriate to mean no loss.White implies few, no losses, so inappropriate for no data.Grouping effects hampered by poor use of color and layout on x-axis.What does the y-axis mean?Shimmer/hard to look at.

Next Time

Cognitive abilities– read Dix 1.3-1.7