Adapted from slide by James Landay Human Perceptual Abilities Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development February 9, 1999

Adapted from slide by James Landay Outline l Human visual system l Color –Color perception –Color deficiency –Guidelines for design with color l Preattentive Processing l Visual Illusions l 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 l Light passes through lens l Focused on retina

Adapted from slide by James Landay Retina l Retina covered with light-sensitive receptors Retina –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 l Center of retina has most of the cones  ? –allows for high acuity of objects focused at center l Edge of retina is dominated by rods  ? –allows detecting motion of threats in periphery

Adapted from slide by James Landay Color Perception via Cones l “Photopigments” used to sense color yellow l 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 –re-coded & sent to brain

Adapted from slide by James Landay Color Sensitivity from: Really yellow

Adapted from slide by James Landay Distribution of Photopigments l Not distributed evenly –mainly reds (64%) & very few blues (4%)  ? »insensitivity to short wavelengths l cyan to deep-blue »high sensitivity to long wavelengths l yellow & orange l 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 l Most sensitive to the center of the spectrum –blues & reds must be brighter than greens & yellows l Brightness determined mainly by R+G –expressed on a scale of luminance »light energy corrected for wavelength sensitivity l Shapes detected by finding edges –combine brightness & color differences for sharpness l Implications? –hard to deal w/ blue edges & blue shapes

Adapted from slide by James Landay Color Sensitivity (cont.) l 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 l Implications? –don’t rely on blue for text or small objects!

Adapted from slide by James Landay Focus l Different wavelengths of light focused at different distances behind eye’s lens –need for constant refocusing  ? »causes fatigue –careful about color combinations l Red objects appear closer than blue objects l Pure (saturated) colors require more focusing then less pure (desaturated)

Adapted from slide by James Landay l Trouble discriminating colors –about 9% of population l Different photopigment response –reduces capability to discern small color diffs »particularly those of low brightness –most common l 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? l Dialog box –ask if you want to delete »yes (green) »no (red)

Adapted from slide by James Landay What is Wrong with this Design? l Dialog box –ask if you want to delete »yes (green) »no (red) l Problems? –R-G color deficiency –cultural mismatch »Western l green good l red bad »Eastern & others differ

Adapted from slide by James Landay Color Components l Hue –property of the wavelengths of light (i.e., “color”) l Lightness –how much light appears to be reflected from a surface –some hues are inherently lighter or darker l 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.) l Lightness l Saturation

Adapted from slide by James Landay Color Guidelines l 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 l 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.) l Size of detectable changes in color varies –hard to detect changes in reds, purples, & greens –easier to detect changes in yellows & blue- greens l Older users need higher brightness levels to distinguish colors l Hard to focus on edges created by color alone  ? –use both brightness & color differences

Adapted from slide by James Landay Color Guidelines (cont.) l Avoid pure blue for text, lines, & small shapes –blue makes a fine background color –avoid adjacent colors that differ only in blue l 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 l Color can be very helpful, but l Pay attention to –how colors combine –human perception –people with color deficiency l Coding information w/ color is a further topic

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

Preattentive Processing l A limited set of visual properties are processed preattentively (without need for focusing attention). l 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 determine whether the target (red circle) is present or absent. Difference detected in color.

Example: Shape Selection Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected in form (curvature)

A live demonstration

Pre-attentive Processing l < ms qualifies as pre- attentive –eye movements take at least 200ms –yet certain processing can be done very quickly, implying low-level processing in parallel l 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 determine whether the target (red circle) is present or absent when target has two or more features, each of which are present in the distractors. Viewer must search sequentially.

Example: Conjunction of Features cannot Viewer cannot rapidly and accurately determine the boundary if it is determined by features that are shared 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 regardless of 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 allows for preattentive boundary recognition (right).

More on Conjunctive Searches l 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 l Some properties are asymmetric –a sloped line among vertical lines is preattentive –a vertical line among sloped ones is not l 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 DEZIDIXO CERTAIN QUICKLY PUNCHED METHODS NIATREC YLKCIUQ DEHCNUP SDOHTEM SCIENCE ENGLISH RECORDS COLUMNS ECNEICS HSILGNE SDROCER SNMULOC GOVERNS PRECISE EXAMPLE MERCURY SNREVOG ESICERP ELPMAXE YRUCREM CERTAIN QUICKLY PUNCHED METHODS NIATREC YLKCIUQ DEHCNUP SDOHTEM GOVERNS PRECISE EXAMPLE MERCURY SNREVOG ESICERP ELPMAXE YRUCREM SCIENCE ENGLISH RECORDS COLUMNS ECNEICS HSILGNE SDROCER SNMULOC SUBJECT PUNCHED QUICKLY OXIDIZED TCEJBUS DEHCNUP YLKCIUQ DEZIDIXO CERTAIN QUICKLY PUNCHED METHODS NIATREC YLKCIUQ DEHCNUP SDOHTEM SCIENCE ENGLISH RECORDS COLUMNS ECNEICS HSILGNE SDROCER SNMULOC

Preattentive Visual Properties (Healey 97) l length Triesman & Gormican [1988] l width Julesz [1985] l size Triesman & Gelade [1980] l curvature Triesman & Gormican [1988] l number Julesz [1985]; Trick & Pylyshyn [1994] l terminators Julesz & Bergen [1983] l intersection Julesz & Bergen [1983] l closure Enns [1986]; Triesman & Souther [1985] l colour (hue) Nagy & Sanchez [1990, 1992]; D'Zmura [1991] Kawai et al. [1995]; Bauer et al. [1996] l intensity Beck et al. [1983]; Triesman & Gormican [1988] l flicker Julesz [1971] l direction of motion Nakayama & Silverman [1986]; Driver & McLeod [1992] l binocular lustre Wolfe & Franzel [1988] l stereoscopic depth Nakayama & Silverman [1986] l 3-D depth cues Enns [1990] l lighting direction Enns [1990]

Visual Illusions l People don’t perceive length, area, angle, brightness they way they “should”. l 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 l Nevertheless, the visual system does some really unexpected things.

Illusions of Linear Extent l Mueller-Lyon (off by 25-30%) l Horizontal-Vertical

Illusions of Area l Delboeuf Illusion l Height of 4-story building overestimated by approximately 25%

Gestalt Properties l Gestalt: form or configuration l 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) l Law of Proximity –Stimulus elements that are close together will be perceived as a group l Law of Similarity –like the preattentive processing examples l 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 l Figure and Ground –Escher illustrations are good examples –Vase/Face contrast l Subjective Contour

Visual Illusion Using Gestalt Properties Can you guess the woman’s age? Keep looking.

Which Properties for What Information Types? l We’ve looked at preattentive processes –how quickly can individuals be selected l Also at wholistic, grouping effects l 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 AngleSlope Area Volume ColorDensity 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 / Area Larger -> More –Position Leftmost -> first, Topmost -> first –Hue ??? no intrinsic meaning –Slope ??? no intrinsic meaning

Example: Putting It Together (Healey 98) Height: level of cultivation Greyscale: vegetation type Density: ground type

What’s Wrong with this Picture?

Hue does not indicate amount Hue as used here not using any standard ordering Darker 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 l Cognitive abilities –read Dix