Ch 9 Colors

Yonglei Tao

School of Computing & Info Systems

GVSU

Example – Use of Colors

Using Color

As a formatting aid Relating elements in groups Breaking up separate groups Highlighting important information

As a visual code to identify Screen elements Logical structure of ideas, processes, and

sequences Source or status of information

Using Color

Aid in understanding, remembering, and recalling information

Color-coded dials

Using Color

Used to catch user’s attention

1-6

Using Color

Clarification, Relation, and Differentiation

Ethernet wires

1-7

Color and Performance

Color improves performance in tasks Recall Search-and-locate Retention Decision judgment

Using Color

Search

Color Concerns

It has been found that the colors red, blue, green, and yellow are the most beneficial in learning environments

Color Concerns (Cont.)

Number of Colors To remember a color and then recognize it later,

we should use only a few distinct colors To be able to tell the difference between two

adjacent color-coded objects, we can use more colors

Interface colors should never distract the user or compete with content

1-11

Color Background

The perceived color of an object is affected by the color of its background

1-12

Color Pairing

Some specific color combinations cause unique problems: Colors at opposing ends of the spectrum such as red and

blue require the eye to use two different focal lengths Positive contrast makes characters appear to glow

A test of 24 color combinations found that error rates ranged from 1 to 4 errors per 1,000 characters read Low: black on light blue, blue on white High: magenta on green, green on white

1-13

Color Combinations to Avoid

Saturated yellow and green

Saturated yellow on green

Yellow on white Yellow on white

Blue on black Blue on black

Green on white Green on white

Saturated red on blue Saturated red on blue

Saturated red on green Saturated red on green

Magenta on green Magenta on green

Saturated blue on green Saturated blue on green

Yellow on purple Yellow on purple

Red on black Red on black

Magenta on black Magenta on black

Color Tips

Use contrasting colors to emphasize separation Such as red and green, blue and yellow

Use similar colors to emphasize similarity Such as orange and yellow, blue and violet.

Use bright colors to attract attention Use less bright colors to deemphasize

elements

Color Tips (Cont.)

Use warm colors to indicate necessary actions Red, orange, yellow

Use cool colors to show status or background information Green, blue, violet, purple

Use color in a thoughtful and consistent way Be careful about coloring pairings

Color Tips (Cont.)

Make default conservative neutral backgrounds (gray, white, off-white) dark foreground (black, dark blue)

Limit the number of colors used four or fewer colors in a window no more than seven in a system

Use bright colors in small amounts Allow users to pick their colors

Uses of Color to Avoid

Relying on color exclusively Use too many colors in a display or the

colors are too bright May confuse or disturb users

Low-brightness colors for extended viewing Using color in unexpected ways

Individual and Cultural Issues

Factors affecting color perception Culture Age Fatigue Emotions Light sources

Color deficiency and human subjectivity must be considered important factors in interaction design

1-19

Color Deficiencies

Types of Color Blindness

Normal color vision Deuteranopic color vision