214. CS 321: Human-Computer Interaction Design
Lesson Seventeen
Visual Interface Design
Logical Flow
Color
Chapter 17

215. STOP! GO! Non-Textual Visual Cues
Non-textual visual cues can often mean the difference between a clear interface and a confusing one.
What does this icon mean?
Which multiple-selection widget is less confusing and less troublesome?
Why is it shaped like a hamburger?
Does color make a difference here?
STOP!
GO!
CS 321
Lesson Seventeen
Visual Interface Design
Page 215

216. Logical Flow
An interface possesses a visual structure that should have a logical flow, essentially the natural sequence by which users will want to interact with its components.
If the user’s logical flow path through the application results in eye movements that don’t follow a top-to-bottom, left-to-right pattern, then a redesign might be in order.
CS 321
Lesson Seventeen
Visual Interface Design
Page 216

217. The section of the retina that reacts to color is called the fovea.
The thin layer of nerve cells at the back of the eye is called the retina.
The light sensor cells capable of working over a wide range of illumination levels and providing quick response to changes are called rods.
The section of the retina that reacts to color is called the fovea.
High resolution color imaging is provided by light sensor cells called cones, located in the fovea.
The “Tristimulus Theory of Color” hypothesizes that each cone is sensitive to either red, green, or blue.
CS 321
Lesson Seventeen
Visual Interface Design
Page 217

218. Color
The visible light spectrum ranges from about 400 to 700 nanometers in the electromagnetic energy spectrum.
Empirical studies indicate that the cones in the eye have different levels of sensitivity to different colors, indicating that the eye’s response to pure blue light is much less strong than its response to pure red or green light.
The RGB phosphors used in plasma displays and the RGB filters used in LCD displays do not exactly produce “pure” shades of red, green, and blue, as indicated by the eye’s response to the activated pixel colors.
CS 321
Lesson Seventeen
Visual Interface Design
Page 218

219. Highway Colors
Traffic signs demonstrate the application of color based upon the urgency of the message.
Blue: Traveler service markers
Green: Guide and information signs
Brown: Recreational/cultural markers
Yellow: Permanent traffic control signs
Orange: Temporary traffic control signs
Red: Urgent warning signs
CS 321
Lesson Seventeen
Visual Interface Design
Page 219

220. Corporate Logo Colors
Companies often choose logo colors based on the positive emotions evoked (and hopefully avoiding their negative connotations).
Mysterious, sensual, dramatic
Aloof
Purple
Calming, serene, strong
Melancholy, distant
Blue
Fresh, lively, natural
Drab, moldy, sickening
Green
Sunny, energetic, stimulating
Hazardous, cowardly
Yellow
Vital, glowing, warm
Raucous, frivolous
Orange
Passionate, stimulating, energetic
Violent, dangerous, aggressive
Red
CS 321
Lesson Seventeen
Visual Interface Design
Page 220

221. Color Blindness
GUI developers must be sensitive to the fact that 8% of men (but only ½% of women) experience some form of color-blindness.
Color-blindness is really just a deficiency in one’s sensitivity to particular colors, notably red-green or yellow-blue.
The above image as viewed by someone with a red-green deficiency (deuteranopia)
The above image as viewed by someone with yellow-blue deficiency (tritanopia)
CS 321
Lesson Seventeen
Visual Interface Design
Page 221

222. Color Interface Blindness
Relying exclusively on color to distinguish interface features may result in confusion for any color-blind users.
Color combinations that lend themselves to misinterpretation among the color-blind (such as the red-green color-blindness demonstrated here) should be avoided.
Additional visual distinctions, such as shapes and accompanying text, may be worthwhile.
CS 321
Lesson Seventeen
Visual Interface Design
Page 222

223. Advantages of Color
Color displays can be attractive to users and can improve task performance.
Color can soothe users or attract attention.
Color can accentuate an otherwise bland display.
Color can facilititate subtle discriminations in complex displays.
Color can emphasize the logical organization of information within a display.
CS 321
Lesson Seventeen
Visual Interface Design
Page 223

224. Disadvantages of Color
Color Connotations:
Cultural color associations might be misleading.
Green, with its positive connotation, is associated with the Yes button, but is deleting all records a good thing?
Color Contrast:
Adequate contrast between foreground and background is essential for ensuring proper symbol detection.
Color Distraction:
Excessive color in secondary display components may distract from the interface’s main components.
CS 321
Lesson Seventeen
Visual Interface Design
Page 224

225. Accommodation
The eye’s focal system accommodates near objects by causing the ciliary muscle to contract, the pupil to constrict, and the lens to thicken.
CS 321
Lesson Seventeen
Visual Interface Design
Page 225
The closer an object is, the more energy must be exerted to execute this “accommodation”.

226. Complementary colors usually exhibit adequate contrast.
Color Contrast
Low color contrast makes it harder for the eyes to focus, causing an excess of accommodation, which produces visual fatigue.
Complementary colors usually exhibit adequate contrast.
Red & Cyan
Blue & Yellow
Green & Magenta
Extremely saturated colors also force the eye lenses to continually readjust, which can be alleviated by desaturating the colors.
CS 321
Lesson Seventeen
Visual Interface Design
Page 226