2/23/051 Human Abilities: Color, Vision, & Perception CS 160, Spring 2005 Slides from: James Landay

2/23/20052 Interface Hall of Shame or Fame? 4 From IBM’s RealCD *prompt *button

2/23/20053 Interface Hall of Shame ! 4 From IBM’s RealCD *prompt *button 4 Black on black???? *cool! *but you can’t see it *“click here...” shouldn’t be necessary -> lack of affordances

2/23/054 Human Abilities: Color, Vision, & Perception CS 160, Spring 2005 Slides from: James Landay

2/23/20055 Outline 4 Human visual system 4 Guidelines for design 4 Color & memory

2/23/20056 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/20057 Visible Spectrum

2/23/20058 Human Visual System 4 Light passes through lens 4 Focussed on retina

2/23/20059 Retina 4 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/ Retina 4 Center of retina has most of the cones  ? *allows for high acuity of objects focused at center & color perception 4 Edge of retina is dominated by rods  ? *allows detecting motion of threats in periphery

2/23/ Color Perception via Cones 4 “Photopigments” used to sense color 4 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/ Color Sensitivity from: Really yellow

2/23/ from Color Sensitivity Really yellow

2/23/ Distribution of Photopigments 4 Not distributed evenly *mainly reds (64%) & very few blues (4%)  ? +insensitivity to short wavelengths ~cyan to deep-blue 4 Center of retina (high acuity) has no blue cones  ? *disappearance of small blue objects you fixate on

2/23/ Color Sensitivity & Image Detection 4 Most sensitive to the center of the spectrum *blues & reds must be brighter than greens & yellows 4 Brightness determined mainly by R+G 4 Shapes detected by finding edges *combine brightness & color differences for sharpness 4 Implications? *hard to deal w/ blue edges & blue shapes

2/23/ Color Sensitivity (cont.) 4 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 4 Implications? *don’t rely on blue for text or small objects! *older users need brighter colors

2/23/ Focus 4 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/ Focus 4 Different wavelengths of light focused at different distances behind eye’s lens *need for constant refocusing  ? +causes fatigue *be careful about color combinations 4 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/ Trouble discriminating colors *besets about 9% of population *two major types 4 Different photopigment response *reduces capability to discern small color diffs +particularly those of low brightness *most common 4 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/ Color Deficiency Example

2/23/ Color Components 4 Hue *property of the wavelengths of light (i.e., “color”) 4 Lightness (or value) *how much light appears to be reflected from a surface *some hues are inherently lighter (yellow) or darker (blue) 4 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/ Color Components (cont.) 4 Lightness 4 Saturation from

2/23/ HSV Color Model 4 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) 4 HSV is easier for people to use. Why? *uses people’s intuition of what color is *there is a direct conversion to RGB 4 Other colors models: *RGB: specify color by red, green, & blue components *CMY: in terms of mixing pigments cyan, magenta, & yellow

2/23/ HSV Color Model (cont.) from

2/23/ Color Guidelines 4 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/ Opponent colors go well together *(red & green) or (yellow & blue) *Hering's opponent colors diagram  4 Pick non-adjacent colors on the hue circle Color Guidelines

2/23/ Color Guidelines (cont.) 4 Size of detectable changes in color varies *hard to detect changes in reds, purples, & greens *easier to detect changes in yellows & blue-greens 4 Older users need higher brightness levels to distinguish colors 4 Hard to focus on edges created by color alone  ? *use both brightness & color differences

2/23/ Color Guidelines (cont.) 4 Avoid red & green in the periphery - why? *lack of RG cones there -- yellows & blues work in periphery 4 Avoid pure blue for text, lines, & small shapes *blue makes a fine background color *avoid adjacent colors that differ only in blue 4 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/ Encoding Info with Color 4 Beware… 4 Working memory interferes with long term memory

2/23/ Simple Experiment 4 Volunteer 4 Start saying colors you see in list of words *when slide comes up *as fast as you can 4 Say “done” when finished 4 Everyone else time it…

Paper Home Back Schedule Page Change

2/23/ Simple Experiment 4 Do it again 4 Say “done” when finished

Blue Red Black White Green Yellow

2/23/ Memory 4 Interference (recall MHP lecture) *two strong cues in working memory *link to different chunks in long term memory 4 Why learn about memory? *know what’s behind many HCI techniques *helps you understand what users will “get” *aging population of users

2/23/ Memory Review 4 Memory *three types? +sensor, WM, & LTM *use cues in ? to get to ? +WM -> LTM *interference can make hard to access? +LTM 4 Cues can make it easier to access LTM

2/23/ Summary 4 Color can be very helpful, but 4 Pay attention to *how colors combine *human perception *people with color deficiency 4 Coding information w/ color is a further issue