A (Uncolorful) Lecture on Color for UI’s

Use of Color in UI Design (not ready for distribution)

laura leventhal

Reference

• Chapter 14Chapter 14

Introduction

• Color is increasingly important in interface design, especially in the design of interfaces with visual elements.

Color vision

• We have already skirted around the topic of color vision.

• Although about 8000 different colors can be distinguished comparatively, only 8 to 10 different colors can be identified accurately without training when viewed in isolation by a person with normal color vision.

Color Vision (2)

• People’s sensitivity to color is not uniform across their field of view. The eye is not sensitive to color at the periphery of vision.

– The eye is the least sensitive to red, green and yellow light at the periphery of color vision and most sensitive to blue light.

– The retina is not equally sensitive to all colors - it is best adapted to the perception of yellow-green light, and color is only well perceived in fovea (central) vision.

• Color perceptions are affected by fatigue. Prolonged exposure to one color like red causes the receptors to red to fatigue and we see images in green

• HCI Consequence – staring at image in one color may cause fatigue on that color so if that color is important to the meaning of the presentation, the user may start to see after images or other unintended colors.

Edges

• To see form, must have edges. Edges are signaled by a changes in color, brightness or both

• [Demo]

Demo/Edges

Edges are 'created' by a difference in brightness...

color.... or both

Color Terms - Hue

• Hue– what most people mean by 'color'. – The aspect of color most closely related to its

wavelength. Red through violet.

Color Terms - Saturation

• Saturation – Amount of 'noise' (black or white) added to

pure color. – Black, white and gray are completely

destaturated colors (called neutrals)

Color Terms - Lightness/Intensity

• Lightness/Intensity – Amount of light reflected by the object, usually

due to changes in hue and saturation

Color Terms - Brightness

• Brightness– Amount of illumination from external source. – E.g., jeans in sun vs. interior light vs. dark

Color Effects - Surrounding Color1

• Effects of surrounding color:– background colors influence color of object – [Two Demos]

Color Effects - Surrounding Color2

The same color can appear different depending on what other colors surround it.

Color Effects - Surrounding3

Color Effects - Surrounding Color4

• contrast: – gray letters on light background appear dark,

but on dark background, appear light

• bleeding: – colored area takes on color of surround

Contrast Demo (1)

TOO MUCH CONTRAST

TOO LITTLE CONTRAST

Contrast Demo (2)

STILL TOO MUCH CONTRAST

STILL TOO LITTLE CONTRAST

THIS IS PRETTY GOOD.

Contrast Demo (3)

Changes in both color and brightness result in better contrast than just a change in color or brightness

Why is color application difficult?

• Color interacts with its surroundings– - within a window– - between windows– - dynamic displays

Why is color application difficult

• External conditions affect perception– ambient light– display hardware/software characteristics

• e.g., what we can display on color monitor is less than half of visible colors

Why is color application difficult

• Individual differences in perception related to physiology and culture– age– color blindness

Why is color application difficult

• Cultural significance of color– e.g., in some cultures white signifies death and

in other cultures, white is associated with light and purity

• Psychological and learned associations to color

Why is color application difficult

• Color theory and design is complex

• Color preference is very personal

What *can* be done with color?

• Use color to impart information– can be redundant or the only source of

information • Example: color coding age of files

What can be done with color

• Can summarize data – e.g., scientific visualization

• Color as a mnemonic: – Pepto Bismol, Kodak, Coke products

What can be done with color

• Establish an environment or aesthetic (feeling)– e.g., desktops

• Color may a critical component of the task e.g., graphic design

Some Heuristics (1)

Warm colors bring objects closer Cool colors make the object retreat and make them appear larger. and seem smaller.

Some Heuristics (2)

Colors look best against a neutral background.

Some Heuristics (3)

Light blue letters are hard to see. So is any small blue object.

Beware of blue. It is difficult to distinguish

(the message says “light blue letters are hard to see. So aresmall blue objects.”)

Some Heuristics (4)

Don't use color as a critical clue for small objects. Color is hard to distinguish in small areas.

What color are these dots??

Some Heuristics (5)

Choose palettes of related colors and work within that palette. Better yet, get guidance on colors!

Related warm colors

Related cool colors

Some Heuristics (6)

Avoid intense combinations

Some Heuristics (7)

Four or fewer colors is preferred - even if the colors are related.

Color Matters Web Site

• A web site for a graphic designer

• http://www.lavanet/~colorcom