Design Standards for Visual Elements and Interactivity for Courseware

Computer-based training is a proven method for delivering high-impact, cost-effective training solutions. More and more education, instruction, and training development organizations are utilizing state-of-the-art authoring technology, storyboarding and digital storytelling techniques to design and create comfortable, positive learning environments where the learner is engaged through meaningful scenarios and activities. The learner's retention increases substantially as the subject matter becomes more meaningful and non-threatening.

Yet creating multimedia takes more than just the right hardware and software. Because learners will be relying more and more on computer-based training to acquire or refresh skills, the interactive courseware developer should establish and adhere to a set of specifications that will be the standard throughout the design and development of the graphical user interface for each interactive course or lesson. The author has limited the focus of this article to visual element considerations associated with the use of video, text, graphics, animation and interactivity in multimedia courseware.

Video Considerations

Video can be a significant component in the development of interactive courseware (ICW). Considerations when utilizing video include:

  • Use long, medium and close-up shots to establish a visual introduction. Use the close-up to get the learner's attention and hint that the video being presented is important. A longer shot is used to fix frames of reference. ICW developers should not use static shots.
  • A zoom-in is useful to focus the learner's attention on a specific object or area while at the same time maintaining visual bearings.
  • When introducing something new, focus on the object or area long enough to allow it to "register" with the learner.
  • Make sure there is no distracting movement in the video and that the object or area of focus is well lighted. The learner's eye will naturally be attracted to and focus on the lighted area and the movements in the video.
  • Some video formats to consider include: a "walkthrough" a facility or event with an off-screen narrator, a "talking head" for lectures, "show and tell" for demonstrations, interview, "talk show," panel discussion or simulation.
  • If presenting a simulation where learners perform steps or activities as closely as possible to the actual situation (i.e., manipulating the flight controls in an airplane cockpit), make it a "first-person" simulation. The first-person method helps personalize the content and aids transfer from training to performing on the job.
  • Use of audio and video together will help to reinforce the learning because the learner uses the two senses of hearing and seeing. The two pieces (audio and video) must be related. Ensure that the visual is relevant to content and that each video ties in directly to the accompanying audio. Irrelevant or inappropriate visuals or audio elements will confuse the learner.
  • Show future events or the consequences of inappropriate performance (i.e., a disaster caused by human error such as the consequences of improperly packing a parachute) prior to instruction. This will make an impression on learners about the dangerous outcomes associated with unacceptable performance and encourage them to adopt acceptable behaviors or practices.
  • Finally, use video rather than still photos if the content requires movement to clearly portray the point to be made.

Graphics & Animation Considerations

Graphics and animations are also part of an ICW developers toolkit. Considerations involving graphics and animation include:

  • Use graphics or animation when a realistic presentation (video) may overburden the audience with too much detail, the conditions or problems to be depicted occur so infrequently that video is not practical, or explicit details are necessary. Video often has lower pixel density than graphics.
  • Graphics help to both reduce the amount of inapplicable details and to highlight key information. One might want to use an animation in conjunction with a video clip (together), for instance, or following a video to focus learners' attention on specific details or content.
  • Avoid the use of biases or stereotypes in graphics or animations (gender, ethnicity, religion, etc.). As a technique, use of biases or stereotypes is distracting; as a social custom, it is debasing.
  • Use humor cautiously. While it can help to increase learner interest and to promote recall, it can also backfire and distract from content.

Text and Titling Considerations

Text and titles are used to present content and/or to highlight certain information. Considerations when including or designing text elements might include:

  • Limit the amount of text on the screen. It is more difficult and takes longer to read text on a screen than in print. People read text on a computer screen at a rate 28% slower than if reading from a book.
  • Position text appropriately. Regular text should be left-justified only. Center headings and titles. Do not hyphenate words at the end of lines.

When formatting screens, the following techniques might be useful:

  • Provide a generous amount of white space to separate blocks of information.
  • Use headings as content summaries and navigation aids.
  • Convert sentences containing serial items to lists.
  • Organize complex information into tables to help learners integrate program content.
  • Reserve the use of all upper case letters for adding emphasis and to titles only.

Attention-getting techniques include:

  • Limit highlighting or boldfacing to 10% of the screen display.
  • Reserve italics for titles or headings.
  • Use reverse video or blinking with discretion. Text to be read should never "blink."
  • Make use of mixed type sizes or fonts to contrast screen components.
  • Use no more than one attention-getting technique per screen display. Keep in mind that overly saturating the screen reduces the effectiveness of the attention-getting technique.
  • Verify the appropriateness of the colors used for text under simulated presentation conditions. The clarity of text colors will vary depending on such factors as the screen background colors, room lighting and the proximity of students to the screen.

Interactivity Considerations

In developing interactivity options, an ICW developer must ensure that the learner is in control of the learning environment. The following are considerations in interactivity design:

  • Break the content down into small units. Build in questions with positive and negative feedback. Allow the learner an opportunity to review sections and don't forget to provide a summary of the material for that unit of instruction. By alternately and randomly moving from content to practice to summary, one keeps the learner from becoming annoyed or bored and helps to facilitate learning.
  • Provide opportunity for interaction every 3-5 screens, or every minute or two to avoid building an overpriced, electronic "page turner."
  • Questions asked should follow content just presented. The questions should be based upon previously acquired knowledge. Jumping right into the next content area without this opportunity is monotonous to the learner.
  • Questions should provide an occasion to utilize what students have learned rather than just memorizing and reciting answers.
  • Questions should be used often. They sustain learners' attention by keeping them involved in the learning process.
  • Consider designs where the learner is not presented with information in a linear format, rather, he or she "discovers" information through active exploration. With some tasks, such as problem solving, learning through discovery promotes understanding and retention because new knowledge is linked to existing knowledge.

Final Thoughts

Researchers have shown that the design of the human-computer interface can make a substantial difference in learning time, performance speed, error rates and user satisfaction. They have also proven that media can teach content at least as effectively as traditional instruction. Moreover, well-designed media can help learners to gain more than from traditional instruction.[1]

The interactive courseware developer should focus on the individual learner, build in active participation, and provide both positive and negative feedback. In closing, the bottom line is "simplicity."

A large number of organizations have invested a great deal of time and money in the technology that will provide training opportunities to individual learners and the organization. An interactive courseware developer owes it to the learner and the organization to provide only the most relevant and intuitive courseware possible.

ICW development requires developers who are not only educationally and technologically attuned to emerging and migrating technologies, but also demonstrate an innate ability to develop educational programs that contain a seamless and intuitive graphical user interface.

Present your message, and only your message. Don't confound it with superfluous graphics, animations, sounds, colors or activities. Be a minimalist in your approach. Think lean.

Make it a challenge to present your message with as few textual and audiovisual stimuli as possible. If you make it too lean and learners have trouble understanding it, you will find that out during formative evaluation.[2] If, however, you put too many "bells & whistles" in your lesson, you will probably never find out about the troubles. All you'll end up doing is using up time unnecessarily -- yours and the learners' -- as well as disk space.

Pete Thibodeau is an Instructional Systems and Interactive Courseware Development Specialist for the U.S. Army. E-mail: [email protected]


  1. Forester, Tom (1991), Computers in the Human Context: Information Technology, Productivity and People, Cambridge, MA: The MIT Press.
  2. Misanchuk, Earl. R. & Schweir, Richard A. (1994), Interactive Multimedia Instruction, Elizabeth City, NJ: Educational Technology Publications.

Other resources:

  • Gery, Gloria (1992). Making CBT Happen, Boston, MA: Weingarten Publications, Inc.

Golas, Katherine C., Orr, Kay L, & Yao, Katy (1994), "Storyboard Development for Interactive Multimedia Training," Journal of Interactive Instruction Development, pp.18-31.

This article originally appeared in the 02/01/1997 issue of THE Journal.