Techniques & Tools for Using Color n

Computer Interface Design

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. Color interfaces are no different in that they
are also based on two parts, the Human Visual System (HVS) and a color display
system (CDS). A theoretical examination of these two components establishes a
foundation for developing practical guidelines for color interfaces.

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." 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, 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, this
includes: 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. 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, saturation 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. HLS was developed at Tektronix in 1978 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). 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.
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.

RGB Cube

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 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

Consequent to the physical organization of the eye are interesting effects or illusions
caused by certain color organizations or combinations. 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. 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. The ineffective use of colors
can cause vibrations and shadows; images that distract the user and may cause eye strain.

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. 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 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. 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 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. 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. Keep the
message simple. Do not overload the meaning of the color by attaching more than one
concept to a color. 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 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. 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. 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. 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. 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. 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 an 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.

Finally, remember to document the colors that are used in the interface. 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. 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.
Principles and Examples.

In addition to using these color combinations, there are also some rules and suggestions
that are easy to follow. Murch gives ten simple rules for creating good interfaces. Some
other effective suggestions made by Marcus

• 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.
• Opposite 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. 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.

The Basics of Colour Vision

Have you ever wondered how different the world could seem to someone with a colour-
vision deficiency? Have you ever wondered whether they can understand your Web page,
or follow the colour cues in your software? If it is not your problem, you have probably
never considered it. However, one man in 12 has some degree of colour-vision
deficiency, or colour blindness (it is rare in women). The colour choices we make in
software and Web design can make life more difficult for these people, if we are
uninformed.
In good design, colour should never be the primary cue for information. The options
should be clear without colour, and the colour is simply added as a means of emphasis.
Yet, colour becomes more and more a part of our everyday work, especially with
computers increasingly supporting a greater range of colours. Often it is simply
decorative, but colour cues are frequently used as the primary means of informing the
user how to interpret information.
Published algorithms enable us to calculate how colours appear to individuals with
certain types of colour vision deficiency. However, the mathematics is fairly complex,
and designers and developers need an easier way to see how their choices impact color-
blind users. The basics of colour vision’ introduces how colour vision works, in the
simplest terms. ‘Problems with colour vision’ looks at how colour vision deficiency
happens.

We perceive colour via photosensitive cells in the eye, the rods and cones. The cones
normally contain pigments tuned to receive wavelengths in three parts of the visible
spectrum. This gives us trichromatic vision. They can be referred to as Red, Green and
Blue, although r (rho), g (gamma) and b (beta) are sometimes used to avoid confusion
with the common understanding of the colour names.

The brain further processes the colour received by the eyes, and there are also further
psychological issues. The red and green forms of colour deficiency are caused by a
recessive gene on the X chromosome, and are therefore more common among men. Only
0.4 % of women have any sort of colour vision deficiency, most of them being the red or
green forms.

The aspect relates to the most common deficiencies with red and green. These
deficiencies are also very similar to each other, in terms of colour perception. It also
deals with dichromatic vision, as that is calculable and represents the ‘worst case’
scenario. If one designs for dichromats, the lesser degrees of colour deficiency will be
well accommodated.
Interestingly, a red or green deficiency does not simply affect how one perceives red or
green. Any colours that vary from each other by the amount of red or green they contain
will also appear different. In addition, because protanopes are less sensitive to light at
the red end of the spectrum, colours in this area appear darker to them. Deuteranopes do
not see this luminosity difference, as the other cones and rods compensate. Another
interesting aspect is that colours perceived by protanopes and deuteranopes are broadly
similar, with just a slight greenish cast to the colour along a given line looks the same as
all the other colours along that line. The point at which the Colour line crosses them
represents the perceived colour for that confusion line.
There are 216 colours considered ‘safe’ to use on Web pages, because they are common
to most of the computing platforms available. When other values are used, any system
running 256 colours will substitute the specified colours for those it has available.
Backgrounds will change colour, and flat colours in gifs will dither. Using the Web-safe
palette gives better visual control over what the end user sees. The web-safe palette
includes all colours (and no others) which have RGB values made up of 0, 51, 102, 153,
204, and 255 (or 33, 66, 99, CC, FF in Hex)