1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing...
-
date post
21-Dec-2015 -
Category
Documents
-
view
214 -
download
0
Transcript of 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing...
![Page 1: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/1.jpg)
1
CS 544 Human Abilities
Color Perception and Guidelines for DesignPreattentive 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.
![Page 2: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/2.jpg)
2
UI hall of shame
From IBM’s RealCD– Prompt– Button
Black on Black?– Cool! – But you can’t see it!– “click here …” prompt
should not be needed.
![Page 3: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/3.jpg)
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
![Page 4: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/4.jpg)
4
Visible Spectrum
![Page 5: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/5.jpg)
5
Human Visual System
Light passes through lens Focused on retina
![Page 6: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/6.jpg)
6
Retina
covered with light-sensitive receptors– rods
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
– cones less sensitive to light used to sense color 6 million per eye
![Page 7: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/7.jpg)
7
Retina
Center of retina (fovea) has most of the cones – allows for high acuity of objects focused at center
Edge of retina, periphery, is dominated by rods – allows detecting motion of threats in periphery
![Page 8: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/8.jpg)
8
Trichromacy theory
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
other colors are perceived by combining stimulation
![Page 9: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/9.jpg)
9
Color Sensitivity
Really yellow
![Page 10: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/10.jpg)
10
Distribution of cones
Not distributed evenly– mainly reds (64%) & very few blues (4%)
insensitivity to short wavelengths– cyan to deep-blue
Center of retina (high acuity) has no blue cones– small blue objects you fixate on disappear
![Page 11: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/11.jpg)
11
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 Shapes detected by finding edges
– combine brightness (luminance actually) & color differences for sharpness
Implications?– hard to deal with blue edges & blue shapes
![Page 12: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/12.jpg)
12
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
Blue text on a dark background to be avoided. We have few short-wavelength sensitive cones in the retina and they are not very sensitive. Older users need brighter colors.
Blue text on a dark background to be avoided. We have few short-wavelength sensitive cones in the retina and they are not very sensitive. Older users need brighter colors.
![Page 13: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/13.jpg)
13
Focus
Different wavelengths of light focused at different distances behind eye’s lens– need for constant refocusing
causes fatigue
– careful about color combinations
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)
![Page 14: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/14.jpg)
14
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
![Page 15: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/15.jpg)
15
Color Channels
a
Long (red)
Med (green)
Short (blue)
Luminance
Y-B
R-G
![Page 16: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/16.jpg)
16
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.
![Page 17: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/17.jpg)
17
Luminance “channel” Visual system extracts surface information Discounts illumination level Discounts color of illumination
![Page 18: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/18.jpg)
18
Luminance is not Brightness 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
![Page 19: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/19.jpg)
19
Color blindness
Trouble discriminating colors– around 9% of population (8% males, 1% females)
Different photopigment response– reduces capability to discern small color diffs
particularly those of low luminance
Red-green deficiency is best known– lack of either green or red photopigment
can’t discriminate colors dependent on R & G
Color blind acceptable palette?– Yellow-blue, and grey variation ok
![Page 20: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/20.jpg)
20
Color components
Hue– property of the wavelengths of light (i.e., “color”)
Lightness (or value)– 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
![Page 21: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/21.jpg)
21
Color components (cont.)
Hue, Saturation, Value (HSV) model
from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation
![Page 22: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/22.jpg)
22
Color components (cont.)
Lightness (Value) Saturation
from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.
![Page 23: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/23.jpg)
23
Color great for classification
Rapid visual segmentation
Helps determine type Only about six
categories
white
black
redgreen
yellow
yellow
green
blue brown
pink
purple
orange
grey
![Page 24: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/24.jpg)
24
Color great for classification (cont.)
Scatterplot example
![Page 25: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/25.jpg)
25
Color coding/labeling Large areas: low saturation Small areas: high saturation
Recommended colors for coding:
• Widely agreed upon names• 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 from second set of six
![Page 26: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/26.jpg)
26
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.
![Page 27: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/27.jpg)
27
Color guidelines
Avoid simultaneous display of highly saturated– 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)
![Page 28: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/28.jpg)
28
Color guidelines (cont.)
Pick non-adjacent colors on hue circle
![Page 29: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/29.jpg)
29
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 luminance levels to distinguish colors
Hard to focus on edges created by color alone – use both luminance & color differences
![Page 30: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/30.jpg)
30
Color guidelines (cont.)
Avoid red & green in the periphery - why?– lack of RG cones there – yellows & blues work in
periphery
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
![Page 31: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/31.jpg)
31
Perception primitives
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)
![Page 32: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/32.jpg)
32
Machinery of perception
a
Parallel processingof orientation, texture,color and motionfeatures
Object Identification,Working Memory
Detection of 2D patterns,contours and regions
a
AB
C
D
![Page 33: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/33.jpg)
33
Preattentive processing
10msec or better
9812412412349asdasd1234918241231241249182313–asd1fa98
13195sd0934-gj2-09-0999653681ASgg878188425158237ASDFG
414251509sdfkjw9725792857osg72588419990123520597205920
57u0sfg98760dSDF215723208SG2826029582019dfsg79827-0555
a
89739057092794057962976509829408028085080830802809850-802808567847298872ty458202094757720021789843890r455790456099272188897594797902855892594573979209
![Page 34: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/34.jpg)
34
Preattentive processing
10msec or better
9812412412349asdasd1234918241231241249182313–asd1fa98
13195sd0934-gj2-09-0999653681ASgg878188425158237ASDFG
414251509sdfkjw9725792857osg72588419990123520597205920
57u0sfg98760dSDF215723208SG2826029582019dfsg79827-0555
aa
897 90570927940579629765098294080280850808 0802809850-802808567847298872ty45820209475772002178984 890r45579045609927218889759479790285589259457 979209
33
33
![Page 35: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/35.jpg)
35
Color
![Page 36: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/36.jpg)
36
Orientation
![Page 37: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/37.jpg)
37
Motion
![Page 38: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/38.jpg)
38
Size
![Page 39: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/39.jpg)
39
Simple shading
![Page 40: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/40.jpg)
40
Conjunction (does not pop out)
![Page 41: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/41.jpg)
41
Compound features (do not pop out)
![Page 42: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/42.jpg)
42
Surrounded colors do not pop out
![Page 43: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/43.jpg)
43
More Preattentive channelsLength Width
Parallelism Curvature
NumberAdded marksSpatial grouping
Shape
Enclosure
![Page 44: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/44.jpg)
44
Laws of preattentive display
Must stand out on some simple dimension– color, – simple shape = orientation, size– motion, – depth
Lessons for highlighting – one of each
![Page 45: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/45.jpg)
45
Highlighting
Blinking momentarily attracts attention
A flying box leads attention
TextureTexture Using colorUsing underlining
Blinking momentarily attracts attention
Motion elicits an orienting response
![Page 46: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/46.jpg)
46
Preattentive conjunctions
Stereo and color Color and motion Color and position Shape and position
In general: spatial location and some aspect of form (color or shape)
![Page 47: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/47.jpg)
47
Preattentive lessons
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
![Page 48: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/48.jpg)
48
Scale matters
Parafovea
![Page 49: 1 CS 544 Human Abilities Color Perception and Guidelines for Design Preattentive Processing Acknowledgement: Some of the material in these lectures is.](https://reader031.fdocuments.in/reader031/viewer/2022032310/56649d625503460f94a44919/html5/thumbnails/49.jpg)
49
UI hall of shame What is the empty button above
MC for? Can’t resize Blue for numbers!
– goes against all we know hard to focus on combined with red eye strain
Grey on grey!– Difficult for some users– Contrast changes after user
clicks the buttons!