effective use of color

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)