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

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

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)

Contrast Demo (2)

Contrast Demo (3)

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)

Some Heuristics (2)

Some Heuristics (3) (the message says “light blue letters are hard to see. So are small blue objects.”)

Some Heuristics (4)

Some Heuristics (5)

Some Heuristics (6)

Some Heuristics (7)

Color Matters Web Site A web site for a graphic designer