A topic that came up on our design list almost a year ago was the use color in UI to categorize or distinguish between items. The discussion was heated and long and I'm not sure we came to any definitive conclusions and I'm reviving it here in the hopes that we might come out with a workable design "philosophy" on the subject which we can apply in practice to the Chandler UI.
Given People can only hold 5-9 items of information in their heads at any given time.
Given that, color, unlike text, has a limited capacity as a way to distinguish between items.
Example: Encoding even just 13 states of America with color versus Text
Casper, WY
Dodge city, KS
International Falls, MN
Ashland, WI
Rapid City, SD
White Plains, NY
Lewiston, ID
Moscow, ID
Billings, MT
Tuma, AZ
St. George, UT
Portland, ME
Portland, OR
Johnson City, TN The color spectrum itself only has 5 visually distinct colors: Red/Purples, Red/Oranges, Yellow, Green, Blue. Anything beyond that and you start to "double-up", creating hierarchical color groupings that may or may not mean anything with respect to the data. Looking at the list of cities again, do you pick up a secondary layer of groupings which in this data set, has no meaning at all.
Given all of these limitations however, color remains a powerful way to visually express metadata, if used correctly.
1. To aid users in remembering what each color represents by limiting the use of color to semantically appropriate metadata:
Red: Warning, Bad things,
Green: Positive,
2. Make use of color's "hierarchical" nature and exploit the use of Color families to impose structure on your metadata.
Case study Topographical maps are a wonderful example of both hiearchical color display and semantically meaningful color mappings.
Hue families
Greens: Verdant, farmland
Yellows: Deserts
Browns: Mountains
Blues: Bodies of water Saturation of the colors in each of these color families represents altitude and depth. This map is taken from Travel Kamchatka
These same principles apply to other visual mechanism for communicating metadata:
Casper, WYDodge city, KS
International Falls, MN
Ashland, WI
Rapid City, SD
White Plains, NY
Lewiston, ID
Moscow, ID
Billings, MT
Tuma, AZ
St. George, UT
Portland, ME
Portland, OR
Johnson City, TN The color spectrum itself only has 5 visually distinct colors: Red/Purples, Red/Oranges, Yellow, Green, Blue. Anything beyond that and you start to "double-up", creating hierarchical color groupings that may or may not mean anything with respect to the data. Looking at the list of cities again, do you pick up a secondary layer of groupings which in this data set, has no meaning at all.
- Purples: International Falls, Lewiston, Moscow and St. George
- Blues: Dodge city, Rapid City, White Plains, Portland
- Red/Oranges: Casper and Portland, Tuma
- Green: Ashland
- Rellow: Johnson City
Given all of these limitations however, color remains a powerful way to visually express metadata, if used correctly.
1. To aid users in remembering what each color represents by limiting the use of color to semantically appropriate metadata:
Red: Warning, Bad things,
Green: Positive,
2. Make use of color's "hierarchical" nature and exploit the use of Color families to impose structure on your metadata.
Case study Topographical maps are a wonderful example of both hiearchical color display and semantically meaningful color mappings.
Hue families Greens: Verdant, farmland
Yellows: Deserts
Browns: Mountains
Blues: Bodies of water Saturation of the colors in each of these color families represents altitude and depth. This map is taken from Travel Kamchatka
These same principles apply to other visual mechanism for communicating metadata:
- Shapes and icons
- Texture
- Location on the screen
- Size
Log In
Except where otherwise noted, this site and its content are licensed by OSAF under an Creative Commons License, Attribution Only 3.0.
See list of page contributors for attributions.
See list of page contributors for attributions.