The Role of Color 1

The Role of Color, Text and Layout in Computer Display Screens

Nancy B. Novelli

ATTD 4350: Advanced Computer Applications

The Role of Color 2

Abstract

Color sets the mood for a presentation, text delivers the lesson content,

and multimedia supports the lesson. Today's software applications and high-

quality computer systems give designers the ability to create presentations and

computer-based training lessons with vivid colors, stylish text, and dynamic

multimedia. A diverse population challenges the designer to accommodate many

different learning styles. Environmental factors influence the appearance of color

on varied computer monitors. This paper looks at the purpose and guidelines for

using color, gives recommendations for formatting text so that it displays

effectively on the chosen background, and describes sources and uses for

graphics, audio, and video. Factors that influence color selection include visual

acuity, relationships between a color's saturation and brightness, and

compatibility with surrounding objects. After choosing the appropriate

background, the designer is able to format text and apply other forms of

multimedia to support the presentation.

The Role of Color 3

The Role of Color, Text and Layout in Computer Display Screens

As computer-based training becomes a more efficient and effective method

of training today's workforce, instructional designers face the challenge of

designing screens that facilitate the learning process and appeal to the

appropriate audience. This paper primarily discusses the role of color in

displaying backgrounds and foregrounds. It further discusses the design and

layout of text, graphics, audio, and video on the computer screen.

Designing with Color

In order to design color schemes for backgrounds, text, and other

multimedia screen components, the instructional designer must understand the

role of color. By learning the terminology, basic guidelines, impact, and overall

uses of color, the designers acquires the background knowledge necessary to

apply the use of color on the computer screen.

Uses of Color

Using color in computer screen presentations serves the purpose of

enhancing information, helping the student remember content and relationships,

providing focus toward unique screen aspects, keeping student interest, and

pointing out differences and new concepts (Faiola & DeBloois, 1988; Galitz, 1997;

Laurel, 1990; Milheim & Lavix, 1992). Studies by Rambally & Rambally (1987) and

Strickland & Poe (1989) also mention that the appropriate use of color gives the

student the ability to link logically-related data, differentiate between required and

optional data, highlight student errors, define screen areas and communicate the

lesson's overall structure (Milheim & Lavix, 1992). Using color potentially

The Role of Color 4

increases the effectiveness of the training message without altering the content

or multimedia additions. However, an instructional designer does not achieve this

expected outcome out of luck. Planning the lesson's color scheme first requires

an understanding of the concepts of color and the problems associated with it,

including individual physical, social and organizational differences in response to

color schemes.

Color Terminology

Before proceeding with other issues that relate to the use of color, three

basic definitions help clarify future reference to color terminology. What you

typically think of as color is properly defined as a hue. Red, yellow, and blue are

hues. All hues have value and chroma. Value describes the lightness or darkness

of a hue. Chroma describes the saturation of a hue, or the amount of white

present in the hue. Increased chroma enables you to see hues from a distance.

You achieve a different hue by adjusting its value and chroma in a paint or

graphic computer application.

Problems with Color

The designer should be aware of several external problems that may effect

the display of color on the computer screen. These problems, including

hardware, user environment, and individual physical differences, are beyond the

control of the designer.

Some computer systems allow users to change desktop colors. If the

computer presentation does not completely fill the screen, allowing desktop

colors to display around the periphery, the presentation colors may compete for

The Role of Color 5

the user's attention (Laurel, 1990). For example, a presentation designed in 640 x

480 pixel screen resolution will not completely fill a user's screen whose monitor

is set at a 800 x 600 pixel resolution. If the desktop reflects a turquoise and hot

pink color scheme, training designed on an orange or green background may

clash with the desktop area that shows beyond the training display area.

The user environment may also influence the way colors appear on the

computer screen. External lighting conditions that are either too bright or too dim

may interfere with the chosen color scheme. Monitors also have a unique

calibration that causes colors to look one way on one user's screen and appear

different on another (Laurel, 1990).

Designers should also consider visual limitations of some people. Lack of

color discrimination affects 8% of the male population and .05% of the female

population. These individuals have a difficult time discriminating between

complementary colors, such as red and green. Only .005% of the total population

is completely colorblind. In the older population, deterioration of the lens in the

eye causes this loss of color vision. As the lenses age, they acquire a yellow tint,

filtering out shorter blue wavelengths (Galitz, 1997). Although designers can not

predict the number of users with color vision deficiency, they can display color in

ways that provide high levels of contrast (Faiola & DeBloois, 1988).

Cultural differences may also influence the designer's choice of color for

the computer display screen. Consider the color blue. In the United States, this

color uniquely carries four denotations. To financial managers, blue indicates

quality and reliability; to the health care provider, death; on a nuclear reactor

The Role of Color 6

monitor, it indicates water or coolness; and to the American movie audience, it

indicates tenderness or pornography (Galitz, 1997). Applying this research, a blue

background for a company's 401(k) program is appropriate; however, a blue

background confuses the emergency technicians whose lesson deals with life-

saving techniques.

Color and Visual Impact

Apart from the issue of color discrimination, the normal eye sees colors

that appear in the middle of the color spectrum more easily than those at either

end of the spectrum. This spectrum of seven colors is commonly known by the

mnemonic ROY G BIV, where the mnemonic letters stand for the first letter of the

seven color words: red, orange, yellow, green, blue, indigo, and violet. Applying

this theory to the spectrum, the human eye sees yellow and green more easily

than red and violet, which appear on opposite ends of the spectrum. Designers

can apply this theory when making choices for background and foreground

colors, paying special attention to limiting the use of red and blue for text colors

(Galitz, 1997).

Many designers avoid using the color red because it commonly indicates

warnings or dangerous tasks. However, a study performed by Wager & Solomon

in 1988 found that when people devised their own color schemes, red was one of

the most frequently used colors--without being associated with danger (Laurel,

1990).

The Role of Color 7

Guidelines for Color

Research supporting the theory that effective use of color improves the

users performance is mixed. One study suggests that factors not influenced by

the use of color include visual acuity, contrast sensitivity, target recognition, text

legibility and overall performance (Watnabe, Mori, Nagata, & Hiwatashi, 1968;

Pinkus, 1982; Post, 1985; Matthews & Mertins, 1987, 1988; cited in Galitz, 1997). A

contrary study states that using colors from the center of the spectrum places the

user at an advantage when dealing with reaction times and error rates. Overall,

people like color and believe it improves their performance (Galitz, 1997).

Although several issues exist that influence the outcome of a designer's

use of color, there exist basic guidelines and recommendations to follow in order

to achieve maximum results.

The amount of time the user spends at the computer screen may influence

the number of colors the designer applies to any one screen (Galitz, 1997). Most

research indicates simple screens should have a maximum of four colors; but

longer, complex screens can have a maximum of six colors, including

background, foreground, and text objects (Faiola & DeBloois, 1988; Galitz, 1997;

Milheim & Lavix, 1992).

Although complementary colors are thought of as related and effective

when shown together, display screens should not feature the use of

complementary colors. Instead, choose a palette that uses split complementary

colors. This scheme consists of one primary color plus two colors on either side

The Role of Color 8

of the complementary color. You should avoid using red and green together since

they are complementary colors. Instead, couple the red with blue and yellow.

When illustrating levels or depth, use the natural arrangement of colors in

the color spectrum--red, orange, yellow, green, blue, indigo, and violet. Since

eyes translate colors in this order, viewing leveled material in this order becomes

a natural process (Galitz, 1997).

Colors often place emphasis on certain objects on the screen. The

designer should use contrasting colors (such as black and white) to illustrate

separation, similar colors (such as blue and green) to show similarity, warm

colors (such as yellow and orange) to show activity, and cool, dark colors (such

as blue or indigo) for backgrounds (Galitz, 1997).

Background Colors

After analyzing the audience, the designer should choose the background

color before choosing other colors for text, emphasis, and highlighting (Galitz,

1997). The designer should not overuse color in the background, causing it to be

a graphic element and gaining more attention from the user than actual lesson

content (Woods, Johannesen, & Potter, 1992; cited in Galitz, 1997). Although gray

is a good natural color choice for a background, other cool, dark colors serve just

as well (Faiola & DeBloois, 1988; Milheim & Lavix, 1992). The optimal screen

design combination consists of a black background with dark cyan, dark yellow,

dark white, light green, light cyan, light magenta, light yellow, or light white text.

The worst screen design begins with a brown or green background (Lahomia &

Happ, 1987; cited in Galitz, 1997).

The Role of Color 9

Text

Once the designer chooses the background color, the next step is to select

the appropriate text format to go along with the background. This choice includes

choosing a text color, font, and other formatting styles.

Text Color

The color of the background dictates the color of the text. Text written in

warmer colors tends to advance on the screen, bringing attention to the message.

Saturated colors, those with increased levels of white, also stimulate the eye

(Galitz, 1997). The ISO Color Standard suggests that for long periods of reading,

you should use desaturated, spectrally close colors--yellow, cyan, and green

(Marcus, 1986; cited in Galitz, 1997).

Text Format

Besides paying attention to the choice of color for text, the designer should

also consider line spacing and other formatting issues. Font choices, sizes,

spacing, and color often relate a message to the user. A notable difference in

fonts helps the use distinguish between new information, questions, feedback,

instructional information, and other screen items.

First, the designer chooses a font. The most easily read font is a Roman or

Gothic font that includes serifs to guide the reader's eye. Changes to the

appearance of a font include underlining, bolding, italicizing, and increasing or

decreasing the font size. Faiola & DeBloois (1988) and Piskurich (1993) suggest

you limit the number of styles on a single screen to two, and the number of sizes

on a single screen to three.

The Role of Color 10

Type in mixed lower case, using capital letters only for the beginning of

sentences and proper nouns. Double-space the body of the text so that the

audience can distinguish words through ascenders and descenders (Faiola &

DeBloois, 1988). These upward and downward extensions of alphabetic

characters help the reader distinguish words. Using all capital letters tends to

form a block for each word, causing readability to decreases (Aspillaga, 1991).

When you want to add emphasis, use capital letters, bold letters, or change the

font of the first letter of the paragraph. This method promotes legibility and

allows the student to read faster. You should also limit the use of punctuation to

the ends of sentences, omitting the period from abbreviations and acronyms

(Milheim & Lavix, 1992).

Layout

The way you arrange any combination of fonts, sizes, and styles on the

screen refers to the screen layout. Create bodies of text using a left-justified

margin and ragged-right margin. Allow ample white space around the edges of

the screen and between columns of text and graphic objects. A two-column,

newspaper style format is easier to read than long sentences that exceed 60

characters per line (Galitz, 1997; van der Veer & Mulder, 1988). If possible, include

self-contained messages on lines, without allowing meaningful fragments to

appear on preceding or following lines (van der Veer & Mulder, 1988).

Graphics

No student of computer-based training wants to look at pages and pages of

text. Graphics provide balance with the text and should replace text whenever

The Role of Color 11

possible (Strickland & Poe, 1989; cited in Milheim & Lavix, 1992). Before adding

graphics to any computer display, the designer must determine their effect on the

overall lesson structure as they relate to the needs of the audience.

Uses

Studies performed by Rovick (1985) and Hazen (1985) confer that

graphics give information, pose questions, illustrate effects, summarize lessons,

enliven presentations, emphasize relationships, focus attention, and convey

messages or concepts (Milheim & Lavix, 1992). Graphics aid the recall process.

When the brain decodes text, it uses one type of memory recall process. When

the brain decodes graphics, it uses another type of memory recall process. By

combining text and graphics on a page, the brain creates a third memory recall

process, facilitated by the individual text and graphic recall processes (Aspillaga,

1991).

Effect on Children

Graphics impress children. Since most children do not read until they are

five- to six-years-of-age, graphics supply a wealth of information in primary

computer presentations (Laurel, 1990). Once children reach school age and begin

to read, an alarming 2% of children have some form of learning disability.

Keeping this in mind, instructional designers must pay special attention to good,

simplistic sentence structure, obvious graphical representations, and easy-to-use

navigation formats. Limit the use of graphics during negative feedback. Some

children find it amusing to continually make mistakes in a effort to see lively

graphics relay corrective feedback (Schaefermeyer, 1990).

The Role of Color 12

Guidelines

Before applying color to add emphasis to graphics, you should consider

the appropriateness of the graphic on the lesson page. Graphics that represent a

critical procedure must be realistic in order to communicate intent to the learner.

A graphic that depicts a special safety feature on a new piece of equipment must

be a replica so that the learner can transfer the knowledge back to the workplace.

Avoid using graphics that provide only add decoration or appear repeatedly

throughout the lesson (Milheim & Lavix, 1992). Any form of multimedia needs to

support the text, not distract or take away from the message (Piskurich, 1993).

Once you choose appropriate graphics, consider these recommendations

from the ASTD Handbook of Instructional Technology (1993). Promote simplicity

by limiting topics to one per screen. Design screens with balance. Formal balance

means that line length, shape, and spacing appear equidistant on the screen.

Informal balance allows you to substitute white space for objects that do not take

up the same amount of screen space as complementary objects. Place graphics

slightly above center and add contrasting shapes or colors for emphasis.

Consider natural eye movement when positioning graphics. Readers in the United

States begin in the upper left-hand corner of a page or screen and move to the

right. Considering this, you should place graphics that face toward the right on

the left side of the screen. This allows the student's eyes to follow the graphic's

spatial display. Finally, and most importantly, consider neatness in the overall

screen design.

The Role of Color 13

Audio

Designers use audio to set scenes, advise students of requirements, and

replicate actual sounds (Piskurich, 1993). Music, an alternate form of audio, sets

an overall mood, draws attention to certain areas of the lesson, heightens drama,

and relaxes students (Schneiderman, 1992). Adding this type of media to the

learning environment increases the bandwidth of communication. Hearing and

seeing are mutually exclusive senses. Therefore, while the student processes

information gained from eyesight in one part of the brain, he can also process

information gained from hearing in (Laurel, 1990). Audio also serves the visually

impaired by confirming or negating actions (Schneiderman, 1992).

Guidelines

Creating the audio addition to a lesson is as critical as the screen layout.

When recording the audio, make sure the volume and pitch are consistent. Select

a recording voice that is easily understood and portrays the appropriate dialect

for the audience (Piskurich, 1993). Your audience and subject matter dictate

whether the recorded voice should be male or female

Practice recording voices of different subjects at different volumes and

recording properties. Play back the sample audio clips in the presentation

package you plan to use to deliver the presentation.

Layout

Audio may be available on a screen as an automatic feature, playing

without interaction from the student, or as a controllable object. If the student

controls the play action of the audio, make sure the control panel closely

The Role of Color 14

resembles modern audio devices, taking advantage of playback control

conventions. Remember that the purpose of the lesson that includes the audio is

not to teach the student how to work an audio panel.

Consider the learning environment as you place audio on screens.

Repeated audio in a training facility may become annoying to individual users

after several occurrences. Adults become particularly annoyed after repeatedly

hearing cartoon-like audio sounds that accompany some feedback. If you

coordinate sound with negative feedback, children may purposefully answers

questions wrong just to hear the sound. Allowing the user to control the absence

or presence of sound and supplying audio headphones overcome most issues

associated with using audio.

Video

Research provides the least amount of information regarding screen

design to complement video in computer presentations. By beginning with an

understanding of the appropriate uses for video and applying basic screen

design principles, the designer is able to display video effectively to the student.

The most common uses of video include supplementing textual

information, providing feedback, and communicating new information to

employees and managers (Piskurich, 1993). Due the large file size of video files,

reserve the use of video for times when another multimedia format does not

suffice. For example, the best way to introduce the chief executive officer to new

employees is through video. Alternately, substitute still-frame video and scanned

images for inanimate objects.

The Role of Color 15

As you plan the layout for your video, avoid talking heads as much as

possible. These types of video clips that focus entirely on the head of the subject

send a less important message to the audience than full-body, action clips

(Piskurich, 1993). Achieving synchronization between the video and audio tracks

in talking head videos is more difficult. Plan a video shoot where you film a

scenario in its entirety. Later, edit the video into usable clips. When you want to

indicate a shift in time or location, use a dissolve effect on the video. When you

want to indicate a major break in scenes, use the fade in/fade out effect.

Treat any embellishment to the video display area as you would a graphic.

If you add a frame around the video, use the color schemes suggested for

displaying text on colored backgrounds.

Conclusions

Designers who follow any instructional design model know that evaluation

is a very important part of the design and development process. The guidelines

for the use of color, text, and other forms of multimedia presented in this paper

offer a way for the designer to plan the presentation for the audience. Offering to

the audience researched techniques that apply to a presentation's background

gives the designer credibility. The effectiveness of the screen design becomes a

reality when the audience favorably responds to the design scheme. Continuing

formative evaluation throughout the design and development cycle helps the

designer achieve the expected outcome as a result of thoughtful screen design.

The Role of Color 16

References

Aspillaga, M. (1991). Implications of screen design upon learning. Journal

of Educational Technology Systems (20) 1, 53-58.

Faiola, T., & DeBloois, M. L. (1988). Designing a visual factors-based screen

display interface: The new role of the graphic technologist. Educational

Technology (28) 8, 12-21.

Galitz, W. O. (1997). The essential guide to user interface design. New York:

John Wiley & Sons, Inc.

Laurel, B. (Ed.) . (1990). The art of human-computer interface design.

Reading, MA: Addison-Wesley.

Milheim, W. D., & Lavix, C. (1992). Screen design for computer-based

training and interactive video: Practical suggestions and overall guidelines.

Performance & Instruction (31) 5, 13-21.

Piskurich, G. M. (Ed.) . (1993). The ASTD handbook of instructional

technology. New York: McGraw-Hill, Inc.

Schaefermeyer, S. (1990). Standards for instructional computing software

design and development. Educational Technology (30) 6, 9-15.

Schneiderman, B. (1992). Designing the user interface: Strategies for

effective human-computer interaction (2nd ed.) . Reading, MA: Addison-Wesley.

van der Veer, G. C., & Mulder, G. (Eds.) . (1988) Human-computer

interaction: Psychonomic aspects. Berlin, Germany: Springer-Verlag.