1. Cooper Part II Making Well-Behaved Products Visual Design
Jeff Offutt
SWE 632
User Interface Design and Development
Cooper Ed4, Ch 17
(abbreviated version)

2. Color Wheel – Opposites
See the Java Applet color wheel at:
25-Feb-19
© Jeff Offutt

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

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

5. Color Guidelines
Avoid highly saturated opponent colors at the same time
Use opponent colors for higher contrast (emphasis)
Do not use blue for text, thin lines, and small shapes
Older users need more brightness
Use brighter, spectrum-centered colors for text
(black, white, yellow, red)
Do not require color discrimination in small areas
Use color for relative differences, but not numeric information
Use greater intensity for hues that indicate larger amounts
Use two different background colors to split screen
25-Feb-19
© Jeff Offutt

6. More Color Guidelines Use color to categorize information and controls
Group elements using a common background color
Use color to indicate “regions” in web sites
Use similar colors to imply similar meanings
Use brightness and saturation for highlighting
The same color may have different meanings in different cultures
Use redundant coding of shape and color
Round / green for beginners
Square / blue for intermediate
Diamond / black for advanced
25-Feb-19
© Jeff Offutt

7. VIM with HTML HTML tags Attributes Content Comments Values 25-Feb-19
© Jeff Offutt

8. Clutter is a tax on people who pay attention to details
Avoid too many visual elements
Clutter uses up mental energy
Both in messy rooms and in messy UIs
Avoid complicated visual elements
Smaller and simpler is usually better
Leverage: A visual element that has multiple purposes
An icon that indicates type and that can be opened
Clutter is a tax on people who pay attention to details
25-Feb-19
© Jeff Offutt

9. Principles of Visual Design
Enforce visual comparisons
Show causality
Ensure the quality, relevance and integrity of the content
Show things adjacently in space, not stacked in time
Do not de-quantify quantifiable data
25-Feb-19
© Jeff Offutt

10. Visual Element Summary
A visual interface must be based on visual patterns
Good visual design is
“clear thinking made visible”
(Tufte)
25-Feb-19
© Jeff Offutt