Screen Design for Computer-Based Training:



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

Nancy B. Novelli

ATTD 4350: Advanced Computer Applications

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, 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 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 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 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).

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

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.

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

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.

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

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.

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.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download