effective use of color
DESCRIPTION
Effective Use of Color. IS 485, Professor Matt Thatcher. Agenda. Administrivia Use of color in design Other human abilities. Color as a Design Element. We wish to seek means through which the careful use of color can enhance human performance when dealing with computer displays - PowerPoint PPT PresentationTRANSCRIPT
Effective Use of Color
IS 485, Professor Matt Thatcher
2
Agenda Administrivia Use of color in design Other human abilities
3
Color as a Design Element We wish to seek means through which the
careful use of color can enhance human performance when dealing with computer displays
The meaningless introduction of color to an interface can reduce user performance to 1/3 of what it was without color
4
Physiology of the Eye Physical structure of the eye Limits of perception Guidelines for use of color
5
Physiology of the Eye Lens is not color corrected
chromostereopsis, produces 3D effect
White Light
Lens
Retina(separated wavelengths)
6
Focus on Blue Light
Lens
Retina
Focus on Red Light
Lens
Retina
7
Implication of Chromostereopsis Spectrally extreme colors produce
eye strain (refocusing)
8
Visible Spectrum
9
Physiology of the Eye Composition of the eye
(retina), wavelength sensitivity
65%
2%33%
RodsB&W
Conescolor
10
Physiology of the Eye
Lens is not color corrected, Murch, 1984
Adjacent, opposite colors produce eye strain, Schneiderman, 1992
Cone composition of the eye, Murch, 1984
Composition of the Eye
65%
2%33%
11
The Aging Process Lens tends to yellow and absorbs
shorter wavelengths– causing increased insensitivity to blue
Fluids in the eye suffer from reduced transparency– Perceive a lower level of brightness
Implications– don’t rely on blue for text or small objects– older users need brighter colors
12
Color Deficiency(or Color Blindness)
Trouble discriminating colors Percentage of population affected
– men: 8 - 10%– women: 0.5 - 1.5 %
Shape and contours defined by color alone can appear invisible
Most common color deficiency– R&G!
13
Problem for Color Deficient Users
14
Color Wheel
15
Effective Color Combinations Opponent colors go well together
– complementary colors (R&G or B&Y)
Pick non-adjacent colors
16
Poor Color Contrast
17
Color Illusions Color adaptation
– colors appear less saturated after prolonged exposure
McCullough effect– shifts in color perception toward
complementary colors
18
19
Simultaneous Contrast
20
Commonality/Difference of Color by Profession
Machine industry: white = hot Chemical engineer: red=hot, blue=cold Medical: green, purple = tumor red, yellow = normal Control engineers: green = safe Financial: red=loss, black=gain, green = profitable Health care: green = infected Map makers: blue=water, green=forests,
yellow=deserts Automobile industry: green=go, yellow=caution,
red=stop
21
Difference of Color by Culture
Culture Red Yellow GreenBlue
European danger caution,coward safe,sour masculine
Japanese anger, danger grace,nobility youth villany
Chinese joy,festive honor,royalty
Arabic happiness, prosperity strength virtue,faith
22
Poor Color Coding
23
Experimental Results
0246
Number of Colors
Search Time
24
Difference in Color Source of colors Texture or finish of surface Ambient light sources Size, orientation of surface Other colors in field of vision Distance from object
25
Color and Commercialism Software now evaluated based on its
interface Competition and focus may not be
functionality, but usability
26
Review of Color Guidelines Avoid the simultaneous display of spectrally
extreme colors Avoid red and green in the periphery of a large-
scale display– lack of RG cones there -- yellows & blues work in periphery
Avoid pure blue for text, thin lines, and small shapes
Opponent (or complementary) colors on the color wheel go well together
Older operators need higher brightness levels to perceive and distinguish colors
Ensure that color coding supports the user and the task
Use color as a “redundant” clue
27
The Best Advice Color can be very helpful, but Pay attention to
– how colors combine– human perception– people with color deficiency– established color coding
Best advice– perform user, task, environment analysis– conduct user tests– use color sparingly
28
compared to
Use Color Sparingly
29
Human Abilities(Some More Interesting Stuff)
Fitts’ Law– moving hand is a series of microcorrections
» correction takes Tperception + Tcognition + Tmotor = 240 msec
– time Tpos to move the hand (or mouse) to target size S which is distance D away is given by:
» Tpos = a + b log2 (D/S + 1)
– summary» time to move the hand depends only on the relative
precision required
30
Fitts’ Law Example
Which will be faster on average?– pie menu (bigger targets & less distance)
TodaySundayMondayTuesday
WednesdayThursday
FridaySaturday
Pop-up Linear Menu
Pop-up Pie Menu
31
Simple Experiment Volunteer Start saying colors you see in list of
words– when slide comes up– as fast as you can
Say “done” when finished Everyone else time it…
32
ZYP
QLEKF
SUWRG
XCIDB
WOPR
ZYP
QLEKF
XCIDB
SUWRG
WOPR
SUWRG
ZYP
XCIDB
QLEKF
WOPR
QLEKF
WOPR
ZYP
XCIDB
SUWRG
33
Simple Experiment Do it again Say “done” when finished
34
RED
BLACK
YELLOW
BLUE
RED
GREEN
YELLOW
BLACK
BLUE
BLACK
RED
YELLOW
GREEN
BLUE
GREEN
BLUE
RED
YELLOW
BLACK
GREEN
35
Memory
Interference– two strong cues in working memory– link to different chunks in long term memory
Why learn about memory?– know what’s behind many HCI techniques– helps you understand what users will “get”– aging population of users
36
Next Class Web Design Patterns (Homepage)