Multimedia

Multimedia

The graphical flexibility of the Web permits inclusion of other media on a screen, including images, photographs, video, diagrams, drawings, and spoken audio.

Multimedia can hold the user’s attention, add interest to a screen, entertain, and quickly convey information that is more difficult to present textually.

Good interface design employs multimedia in a conservative and appropriate manner.

Graphics

Use graphics to:

o   Supplement the textual content, not as a substitute for it.

o   Convey information that can’t be effectively accomplished using text.

o   Enhance navigation through:

§  Presenting a site overview

§  Identifying site pages.

§  Identifying content areas.

Limit the use of graphics that take a long time to load.

Coordinate the graphics with all other page elements.

Images

General:

o   Use standard images.

o   Use images consistently.

o   Produce legible images.

o   Provide descriptive text or labels with all images.

o   Distinguish navigational images from decorative images.

o   Minimize:

§  The number of presented images.

§  The size of presented images.

o   Restrict single images to 5K.

o   Restrict page images to 20K.

o   Provide thumbnail size images.

o  Image animation.

o   Avoid extraneous or gratuitous images.

Color:

o   Minimize the number of colors in an image.

Format:

o   Produce images in the most appropriate format.

GIF.

JPEG.

Internationalization:

o   Provide for image internationalization.

Screen design:

o   Reuse images on multiple pages.

Image Maps

Use:

To provide navigation links to other content.

Advantages:

Can be arrayed in a meaningful and obvious structure.

Faster to load than separate images.

Disadvantages:

Consume a significant amount of screen space.

“Hot spots” not always obvious.

One’s location within image map is not always obvious.

Guidelines:

Use with caution.

Provide effective visual cues and emphasis to make it easy to identify link boundaries.

Ensure image maps are accessible to the vision impaired.

Photographs/Pictures

Use:

When every aspect of the image is relevant.

Guidelines:

Use JPEG format.

On the initial page:

Display a small version.

A thumbnail size image.

Zoom-in on most relevant detail.

Link to larger photos showing as much detail as needed.

Video

Uses:

To show things that move or change over time.

To show the proper way to perform a task.

To provide a personal message.

To grab attention.

Disadvantages:

Expensive to produce.

Slow to download.

Small and difficult to discern detail.

Guidelines:

Never automatically download a video into a page.

Create short segments.

Provide controls, including those for playing, pausing, and stopping.

Consider using:

Existing video.

Audio only.

A slide show with audio.

Diagrams

Uses:

To show the structure of objects.

To show the relationship of objects.

To show the flow of a process or task.

To reveal a temporal or spatial order.

Guidelines:

Provide simple diagrams.

Provide cutaway diagrams or exploded views to illustrate key points.

Drawings

Use:

When selective parts need to be emphasized or represented.

Guidelines:

Provide simple drawings showing minimal detail.

Provide a link to a complete drawing.

Animation

Uses:

To explain ideas involving a change in:

Time.

Position.

To illustrate the location or state of a process.

To show continuity in transitions.

To enrich graphical representations.

To aid visualization of three-dimensional structures.

To attract attention.

Disadvantages:

Very distracting.

Slow loading.

Guidelines:

Use only when an integral part of the content.

Create short segments.

Provide a freeze frame and stop mode.

Avoid distracting animation.

Audition

Uses:

As a supplement to text and graphics.

To establish atmosphere.

To create a sense of place.

To teach.

To sample.

Advantages:

Does not obscure information on the screen.

Shorter downloading time than video.

Disadvantages:

Is annoying to many people, including users and nonusers in the vicinity.

Can easily be overused, increasing the possibility that it will be ignored.

Is not reliable because:

Some people are hard of hearing.

If it is not heard, it may leave no permanent record of having occurred.

The user can turn it off.

Audio capability may not exist for the user.

Guidelines:

When words are spoken:

The content should be simple.

The speed of narration should be about 160 words per minute.

When used to introduce new ideas or concepts the narration should be slowed.

Off-screen narration should be used rather than on-screen narration.

Unless the narrator is a recognized authority on the topic.

Create short segments.

Provide segments of high quality.

Provide audio controls.

Play background audio softly.

Combining Mediums

Combinations:

Use sensory combinations that work best together:

Auditory text with visual graphics.

Screen text with visual graphics.

Integration:

Closely integrate screen text with graphics.

Relevance:

Both the visual and auditory information should be totally relevant to the task being performed.

Presentation:

Visual and auditory textual narrative should be presented simultaneously, or the visuals should precede the narrative by no more than 7 seconds.

To control attention, reveal information systematically.

Limit elements revealed to one item at a time and use sequential

revelations for related elements.

Animation must show action initiation as well as the action’s result.

Avoid animation that distracts from other more important information.

Downloading times:

Consider downloading times when choosing a media.

Testing:

Thoroughly test all graphics for:

Legibility.

Comprehensibility.

Acceptance.

Importance of combining multimedia

The proper multimedia combinations can improve learning and performance. Hearing spoken text combined with a visual graphic is an especially useful combination, especially for complex tasks. All studies found this pairing useful.

Visual graphics do enhance learning and performance. In the Bowers and Lee study, the various graphical combinations yielded the higher learning rates.

Single-dimensional textual media are not as successful when used alone. In the Bowers and Lee study, viewing text or hearing spoken text alone yielded the lowest learning rates.

Hearing spoken text and viewing text at the same time may not be great, but it may not be terrible, either. This combination yielded “middle-of the- road” results in the Bowers and Lee study. The dual code theory would suggest, however, that its use be minimized. Exercise caution in this area.

Visual text should always be integrated with related visual graphics. Tindall-Ford et al. found much better user performance when visual text was closely integrated with, or adjacent to, related visual graphics. It will be much easier for user to coordinate and integrate the visual materials. Presenting spatially separated text and related graphics places greater demands on working memory.