CS 544 Human Abilities Color Perception and Guidelines

CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive 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. 1

UI hall of shame l From IBM’s Real. CD – – l Black on Black? – – – 2 Prompt Button Cool! But you can’t see it! “click here …” prompt should not be needed.

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 3

Visible Spectrum 4

Human Visual System l l 5 Light passes through lens Focused on retina

Retina l covered with light-sensitive receptors – rods l l l l – cones l l l 6 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 less sensitive to light used to sense color 6 million per eye

Retina l Center of retina (fovea) has most of the cones – l Edge of retina, periphery, is dominated by rods – 7 allows for high acuity of objects focused at center allows detecting motion of threats in periphery

Trichromacy theory l l 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 l 8 other colors are perceived by combining stimulation

Color Sensitivity Really yellow 9

Distribution of cones l Not distributed evenly – mainly reds (64%) & very few blues (4%) l insensitivity to short wavelengths – l Center of retina (high acuity) has no blue cones – 10 cyan to deep-blue small blue objects you fixate on disappear

Color Sensitivity & Image Detection l Most sensitive to the center of the spectrum – l l Brightness determined mainly by R+G Shapes detected by finding edges – l combine brightness (luminance actually) & color differences for sharpness Implications? – 11 blues & reds must be brighter than greens & yellows hard to deal with blue edges & blue shapes

Color Sensitivity (cont. ) l As we age – lens yellows & absorbs shorter wavelengths l – fluid between lens and retina absorbs more light l l sensitivity to blue is even more reduced perceive a lower level of brightness Implications Blue text on a dark background to be avoided. We have few shortwavelength sensitive cones in the retina and they are not very sensitive. Older users need brighter colors. 12 Blue text on a dark background to be avoided. We have few shortwavelength sensitive cones in the retina and they are not very sensitive. Older users need brighter colors.

Focus l Different wavelengths of light focused at different distances behind eye’s lens – need for constant refocusing l – l careful about color combinations Pure (saturated) colors require more focusing then less pure (desaturated) – 13 causes fatigue don’t use saturated colors in UIs unless you really need something to stand out (stop sign)

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 14

Color Channels 15

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. 16

Luminance “channel” l l l 17 Visual system extracts surface information Discounts illumination level Discounts color of illumination

Luminance is not Brightness l l l 18 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

Color blindness l Trouble discriminating colors – l around 9% of population (8% males, 1% females) Different photopigment response – reduces capability to discern small color diffs l l Red-green deficiency is best known – lack of either green or red photopigment l l can’t discriminate colors dependent on R & G Color blind acceptable palette? – 19 particularly those of low luminance Yellow-blue, and grey variation ok

Color components l Hue – l Lightness (or value) – – l how much light appears to be reflected from a surface some hues are inherently lighter or darker Saturation – – 20 property of the wavelengths of light (i. e. , “color”) purity of the hue l e. g. , red is more saturated than pink color is mixture of pure hue & achromatic color l portion of pure hue is the degree of saturation

Color components (cont. ) l Hue, Saturation, Value (HSV) model from http: //www 2. ncsu. edu/scivis/lessons/colormodels/color_models 2. html#saturation 21

Color components (cont. ) l Lightness (Value) l Saturation from http: //www 2. ncsu. edu/scivis/lessons/colormodels/color_models 2. html#saturation. 22

Color great for classification white black green red l l l 23 pink yellow blue brown purple Rapid visual yellow green orange grey segmentation Helps determine type Only about six categories

Color great for classification (cont. ) Scatterplot example 24

Color coding/labeling Large areas: low saturation • Widely agreed upon names l Small areas: high saturation l • 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 l Recommended colors for from second set of six coding: 25

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. 26

Color guidelines l Avoid simultaneous display of highly saturated – e. g. , no cyans/blues at the same time as reds, why? l – l desaturated combinations are better pastels Opponent colors go well together – 27 refocusing! (red & green) or (yellow & blue)

Color guidelines (cont. ) l 28 Pick non-adjacent colors on hue circle

Color guidelines (cont. ) l Size of detectable changes in color varies – – l Older users need higher luminance levels to distinguish colors l Hard to focus on edges created by color alone – 29 hard to detect changes in reds, purples, & greens easier to detect changes in yellows & blue-greens use both luminance & color differences

Color guidelines (cont. ) l Avoid red & green in the periphery - why? – l Avoid pure blue for text, lines, & small shapes – – l lack of RG cones there – yellows & blues work in periphery 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 l – 30 e. g. , 2 colors shouldn’t differ only by amount of red helps color-deficient observers

Perception primitives l l 31 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)

Machinery of perception 32

Preattentive processing l 10 msec or better 9812412412349 asdasd 1234918241231241249182313–asd 1 fa 98 13195 sd 0934 -gj 2 -09 -0999653681 ASgg 878188425158237 ASDFG 414251509 sdfkjw 9725792857 osg 72588419990123520597205920 57 u 0 sfg 98760 d. SDF 215723208 SG 2826029582019 dfsg 79827 -0555 33

Preattentive processing l 10 msec or better 9812412412349 asdasd 1234918241231241249182313–asd 1 fa 98 13195 sd 0934 -gj 2 -09 -0999653681 ASgg 878188425158237 ASDFG 414251509 sdfkjw 9725792857 osg 72588419990123520597205920 57 u 0 sfg 98760 d. SDF 215723208 SG 2826029582019 dfsg 79827 -0555 34

Color 35

Orientation 36

Motion 37

Size 38

Simple shading 39

Conjunction (does not pop out) 40

Compound features (do not pop out) 41

Surrounded colors do not pop out 42

More Preattentive channels 43 Shape Length Width Parallelism Enclosure Curvature Spatial grouping Added marks Number

Laws of preattentive display l Must stand out on some simple dimension – – l 44 color, simple shape = orientation, size motion, depth Lessons for highlighting – one of each

Highlighting Texture Using color Using underlining A flying box leads attention Blinking momentarily attracts attention Motion elicits an orienting response 45

Preattentive conjunctions l l l 46 Stereo and color Color and motion Color and position Shape and position In general: spatial location and some aspect of form (color or shape)

Preattentive lessons l l l l 47 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

Scale matters Parafovea 48

UI hall of shame l l l What is the empty button above MC for? Can’t resize Blue for numbers! – goes against all we know l hard to focus on l combined with red eye strain l Grey on grey! – Difficult for some users – Contrast changes after user clicks the buttons! 49