Techniques & Tools for Using
Color In Computer Interface Design
by Peggy Wright,
Diane Mosser-Wooley, and
Bruce Wooley
Abstract
Contemporary computers predominantly employ graphical user interfaces (GUIs) and color is a major component of the GUI. Every man-machine interface is composed of two major parts: the man and the machine [4]. Color interfaces are no different in that they are also based on two parts, the Human Visual System (HVS) and a color display system. A theoretical examination of these two components establishes a foundation for developing practical guidelines for color interfaces. This paper will briefly examine theoretical aspects of both components and established techniques and tools for the effective use of color for software interface design.
Motivation
Color has a major impact on human-computer interaction: if not positive, then negative. According to Murch, a well-known human factors researcher, "Color can be a powerful tool to improve the usefulness of an information display in a wide variety of areas if color is used properly. Conversely, the inappropriate use of color can seriously reduce the functionality of a display system." [13]. Color is a major component in GUIs. Due to the proliferation of GUI applications on PCs, Macs, and Unix workstations, the examination of color is pertinent to human computer interaction (HCI).
Appropriate color use can aid user memory and facilitate the formation of effective mental models. As Murch noted above, the effective use of color can be a powerful tool. However, ineffective use of color can degrade an application's performance and lessen user satisfaction. Due to these issues, we feel the effective use of color in computer interfaces is an important HCI topic that needs to be examined when considering interface design.
Fundamentals of Color
To understand the potential of color in interfaces, we need to examine some fundamental characteristics of color perception. The primary fundamental characteristics we discuss here include various color models, the human visual system, physiological principles of color, and color effects such as illusions and color combinations.
There are several color models that are organized into two basic divisions [3]. These divisions are perceptually-based models and display-based models. As you might guess from these names, the first is organized similarly to the way we perceive color, and the second is based on the characteristics of a display device.
The perceptually based models are known as HSV (hue, saturation, and value) and HLS (hue, light, and saturation). Hue is the spectral wavelength composition of color that produces the colors we see, such as orange, blue, etc. Saturation (chroma) is the relative purity of the color on a scale from gray to the most vibrant tone of the particular color. Value is the strength or darkness of the color. Lightness, also referred to as brightness, refers to the amount of light energy creating the color. The HSV system is based on the Munsell color system used by artists, designers, and manufacturers [8]. HLS was developed at Tektronix in 1978 [14] to provide a more perceptual model than the display-based model Tektronix was using at the time.
The most common display-based models are RGB (red, green, blue) and YIQ/YUV. RGB is used for computer monitor display, and YIQ/YUV is used for TV broadcast. The International Commission on Illumination is a world-wide organization that developed the first version of the spectrally-measured model known as CIE in 1931. CIE is a precise spectral measurement used to pinpoint colors and remove color ambiguity. The CIE model is physically-based, therefore, it does not fit well into either the perceptually-based or the display-based categories.
All colors displayed on a computer must be translated into the RGB color space (see Figure 1). Unfortunately there is not a one-to-one mapping from the perceptually-based models to the display-based. This fact can explain some of the difficulties encountered when we try to recreate just the right color for an interface screen. It is not always possible to get the exact shade. The CIE model allows translations from HSV to RGB.
The human eye contains a lens and a retina. The retina contains light sensitive receptors known as rods and cones. The primary purpose of the rods is to provide night vision, while the cones work at higher levels of light intensity. The cones contain photopigments, also known as photoreceptors, which are sensitive to red, green, or blue. According to Murch [8], roughly 64% of the cones contain red photopigments, 32% contain green, and only about 2% contain blue photopigments. The physiological properties of the nervous system dictate the sensation of color. Humans are sensitive to a range of wavelengths. Wavelengths are not colored, yet color results from the interaction of light and our nervous system. Wavelengths that produce different colors are focused at different distances behind the lens.
The lens does not transmit all wavelengths in the same way, exhibiting less sensitivity to the shorter wavelengths, which has the effect of absorbing blues. Conversely, we are more sensitive to the longer wavelengths, which is exhibited by an increased sensitivity to yellows and oranges. Oddly enough, we can see blues better in the periphery than in the foreground due to the physical distribution of blue photoreceptors [8].
Consequent to the physical organization of the eye are interesting effects or illusions caused by certain color organizations or combinations [1], [3]. Due to the lack of blue photoreceptors, thin blue lines (like blue text) tend to blur, and small blue objects tend to disappear when we try to focus on them [8], [12]. Colors that differ only in the amount of blue do not produce clear edges. For example, colors with the same amount of green and red that vary only in the amount of blue produce fuzzy boundaries. Contrast of adjacent colors can create an easily observed illusion. Two objects of the same color may appear markedly different in color depending on background color (see relativity of color in [1]). The ineffective use of colors can cause vibrations and shadows; images that distract the user and may cause eye strain [3].
Mental Models & the Effective Use of Color
People interact with their world through the mental models that they have developed. Specifically, the ideas and the abilities they bring to the job are based on the mental models that they develop about that job [11]. As interface designers, we need to a) help the user develop mental models of the system that will help her understand the job, and b) develop the interface tools that will aid her in performing the job. The proper use of color communicates facts and ideas more quickly and aesthetically to the user. Color can also help develop workable, efficient mental models if these guidelines are followed: simplicity, consistency, clarity, and language of color.
Simplicity
Simplicity is important in the design of color interfaces. There is an inherent simplicity in color which should be used when developing the design. The four physiologically primary colors are red, green, yellow and blue. These colors are easy to learn and remember [12]. By attaching practical and intuitive meanings to these simple colors when designing a screen, the interface designer enhances the user's development of an effective mental model.
Keep the color scheme simple; according to Miller [7] the magic number for short term memory is seven plus or minus two. When using color in interfaces the number should not exceed five plus or minus two [8]. The number of colors on the screen should be limited accordingly. If the user is overwhelmed or confused by too many colors vying for his attention, he is unlikely to develop an effective mental model [6].
Keep the message simple. Do not overload the meaning of the color by attaching more than one concept to a color [11]. Different concepts should use different colors. Keeping the message simple relates to the next guideline, which is consistency.
Consistency
Consistency is vital when assigning meanings to colors. The intuitive ordering of colors [6] can help establish intuitive consistency in the design. The spectral and perceptual order red, green, yellow, blue can guide the order of the concepts attached to colors. Red is first in the spectral order and focuses in the foreground, green and yellow focus in the middle, while blue focuses in the background.
Color can be used to encode or chunk information items. This helps increase the number of items a user can retain in short term memory [7]. It is important to be consistent when "chunking" information. Avoid changing the meaning of colors for different screens in the interface. For example, one database interface we evaluated changes the background color to blue for fields in the screen that cannot be updated. This is done for every applicable screen in the package and thereby provides continuity and consistency for the user.
There are physiological aspects that hinder consistency in the use of color. Various shades of the same color should be avoided for different concepts and ideas. This is especially true for the blues. Different shades of blue are very difficult to distinguish and may not be recognized as different by the user. If the concept is different, use a different color [12]. The designer should avoid using colors that appear differently due to variation in background color. These may be perceived as different colors by the user and meaning will be lost.
Clarity
Clarity is also an important guideline for using color. Experiments have shown that the search time for finding an item is decreased if the color of the item is known ahead of time, and if the color only applies to that item [12]. Standardized interface colors should be established and used across the development. The clear, concise use of color can help users find items more quickly and efficiently. Learnability can be greatly enhanced with color. Color has been shown superior to black and white for effective processing time of information and for memory performance [6]. The aesthetics and appeal of the interface are inherently increased by using color.
Usability of the system can be increased by employing colors to chunk information about subsystems and structures, and to add coding dimensions to the interface. In fact, errors in understanding and using the interface can actually be reduced by using color to clarify the system meanings and concepts [6]. Using color codes on messages for the user could greatly reduce the misinterpretation and incorrect responses. Red is a good color to alert the user to an error. Yellow is appropriate for a warning message, and green to show positive progress. Using green for error messages and red for positive status messages will only lead to misinterpretations and frustration for the user.
Language of Color
The language of color is important in the use of color. Individuals develop a language of color as they mature, based on common and cultural usage. Due to this fact, existing symbolism and cultural use of color should be considered when designing an interface. For example, the postal service in the USA uses blue for postal drop boxes, Britain uses bright red, and Greece uses bright yellow. In developing an e-mail system for these countries, the above colors would serve effectively for the mail icons [6].
Finally, remember to document the colors that are used in the interface [12]. A legend showing the colors and how they are used should be included for the interface. Color coding on-line documentation for the interface will reinforce concepts the designer wants the user to develop. Color can have a significant effect (positive or negative) on communicating ideas to a user. Using the correct color coordination can enhance the data being presented by adding another dimension or information channel [7]. In addition, color coordination enhances conceptualization through clustering and bringing elements to the user's attention by association with existing mental models.
It is more difficult to use color effectively than it is to use it ineffectively. Using color effectively requires careful coordination with colors and their associated intensity levels. Using the wrong combination of colors for background and foreground can create illusions that in turn cause eye strain. If you use multiple pure colors or highly saturated colors, the human eye must constantly refocus, causing eye fatigue. If you use colors that are difficult to focus for text or thin lines, the entire visual system must work harder, again causing fatigue and stress. Combining colors to produce positive effects requires that you follow conceptual techniques that are laid out in non-color interfaces as well as some rules for color recognition. Good and bad color combinations [12] are listed in Brown and Cunningham's book Programming the User Interface: Principles and Examples (see Table 1).
In addition to using these color combinations, there are
also some rules and suggestions that are easy to follow.
Murch [8] gives ten simple rules for
creating good interfaces (see Murch's Rules). Some
other effective suggestions made by Marcus [6]:
- use blue as background
- use spectral color sequence (red, orange, yellow, green, blue, indigo, violet)
- keep the number of colors small
- avoid using adjacent colors that differ only in amount of pure blues
- use bright colors for danger or for getting the user's attention
Marcus also suggests designing the interface in black and white first. If you have a good black and white interface and apply color to it in a constructive manner, you will obtain a better interface.
Murch's Rules
- Avoid the simultaneous display of highly saturated, spectrally extreme colors.
- Pure BLUE should be avoided for text, thin lines, and small shapes.
- Avoid adjacent colors that differ only in the amount of BLUE.
- Older operators need higher brightness levels to distinguish colors.
- Colors change in appearance as the ambient light level changes.
- The magnitude of a detectable change in color varies across the spectrum.
- It is difficult to focus upon edges created by color alone.
- Avoid RED and GREEN in the periphery of large-scale displays.
- Opposit colors go well together.
- For color-deficient (color blind) observers, avoid single-color distinctions.
One of the most important elements in using color effectively is knowing the user, the user's environment, and the task the user is performing. This is just as important for the integration of color as it is for any other part of interface design. For an example of an effective color interface look at Borland© C++ 3.1 for DOS. In the editor screen, there are six basic colors used in addition to the blue background. These colors are assigned to words (or strings) in the text to categorize textual content:
- reserved words - white
- identifiers - yellow
- macros - green
- literals - cyan
- comments - gray
- syntax errors - red
This carefully chosen color scheme helps the user easily recognize errors (e.g., misspelled reserved words), and encourages them to develop a good mental model for interface use.
Conclusions
Some of the key aspects of using color effectively in computer interface design bear review. Remember the man part of the man-machine system [4] when designing computer interfaces, and observe the fundamentals of the human visual system. Design within the noted physiological principles and display constraints. Use color sparingly, consistently, and with clarity to aid in the formation of efficient mental models. If color is used in this manner the resulting interface will be more learnable and ultimately more usable. Finally, use the techniques and guidelines developed by Murch, Marcus, Pancake, and others. These rules, which were established from research, describe how colors fit together effectively. Ignoring these rules while setting up a color scheme you like personally may be detrimental to the success of the resulting interface.
References
- 1
- Albers, J. Interaction of Color. Yale University Press, New Haven, 1975.
- 2
- Foley, J. D., Van Dam, A., Feiner, S. K., and Hughes, J. F. Computer Graphics: Principles and Practice. Addison-Wesley Publishing Company, Inc., 1996.
- 3
- Haferkorn, S., Slater, J., Uzzo, S., and Gruber, M. Perceptual Discrepancies in Color. Course #1 from ACM SIGGRAPH '89, Boston, Mass., 1989.
- 4
- Hollnagel, E. What do we know about man-machine systems. International Journal of Man-Machine Studies 18, (1983), 135-143.
- 5
- Meyer, G. W., and Greenberg, D. P. Perceptual Color Spaces for Computer Graphics. In ACM SIGGRAPH '80 14, (July 1980), 254-261.
- 6
- Marcus, A. Designing Graphical User Interfaces. UnixWorld (October 1990), 135-138.
- 7
- Miller, G. The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information. The Psychological Review 63, (Mar. 1956), 81-97.
- 8
- Murch, G. M. Physiological Principles for the Effective Use of Color. IEEE Computer Graphics and Applications 4, (Nov. 1984), 49-54.
- 9
- Netravelli, A. N., and Haskell, B. G. Digital Pictures, Representation, and Compression. Plenum Press, New York, 1988.
- 10
- Nakatani, L., and Rohrlich, J. Soft Machines: A Philosophy of User-computer Interface Design. In Proceedings of the CHI 1983 Conference on Human Factors in Computing Systems. ACM, New York, 1983, pp. 20-23.
- 11
- Norman, D. Some Observations on Mental Models. In Mental Models, D. Genter and A. Stevens, eds. Lawrence Erlbaum Associates, 1983, pp. 7-14.
- 12
- Pancake, C. M. Principles of Color Use for Software Developers. Tutorial M1 from Supercomputing '95, 1995.
- 13
- Taylor, J. M., and Murch, G. M. The Effective Use of Color in Visual Displays: Text and Graphics Applications. Color Research and Applications Vol. 11 Supplement (1986), pp. S3-10.
- 14
- Taylor, J. M., Murch, G. M. and McManus, P. A. TekHVCTM: A Uniform Perceptual Color System for Display Users. In Proceedings of the SID 30 (1989), pp. 15-21.
About the Authors
Want more Crossroads articles about User Interfaces? Go to the index or to the next one or to the previous one.