Human%20Perceptual%20Abilities

1
Human Perceptual Abilities

• Marti Hearst (UCB SIMS)
• SIMS 213, UI Design Development
• February 9, 1999

2
Outline

• Human visual system
• Color
• Color perception
• Color deficiency
• Guidelines for design with color
• Preattentive Processing
• Visual Illusions
• Accuracy of Interpretation of Visual Properties

3
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.
4
Visible Spectrum
5
Human Visual System

• Light passes through lens
• Focused on retina

6
Retina

• Retina covered with light-sensitive receptors
• rods
• primarily for night vision perceiving movement
• sensitive to broad spectrum of light
• cant discriminate between colors
• sense intensity or shades of gray
• cones
• used to sense color

7
Retina
8
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

9
Color Perception via Cones

• Photopigments 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
• other colors are perceived by combining
  stimulation
• re-coded sent to brain

10
Color Sensitivity
Really yellow
11
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

12
Color Sensitivity Image Detection

• Most sensitive to the center of the spectrum
• blues reds must be brighter than greens
  yellows
• Brightness determined mainly by RG
• 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

13
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?
• dont rely on blue for text or small objects!

14
Focus

• Different wavelengths of light focused at
  different distances behind eyes 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)

15
Color Deficiency (also known as color
blindness)

• 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 ? ?
• cant discriminate colors dependent on R G

16
What is Wrong with this Design?

• Dialog box
• ask if you want to delete
• yes (green)
• no (red)

17
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

18
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

19
Color Components (cont.)

• Lightness

• Saturation

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

21
Pick Non-adjacent Colors on the Hue Circle
22
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

23
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 shouldnt differ only by amount of
  red
• helps color-deficient observers

24
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

25
Preattentive Processing

• All Preattentive Processing figures from Healey
  97 (on the web at http//www.cs.berkeley.edu/heal
  ey/PP)

26
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

27
Example Color Selection
Viewer can rapidly and accurately
determine whether the target (red circle) is
present or absent. Difference detected in color.
28
Example Shape Selection
Viewer can rapidly and accurately
determine whether the target (red circle) is
present or absent. Difference detected in form
(curvature)
29
A live demonstration
30
Pre-attentive Processing

• lt 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.

31
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.
32
Example Conjunction of Features
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
33
Example Form vs. Hue
Hue based boundary determined preattentively
regardless of variation in form (left). However,
the converse is not true (right).
34
Example Hue vs. Brightness
Random intensity of brightness interferes with
boundary detection (left). Uniform intensity
allows for preattentive boundary recognition
(right).
35
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

36
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

37
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
38
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

39
Visual Illusions

• People dont 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.

40
Illusions of Linear Extent

• Mueller-Lyon (off by 25-30)
• Horizontal-Vertical

41
Illusions of Area

• Delboeuf Illusion
• Height of 4-story building overestimated by
  approximately 25

42
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?
43
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

44
More Gestalt Laws

• Figure and Ground
• Escher illustrations are good examples
• Vase/Face contrast
• Subjective Contour

45
Visual Illusion Using Gestalt Properties
46
Which Properties for What Information Types?

• Weve 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

47
Accuracy Ranking of Quantitative Perceptual
Tasks(Mackinlay 88 from Cleveland McGill)
Position
More Accurate
Length
Angle
Slope
Area
Volume
Less Accurate
Color
Density
48
Interpretations of Visual Properties

• Some properties can be discriminated more
  accurately but dont have intrinsic meaning
• (Senay Ingatious 97, Kosslyn, others)
• Density (Greyscale)
• Darker -gt More
• Size / Length / Area
• Larger -gt More
• Position
• Leftmost -gt first, Topmost -gt first
• Hue
• ??? no intrinsic meaning
• Slope
• ??? no intrinsic meaning

49
Example Putting It Together(Healey 98)
Height level of cultivation Greyscale
vegetation type Density ground type
50
Whats Wrong with this Picture?
51
Whats 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.
52
Next Time

• Cognitive abilities
• read Dix 1.3-1.7