Computer-Based Training, Graphical User Interface (GUI) Visual Element Design and Development Standards 

by Pete Thibodeau (thibodep@lee-dns1.army.mil)

Originally Published in T.H.E. Journal, February 1997, pp. 84-86 


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 techniques, and digital storytelling techniques to design and create comfortable, positive learning environments where the learner is engaged through meaningful scenarios and activities. The learners retention increases substantially as the subject matter becomes more meaningful and non-threatening to the student. 

 

Creating multimedia takes more than just the right hardware and software, and because learners will be relying more and more on computer-based training, the interactive courseware developer should establish and follow a set of specifications that will be the standard throughout the preparation, design, and development of the graphical user interface (GUI) used for each interactive course or lesson being developed.

 

The author has limited the focus of this article to visual element considerations associated with the use of video, text, graphics and animation and interactivity.

 

Video Considerations

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

• Use long, medium and close-up shots to establish a visual introduction. Use the close-up to get the learners attention and hint that the video being presented is important. A longer-shot is used to fix frames of reference. The developer should not use static shots. 
• The zoom-in can be used to focus the learners attention on a specific object or area while at the same time maintaining visual bearings. 
• If you are introducing something new, focus on the object or area long enough to allow it to register with the learner. 
• You will want to make sure that there is no distracting movement in the video and that the object or area of focus is well lighted. The learners eye will naturally focus on the lighted area and the movements in the video. 
• Some video formats that you may consider include; a "walk-through" a facility or event with an off screen narrator, a "talking head" for lectures, "show and tell" when demonstrating, interviewing, a talk show format, a panel discussion, or a simulation. 
• If you will be presenting a simulation that permits the learner to 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 transfer from training to performing on the job. 
• The 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. You must ensure that the visual is relevant to the content and that each video ties in directly to the accompanying video. The delivery of irrelevant or inappropriate visuals will confuse the learner. 
• Show events of the future or the consequences of inappropriate performance (i.e., a disaster caused as a result of human error such as the consequences of improperly packing a parachute) prior to instruction. This will make an impression on the learner about the dangerous outcomes associated with the unacceptable performance and will encourage the learner to embrace 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 and Animation Considerations

Graphics and Animation can also be used to enhance learning. Considerations when including or designing graphics and animation might include:

• Use graphics or animation when; a realistic presentation (i.e., 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 in the reduction of inapplicable details and highlight key information. You might want to use video in conjunction with a video clip (together) or following a graphic delivery. 
• Avoid the use of biases or stereotypes in your graphics or animation’s (gender, ethnicity, religion, etc.). The use of biases or stereotypes is debasing and distracting. 
• Use humor cautiously and only if it helps to increase learner interest and to promote recall. Learners recall sensational or humorous information better and can be motivated by it.

 

Text Considerations

Text is used to present the content and/or highlight certain information. Considerations when including or designing text 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 a line.
	When formatting your 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.

• Limiting the highlighting or boldfacing to 10% of the screen display. 
• Reserve italics for titles or headings. 
• Use reverse video or blinking with discretion. At no time "blink" text to be read. 
• 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 will reduce the effectiveness of the attention-getting technique.

 

Interactivity 

The development of the interactivity options requires that the developer 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 the opportunity to review sections and don’t forget to provide a summary of the material presented for that unit of instruction. By alternately and randomly moving from content to practice to summary you keep the learner from becoming annoyed and helps to facilitate learning. 
• You should provide opportunity for interaction at every 3-5 screens or one screen per minute or two. You want to avoid building an electronically overpriced page turner. 
• The questions you ask should follow the content just presented. The questions should be based upon previously acquired knowledge. Jumping right into the next content area without this opportunity would be monotonous to the learner. 
• Questions should provide an occasion to utilize what they have learned rather than memorizing and reciting answers. 
• Questions should be used often. They sustain learner attention by keeping them involved in the learning process. 
• Consider designs where the learner is not presented with information in a linear format, rather, the learner discovers information through active exploration in the program. With some tasks, such as problem solving, learning through discovery promotes understanding and retention because new knowledge is linked to existing knowledge.

 

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 (Forester (1991). 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 the individual learner as well as the organization. The 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 that are not only educationally and technologically attuned to the emerging and migrating technologies, it also requires a demonstrated, innate ability to develop educational programs that contain a seamless and intuitive graphical user interface (GUI).

Present your message, and only your message. Don’t confound it with superfluous graphics, animation’s, 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 your learners have trouble understanding the communication, you will find that out during your formative evaluation (Misanchuk 1994). If you put too many "bells & whistles" in your lesson, you will probably never find out about the troubles. All you end up doing is using up time unnecessarily - yours and the learners’ - as well as disk space.

 
  Works Cited
 

Forester, Tom. (1991). Computers in the Human Context: Information Technology, Productivity and People. Cambridge, Massachusetts : The MIT Press

 

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

 

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

 

Misanchuk, Earl. R. & Schweir, Richard A. (1994). Interactive Multimedia Instruction. New

Jersey: Educational Technology Publications