![Page 1: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/1.jpg)
A (Uncolorful) Lecture on Color for UI’s
Use of Color in UI Design (not ready for distribution)
laura leventhal
![Page 2: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/2.jpg)
Reference
• Chapter 14Chapter 14
![Page 3: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/3.jpg)
Introduction
• Color is increasingly important in interface design, especially in the design of interfaces with visual elements.
![Page 4: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/4.jpg)
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.
![Page 5: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/5.jpg)
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.
![Page 6: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/6.jpg)
Edges
• To see form, must have edges. Edges are signaled by a changes in color, brightness or both
• [Demo]
![Page 7: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/7.jpg)
Demo/Edges
Edges are 'created' by a difference in brightness...
color.... or both
![Page 8: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/8.jpg)
Color Terms - Hue
• Hue– what most people mean by 'color'. – The aspect of color most closely related to its
wavelength. Red through violet.
![Page 9: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/9.jpg)
Color Terms - Saturation
• Saturation – Amount of 'noise' (black or white) added to
pure color. – Black, white and gray are completely
destaturated colors (called neutrals)
![Page 10: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/10.jpg)
Color Terms - Lightness/Intensity
• Lightness/Intensity – Amount of light reflected by the object, usually
due to changes in hue and saturation
![Page 11: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/11.jpg)
Color Terms - Brightness
• Brightness– Amount of illumination from external source. – E.g., jeans in sun vs. interior light vs. dark
![Page 12: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/12.jpg)
Color Effects - Surrounding Color1
• Effects of surrounding color:– background colors influence color of object – [Two Demos]
![Page 13: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/13.jpg)
Color Effects - Surrounding Color2
The same color can appear different depending on what other colors surround it.
![Page 14: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/14.jpg)
Color Effects - Surrounding3
![Page 15: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/15.jpg)
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
![Page 16: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/16.jpg)
Contrast Demo (1)
TOO MUCH CONTRAST
TOO LITTLE CONTRAST
![Page 17: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/17.jpg)
Contrast Demo (2)
STILL TOO MUCH CONTRAST
STILL TOO LITTLE CONTRAST
THIS IS PRETTY GOOD.
![Page 18: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/18.jpg)
Contrast Demo (3)
Changes in both color and brightness result in better contrast than just a change in color or brightness
![Page 19: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/19.jpg)
Why is color application difficult?
• Color interacts with its surroundings– - within a window– - between windows– - dynamic displays
![Page 20: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/20.jpg)
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
![Page 21: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/21.jpg)
Why is color application difficult
• Individual differences in perception related to physiology and culture– age– color blindness
![Page 22: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/22.jpg)
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
![Page 23: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/23.jpg)
Why is color application difficult
• Color theory and design is complex
• Color preference is very personal
![Page 24: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/24.jpg)
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
![Page 25: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/25.jpg)
What can be done with color
• Can summarize data – e.g., scientific visualization
• Color as a mnemonic: – Pepto Bismol, Kodak, Coke products
![Page 26: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/26.jpg)
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
![Page 27: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/27.jpg)
Some Heuristics (1)
Warm colors bring objects closer Cool colors make the object retreat and make them appear larger. and seem smaller.
![Page 28: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/28.jpg)
Some Heuristics (2)
Colors look best against a neutral background.
![Page 29: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/29.jpg)
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.”)
![Page 30: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/30.jpg)
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??
![Page 31: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/31.jpg)
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
![Page 32: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/32.jpg)
Some Heuristics (6)
Avoid intense combinations
![Page 33: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/33.jpg)
Some Heuristics (7)
Four or fewer colors is preferred - even if the colors are related.
![Page 34: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/34.jpg)
Color Matters Web Site
• A web site for a graphic designer
• http://www.lavanet/~colorcom
![Page 35: A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal](https://reader030.vdocuments.us/reader030/viewer/2022032704/56649d535503460f94a2f95e/html5/thumbnails/35.jpg)