Najjar, L. J. (1992). Multimedia user interface design guidelines (IBM TR52.0046). Atlanta, GA: IBM Corporation.

Multimedia User Interface Design Guidelines

September 24, 1992
IBM TR52.0046

Lawrence J. Najjar
IBM Corp.
P. O. Box 2150
WG02C
Atlanta, GA 30301-2150
(404) 835-7071
Tie line 336/7071

NAJJARL at ATLVM10

Acknowledgements

I am grateful to Greg Corso (Georgia Institute of Technology, School of Psychology) and Bennett Lauber (IBM-Santa Teresa, Information Design and Publishing Services) for their generous assistance.

Abstract

This paper describes guidelines for designing multimedia user interfaces. Most of the guidelines are based on independent research. The guidelines are to:

• Keep the user interface simple
• Be consistent
• Let the user control the interaction
• Give immediate, obvious feedback for every user action
• Use familiar metaphors
• Let the user safely explore your product
• Use pastel colors
• Use fonts that have serifs
• Limit your use of sound
• Use lower frequency sounds
• Let the user control sound volume quickly and easily
• Use large touch areas
• Use consistent colors and shapes to designate touch areas
• Use different touch styles where appropriate

Introduction

Multimedia user interfaces combine several kinds of media to help people use a computer. These media can include text, graphics, animation, images, voice, music, and touch. Multimedia user interfaces are gaining popularity because they are very effective at keeping the interest of their users, improve the amount of information users remember, and can be very cost-effective (Alexander, 1992; Fletcher, 1990; Verano, 1987).

Several reports support the value of multimedia. Bethlehem Steel found that multimedia training courses cut training time by 20% to 40%, improved retention rates 20% to 40%, and allowed employees to take training when it was most convenient (Alexander, 1992). A Department of Defense literature survey (Fletcher, 1990) concluded that, in higher education, interactive videodisc training roughly improved the performance of students in the 50th percentile to about the 75th percentile of performance. Big 5 Sporting Goods reported (Wilder, 1992) that training time for a point-of-sale cashier dropped about 75% to 50%, cashiers made fewer errors at the point of sale, cashiers and sales representatives retained their skills, and the company standardized training. Another study (Verano, 1987) found that the greater the level of interactivity in the course materials, the more students learned. Compared to standard classroom lecture, students who used interactive videodiscs retained 19% more information when tested four weeks after the training period.

Successful multimedia designers build their products with primary emphasis on the user. Multimedia designers determine which human sensory system is most efficient at receiving specific information, then use the media that involves that human sensory system. For example, to teach someone how to fix a part on a jet engine it is probably most efficient for the student to watch someone else fixing the part rather than hearing a lecture on how to fix the part. The human visual system is better at receiving this complex information. So, the designer for this multimedia product should probably use video as the medium of communication.

This heavy emphasis on the user's senses, rather than the media, means that we should probably call these product user interfaces "multisensory" rather than "multimedia.". The human senses that designers use most frequently in their multimedia products are sight, sound, and touch. Multimedia products often stimulate these senses simultaneously. For example, a user can see and hear a video, and then touch a graphical button to freeze the video image.

Since so many media are available to the multimedia user interface designer, it is very easy to overwhelm and confuse the users of these products. The following guidelines are based on the way people think and perceive information. These guidelines will help you build multimedia user interfaces that are easy and comfortable for people to learn and use.

General Guidelines

Here are some general guidelines.

• Keep the user interface simple -- This is the most important guideline to remember when you design multimedia user interfaces. Don't show off what you can do with multimedia technology. Instead, give the users only what they need to do their tasks. One study (Miller, 1956) suggests that you provide only five to nine choices for the user to select at one time. As Thoreau (1970, p. 222) wrote, "Our life is frittered away by detail. ... Simplify. Simplify.".
• Be consistent -- Use similar objects to perform similar functions throughout your product. That way, what users learn in one place they can use in other places (Bass and Hull, 1934; Hendrickson and Schroeder, 1941; Judd, 1908; Watson and Rayner, 1920). This quality helps users learn your product quickly and builds their confidence.
• Let the user control the interaction -- Let the user, rather than the computer, control what happens next. Let the user decide where to go, what to see, and when to leave. For example, when watching a video, let the user cancel the video rather than watching the whole thing before being able to move on. That way, if the user saw the video during an earlier interaction, he or she does not have to see it all over again. This feature is shown in Figure 1.
  
  
  

  Figure 1. User cancels video by pressing Cancel push button (from Najjar, 1991).
  
  Exceptions to this suggestion are computer-based training applications that include tasks the user needs to learn in a specific order.

• Give immediate, obvious feedback for every user action -- Let the user know that the computer is working and that it received and is responding to the user action. For example, when the user selects a push button, change the button to inverse video, and have the computer emit a short beep and process the action on the push button. This design characteristic will help keep the user interested in using your product (Skinner, 1954).
• Use familiar metaphors -- Take advantage of the user's prior learning by using familiar objects and actions. This characteristic improves learning (Ausubel, 1963; Frase, 1969; Mayer, 1974; Merrill and Stolurow, 1966) and increases user comfort. For example, if the user needs to dial a telephone number, provide an image of a telephone with a touch-sensitive key pad. The user recognizes the telephone and knows how to make it work. Other familiar metaphors include televisions, video cassette recorders, and calculators.
• Let the user safely explore your product -- The user should be able to navigate through your product without worrying about breaking or deleting something. If appropriate, don't provide a delete function. If the user needs to delete objects, design your user interface so the user can confirm or cancel a deletion. Let the user undo actions that are not easy to reverse. Let the user go back to the previous screen from the current screen. Make obvious what the user can do next. These design characteristics help make your user interface inviting and comfortable.

Sight

The medium of sight is helpful when you need to communicate detailed information, such as instructions, that the user may need to refer to later. Here are some guidelines that involve sight.

• Use pastel colors -- Except for videos and black and white text, it is generally a good idea to use slightly washed out, desaturated, impure colors. This is most important for the small objects that you put on screens. Scientists (Murch, 1983, 1984a, 1984b; Najjar, 1990) believe that these kinds of colors let people focus on small objects better and are less likely to cause objects to appear to float on the display. In your videos, stick with the original colors in which the video was shot. Use high-contrast foreground-background colors for text.
• Use fonts that have serifs -- Serifs are small lines that finish off the main strokes of a letter and often appear at the top or bottom of a letter. The text you are reading has a serif font. Use fonts with serifs because these fonts may help readers differentiate letters and because readers seem to prefer fonts with serifs (Paterson and Tinker, 1932; Tinker, 1963).

Sound

The medium of sound is helpful when you need to communicate short, simple information, such as confirmation beeps, that users don't have to refer to later. Here are some guidelines that involve sound.

• Limit your use of sound -- A product that is constantly buzzing, beeping, chattering, and singing to its users quickly becomes annoying. The user is working with your product to get a job done. Limit your use of sound to those instances where sound informs, rather than simply entertains, the user.
• Use lower frequency sounds -- High-frequency sounds can be shrill and annoying (Kryter, 1970), especially when the user has to hear them repeatedly. Generally, try to use lower frequency sounds, around 100 hertz to 1000 hertz (Deatherage, 1972), in your product.
• Let the user control sound volume quickly and easily -- The user may want to make the sound louder or softer for personal preference or to avoid disturbing people nearby. Design your product so the user can adjust the sound volume. Make sound controls large and obvious and let the user turn the sound off. These features are shown in Figure 2.
  
  
  

  Figure 2. User adjusts sound volume with slider and turns off sound with Sound off push button (from Najjar, 1991, 1992).
  
  

Touch

The medium of touch is helpful when you need to ask the user to make simple choices, such as product navigation decisions, without using a keyboard. Here are some guidelines that involve touch.

• Use large touch areas -- If your product has a touch-sensitive screen, make it easy for the users to activate the touch areas by making those areas fairly large. One study (Hall, Cunningham, Roache, and Cox, 1988) suggests using rectangular touch areas that are 40 mm wide and 36 mm high surrounding smaller visual targets, such as push buttons, that are 27 mm wide and 22 mm high. This is shown in Figure 3.
  
  
  

  Figure 3. Suggested sizes for touch areas and visual targets (from Hall et al., 1988).
  
  Be sure to separate your touch areas with inactive spaces. Limit the number of touch areas on one screen to about 10 or less. User larger, fewer touch areas if your product, such as a multimedia kiosk application, is designed for people to walk up and use.

• Use consistent colors and shapes to designate touch areas -- To make it obvious which objects can be selected with touch, use the same color (Christ and Corso, 1975; Teichner, Christ, and Corso, 1977) and shape for those objects that can be selected with touch. For example, always use a blue square to designate buttons that the user can select with touch.
• Use different touch styles where appropriate -- Depending on the touch technology you use, there are three general ways to design the touch interaction (Potter, Weldon, and Schneiderman, 1988). First, you can process the touch command when the user's finger touches down on the touch area. This technique is useful when you have just a few large touch-selectable objects, such as push buttons, on the screen and the user can easily recover after selecting the wrong object. Second, you can process the touch command when the user's finger goes up from a touch area. This technique allows the user to highlight touch areas, such as push buttons, by touching or sliding a finger over them until the desired touch area is highlighted. The user can select the highlighted touch area command by lifting the finger off it. This technique reduces errors when your touch areas are close together. Third, you can add a cursor that appears on the screen, say, half an inch above the user's finger location. This technique is useful when the user has to select text. Since the user's finger is not blocking the text, the user can read the text before selecting it with the cursor.

Conclusion

Multimedia user interfaces are powerful, compelling ways to help people use computers. To build a successful multimedia user interface, design with primary emphasis on the user. Focus on the users' sensory strengths and keep your user interface simple and obvious.

References

Alexander, M. (January 13, 1992). Multimedia focus turns to training. Computerworld, 26(2), 18.

Ausubel, D. P. (1963). The psychology of meaningful verbal learning. New York: Grune & Stratton.

Bass, M. J., and Hull, C. L. (1934). The irradiation of a tactile conditioned reflex in man. Journal of Comparative Psychology, 17, 47-65.

Christ, R. E., and Corso, G. M. (1975). Color research for visual displays (ONR-CR213-102-3). Las Cruces, New Mexico: New Mexico State University, Department of Psychology.

Deatherage, B. H. (1972). Auditory and other sensory forms of information presentation. In H. P. Van Cott and R. G. Kinkade (Eds.), Human engineering guide to equipment design (pp. 123-160). Washington, DC: US Government Printing Office.

Fletcher, D. (1990). Effectiveness and cost of interactive videodisc instruction in defense training and education (IDA Paper P-2372). Alexandria, Virginia: Institute for Defense Analyses.

Frase, L. T. (1969). Paragraph organization of written materials: The influence of conceptual clustering upon the level and organization of recall. Journal of Educational Psychology, 60(5), 394-401.

Hall, A. D., Cunningham, J. B., Roache, R. P., and Cox, J. W. (1988). Factors affecting performance using touch entry systems: Tactual recognition fields and resolution characteristics (TR 29.0787). Research Triangle Park, North Carolina: IBM Corporation.

Hendrickson, G., and Schroeder, W. H. (1941). Transfer of training in learning to hit a submerged target. Journal of Educational Psychology, 32, 205-213.

Judd. C. H. (1908). The relation of special training to general intelligence. Educational Review, 36, 28-42.

Kryter, K. D. (1970). The effects of noise on man. New York: Academic Press.

Mayer, R. E. (1974). Acquisition processes and resilience under varying testing conditions for structurally different problem-solving procedures. Journal of Educational Psychology, 66(5), 644-656.

Merrill, M. D., and Stolurow, L. M. (1966). Hierarchical preview vs. problem oriented review in learning an imaginary science. American Educational Research Journal, 3(4), 251-261.

Miller, G. A. (1956). The magical number seven plus or minus two; some limits on our capacity for processing information. Psychological Review, 63, 81-97.

Murch, G. M. (1983). The effective use of color: Physiological principles. Tekniques, 7(4), 13-16.

Murch, G. M. (1984a). The effective use of color: Perceptual principles. Tekniques, 8(1), 4-9.

Murch, G. M. (1984b). Physiological principles for the effective use of color. IEEE Computer Graphics and Applications, 4(11), 49-54.

Najjar, L. J. (1990). Using color effectively (or peacock's can't fly) (TR 52.0018). Atlanta: IBM Corporation.

Najjar, L. J. (1991). Digital video direction and speed controls. IBM Technical Disclosure Bulletin, 34(6), 36-38.

Najjar, L. J. (1992). Digital video editor. IBM Technical Disclosure Bulletin, 35(3), 75-77.

Paterson, D. G., and Tinker, M. A. (1932). Studies of typographical factors influencing speed of reading. X. Style of type face. Journal of Applied Psychology, 16, 605-613.

Potter, R. L., Weldon, L. J., and Schneiderman, B. (1988). Improving the accuracy of touch screens: An experimental evaluation of three strategies. In CHI'88 Conference Proceedings (pp. 27-32). New York: Association for Computing Machinery.

Skinner, B. F. (1954). The science of learning and the art of teaching. Harvard Educational Review 24(2), 86-97.

Teichner, W. H., Christ, R. E., and Corso, G. M. (1977). Color research for visual displays (ONR-CR213-102-3-4F). Las Cruces, New Mexico: New Mexico State University, Department of Psychology.

Thoreau, H. D. (1970). Walden; or, life in the woods. In P. V. D. Stern (Ed.), The annotated Walden (pp. 141-448). New York: Clarkson N. Potter.

Tinker, M. A. (1963). Legibility of print. Ames, Iowa: Iowa State University Press.

Verano, M. (1987). Achievement and retention of Spanish presented via videodisc in linear, segmented and interactive modes. Doctoral dissertation, University of Texas, Austin, TX (DTIC number AD-A185 893).

Watson, J. B., and Rayner, R. (1920). Conditioned emotional reactions. Journal of Experimental Psychology, 3(1), 1-14.

Wilder, C. (1992). Multimedia training: For good sports. Computerworld, 26(18), 35.

Biography

Larry Najjar is a human factors engineer in IBM UserFirst ^sm1 Usability, an organization that performs usability design and testing services for customers inside and outside of IBM. He earned his MS in Engineering Psychology from the Georgia Insitute of Technology in 1983. After graduating, he worked for Systems Research Laboratories in Hanover, Maryland, where he helped design the user interface for a multimedia word processing and transcription work station. In 1984, he joined IBM in Rockville, Maryland, where he worked on the new multimedia user interface for air traffic controllers. In 1989, he transferred to Atlanta where he helps design and test user interfaces for a wide variety of software products. He has published several invention disclosures on multimedia user interface design ideas.

¹ UserFirst is a service mark of International Business Machines Corporation.