adapted from slide by james landay human perceptual abilities marti hearst (ucb sims) sims 213, ui...
Post on 21-Dec-2015
217 views
TRANSCRIPT
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