Multimedia in the Classroom by Palmer W.Agnew, Anne S. Kellerman, and Jeanine Meyer. Boston: Allyn and Bacon, 1996, pp. 310-315.

Overall Project Style

• Design with the real or imagined users in mind.
• Consider the intended environment, including hardware and software. Must the project look good on a television monitor? Must it flow over a network?
• Identify the main points and summarize using the best media for each piece of information. Stick to the crux of the story without irrelevant items, no matter how cute or tempting they may be. Concentrate on content rather than style or form. If an image contains a strong idea, the image will look strong.
• Be consistent throughout the project.
• Use consistent formats in all screens or in each major section of a project.
• Use the same fonts, button designs, colors, border styles, backgrounds, methods of interacting with text boxes, control panels, and special effects such as transitions.
• Don't introduce an oval button in one place and then use a square button elsewhere, unless you have a real reason for the change.

Screen Layout

• Provide a title at the top of every screen.
• Provide a comfortable place to start scanning the screen, a place to go next, and a place to finish.
• People read English from top to bottom and left to right. Try to organize a screen the same way, even if the screen contains graphics and images as well as text.
• Put information that users need first in the upper left. Put what users need last, such as buttons to select what screen to see next, in the lower right.
• Concentrate critical information in the center of the screen. Color critical information in red and green.
• Divide all screens into the same zones or grids and place similar functions in similar locations on all screens.
• Avoid placing important objects or text near outer borders of the screen. Doing so would require separate eye focusing and additional eye movement. Doing so would also risk that a television display will cut off important information.
• Center text on screens that are primarily text screens.

Boxes

• Boxes around text and other objects help separate objects and help emphasize what is in a box.
• A box draws your eye to what the box contains.
• A box interrupts the flow of the page, for good or for ill.

Buttons That Invoke Links

• Provide meaningful interactivity.
• Provide a superb Help facility that contains answers to all questions that might occur to users. Let the computer take the memory burden off the users.
• Provide users with the feeling that they can control where they are going and know where they have been. Never expect users to keep track of more than three successively deeper paths taken with hyperlinks without providing substantial assistance, such as a graphical map depicting the structure
• Prepare buttons carefully.
• The fewer buttons, the better.
• Use at most a dozen buttons on any one screen.
• Use the same style for buttons that provide the same controls throughout a project.
• Use meaningful labels for each button rather than a cryptic label or no label at all.
• Use button colors and locations as visual hints about what buttons do.
• Minimize the number of keystrokes a user must enter.

Colors

• Use at most five colors on a screen.
• Be consistent in coloring different screens. Do not alter the coloring scheme in the middle, without a very good reason.
• Use colors that match familiar meanings, such as red for stop or danger.
• Select screen colors that are pleasing to the intended audience.
• Use beige or blue tones at the edges of the screen.
• Use blue tones for backgrounds.
• Use bright reds and yellows when you want users to respond quickly.
• Present alphanumeric information in the spectrum of red, white, and yellow.
• Use only quiet colors, such as green or blue, if a project is likely to appear on television screens. Bright colors are attractive on computer screens but not on televisions.
• Note that natural images, that is, pictures of the real world, have opposite color requirements from graphics. Whereas graphics require a maximum of five colors, a natural image requires a minimum of 256 colors and benefits greatly from having as many as 16 million colors.

Backgrounds

• Use a background that is more interesting than a plain color, to add a professional touch.
• Do not make a background too complicated or it will distract users from the foreground's content and may make text unreadable.
• A close-up photograph of a piece of granite or a gradual shading from one neutral color to another are good backgrounds, but an aerial photograph of a city or a page of text are not.

Getting Attention

• Put images and audio that will attract attention at the start of a project. One glance at this grabber must draw a user into the project and motivate the user to continue. Make one keyword in the grabber HUGE.
• Use motion on the screen to attract instant attention. Consider starting a screen with motion in the upper left corner and later, when its time for a user to leave the screen, initiating motion in the lower right corner.
• Attract attention to important text with a flashing border. Note that making the text itself flash makes the text hard to read.
• Alternatively, flash an important message a few times to attract the user's attention to it, then stop the flashing so the user can read the text.
• Consider putting important material near where red touches blue. A user's eye goes first to the area of highest contrast, unless something on the screen is moving.
• Put a list's most important items at the top and bottom. A user's eye goes to the top item in the list first, then skips to the bottom item.

Synergy among Media

• In general, play audio of a voice along with a screen that contains video, image, or graphics but not text. Do not expect people to both read and listen at the same time
• Play a voice simultaneously with displaying text only if both media use exactly the same words. Even using an abbreviation in the text, and a complete word in the voice, destroys a user's concentration. Adding a spoken summary that plays while a user is reading a detailed explanation on the screen prevents a user from concentrating on either the summary or the details.
• Consider delaying the start of audio for a few moments to allow a user to read text without being distracted with audio.
• Consider letting the user decide when to start audio
• Never make narration the primary way of conveying important information, in a sight-and-sound medium.
• Use narration and visual materials to reinforce each other.
• Do not present any sort of video, including animation, when you expect people to either read or listen to unrelated material. Motion is too distracting. Of course, playing audio and video of a speaker is fine.
• Use transitions such as wipes and fades to avoid abrupt changes between media.
• Use a few types of transitions consistently, sparingly, and with a definite purpose, rather than using all types of transitions for the glitz.

Text Techniques

• When in doubt, use large white characters on a pale blue background.
• White characters on a blue background may not be most effective for attracting attention or being convincing.
• Make sure text is readable, quickly and easily, on any display that must show the project, not only on the display used to create it. If the project must show on a television monitor or projection television, be sure to test it.
• Emphasize simplicity. In particular, use few different fonts and sizes.
• Use a sansserif font for titles and bullets. (Serifs are short lines added to some letters. A font with no serifs is called sansserif.)
• Avoid large blocks of text, but if you must use a lot of text, use a serif font.
• Use an appropriately sized font. Be sure the text is large enough to read. Consider centering the text.
• Use active verbs.
• Use parallel constructions.
• Be cautious about any use of alliteration, simile, or metaphor.
• Avoid pronouns.
• Round off numbers to indicate their accuracy.
• Avoid imperatives and personal interpretations.
• Use simple, everyday words whenever possible.
• Use upper and lower case. NEVER USE ALL UPPER CASE.
• Don't forget the fundamental hypertext techniques of using few characters per line, using few lines per screen, and using links to give the information a comprehensive and comprehensible structure.

Graphics Techniques

• Use graphics to guide users to important information, as opposed to distracting them toward unimportant information.
• When possible, tie words to graphics. For example, if a screen's title contains the word circle, consider basing the screen's design on a circle.
• Use graphics that are relevant to the objectives and ideas communicated in text.
• Make graphic objects concrete and meaningful and consider users' familiarity with the specific area.
• Consider how users interpret individual graphics, along with their ability to perform required interactions.
• Use particular graphic objects that interest specific user groups.
• Rather than trying to convey too much information in one image, use several simpler images.
• When graphics must contain a lot of information, emphasize the important information on which you want users to focus their attention. Use visual cues, such as labels or arrows.

Audio Techniques

• Clipping a microphone to a speaker's lapel gives far better results than using the microphone that is built into a video camera. Be sure that the microphone points at the speaker's lips. Place it far enough to the side so that the speaker does not blow air directly at it when she says "popcorn" or "telephone". This will avoid recording the sounds of moving air as lip blast.
• For best results, the interviewer and the person being interviewed need separate microphones on their lapels. If at all possible, route both microphones through an inexpensive audio mixer box and listen to the mixed result through headphones to be sure that you are recording both people at the same volume. However, merely using a cheap adapter that has two inputs and one output and connecting that output to video camera is far better than using the camera's built-in microphone.

Back Home