1. The Use of Color in User Interfaces
Jeff Offutt
SWE 205
Software Usability and Design

2. How the Eyes See Color Focal point Lens Lens adjusted for green Retina
Lens adjusted for red
22-Nov-18
© Jeff Offutt

3. See the Java Applet color wheel at:
Color Spectrum
Color
Purple
Blue
Green
Yellow
Orange
Red
Wavelength
< 430 nm
450 – 480 nm
500 – 550 nm
570 – 590 nm
610 – 630 nm
> 640 nm
See the Java Applet color wheel at:
22-Nov-18
© Jeff Offutt

4. Color Wheel – Opposites
22-Nov-18
© Jeff Offutt

5. Notes on Human Eyes Lens are adjusted for green when relaxed
Reds are easiest to discriminate
Blues are hardest to discriminate
The number of colors we can perceive shrinks as we age
22-Nov-18
© Jeff Offutt

6. Color Lightness Wavelengths reflected by a ripe tomato 100 75 50 25
350
400
450
500
550
600
650
700
22-Nov-18
© Jeff Offutt

7. Color Contrast Relative brightness of signal over background
Greater contrast – better perception
Opponent colors yield more contrast
(orange:blue, red:green)
Dark on light has more contrast than light on dark
This is true on paper and on computer screens
This effect is reversed when projecting
22-Nov-18
© Jeff Offutt

8. Color Contrast Relative brightness of signal over background
Greater contrast – better perception
Opponent colors yield more contrast
(orange:blue, red:green)
Dark on light has more contrast than light on dark
This is true on paper and on computer screens
This effect is reversed when projecting
22-Nov-18
© Jeff Offutt

9. Guidelines for Using Color
Avoid bold opponent colors at the same time
Use opponent colors only for highlighting
Do not use blue for text, thin lines, and small shapes
Older users need more brightness
Use dark on light when printing and on-screen
Light on dark when projecting
Use bright, spectrum-centered colors for text
(black, white, yellow, red)
Use different background colors to split screen
22-Nov-18
© Jeff Offutt

10. Guidelines for Using Color (2)
Use color to categorize information and controls
Group related elements by using a common background color
Use color to highlight regions in web sites
Use brightness and saturation for highlighting
Use redundant coding of shape and color
Round / green for beginners
Square / blue for intermediate
Diamond / black for advanced
22-Nov-18
© Jeff Offutt

11. VIM with Color HTML tags Attributes Content Comments Values 22-Nov-18
© Jeff Offutt

12. Color can improve usability Color is often over-used
Conclusions
Color can improve usability
Color is often over-used
22-Nov-18
© Jeff Offutt