Interfacing media: User-centered design for media-rich Web sites

Designing Web sites is not all fun and games. Indeed, Web design is a serious business. The task of Web designers is to construct the highways and byways by which users navigate the Web. A misstep on the part of the designer may mean that users will fail to reach their destination. The consequences of poor design are particularly great for media-rich Web sites - those that include such elements as images, animations, audio, or video. These high-end sites can easily derail users by requiring them to install special software, endure lengthy downloads, or load irrelevant materials. In fact, many users will decide to change course if the demands on their time and technology are too great. Web designers can minimize these risks by following the guidelines below, setting about their task from the user's point of view.

The interface exists to enable user interaction.

There are two emerging schools of thought regarding Web design, one that is based on art and expression, and a more utilitarian model based on functionality. With the first, a Web site is created as an expression of the Web author, and with the second, the design is driven by the needs and expectations of the user. While creativity and inspiration play a part in design, an effective Web interface - one that users understand and can navigate easily - is far more a feat of engineering, of identifying the user's goals and providing the means to achieve them. To paraphrase Richard Hendel from his book On Book Design, "[Web] design is not one of those crafts that allow for infinite and unfettered creativity."

User-centered design is an imperative for media-rich Web sites. Images, animations, video, and audio all come with significant overhead for the user. You tax users' technology and patience when you require them to download files, install plug-ins, wait for files to load, and endure delays and glitches in order to access media. So, although it may set the mood nicely to have a horn concerto play automatically on the pages of your Mozart course Web site, from the user's perspective this aspect of your Web interface may be a nuisance if, for example, they do not have the necessary plug-in, or if they load the pages from a public location. When designing for the Web - particularly when including media materials - it is essential that you step away from your content and design and into the shoes of the user.

Make sure the media on your Web site is relevant.

With the many possibilities afforded by Web technology, it is tempting to use media elements, well, simply because we can. And though the use of images, animations, video, or sound to enliven a page is not necessarily "bad," the decision about what media to use becomes a question of relevance. All too often Web authors include visual or moving elements on the page for the purpose of holding users' attention. This technique is based on the assumption that Web users have short attention spans, which in many cases may be true. However, the solution is not to add gratuitous "eye candy" to your Web presentation. Indeed, this type of visual display can detract attention from the main content of your page by commanding too much of the user's attention. When thinking about media for your Web pages, keep in mind the adage "content is king." Consider the nature of your materials: If images or other media elements would help communicate your message, then by all means use them. But if the best medium to convey your message is through the written word, then stick unflinchingly to text alone.

Send media to the user only in response to an explicit request.

One aspect of the Web is that you don't always know what you're getting into. There is a certain risk involved in "dialing up" a Web page, and as you sit waiting while the system churns away and the status bar flashes and elements slowly "materialize" on the screen, there is an urge to bail. The longer the wait, the stronger the urge. This tolerance factor is particularly important to consider when designing media-rich Web sites. If you are designing a site for a committed audience - for students in a course Web site, for example - you have a bit more leeway: Because your students must access the materials to excel in the course, their tolerance for delays will be higher than that of a casual user. Nonetheless, to design an effective media interface, high-demand content such as large images or media files should not be part of your basic page design. These materials should appear on secondary pages that are described and can be accessed from the main pages of your site. For example, the thumbnail interface to the image collection on the Africa Focus Web site provides users with three options for viewing search results. Users can browse thumbnails before electing to load the full-sized images.

Provide information about your media so users can make informed decisions.

Large files and proprietary formats are not the bane of the Web. Indeed, the Web thrives in part because it provides access to materials in different formats. The trouble comes when users happen upon high-demand materials and are unprepared to receive them. For example, we all dread the moment when, on loading a Web page, the browser announces some sort of system deficiency. At times we suffer the ordeal that follows - downloading and installing software without knowing what it is or what it's for - only to find that the materials we took such pains to view are irrelevant. However, the fault in this scenario lies not with the materials themselves but with the interface to the materials. A media interface should provide users with previews and system requirements before they load the files. For example, the interface might include a media menu page with a thumbnail view, a brief summary, and the file size and run time of the media, as well as details about any special software requirements. That way users can make sure their systems are properly configured and that they have enough bandwidth, time, and patience to load the materials. For example, Nova offers an excellent interface on its media-rich Web sites. In Shackleton's Antarctic Odyssey the QuickTime VR panoramas are accessible from a menu page that displays a description of the software requirements for viewing the content, and a panorama thumbnail and file size indicator for each of the movies.

Provide different views for different types of users.

One of the greatest challenges facing Web authors is designing sites that will accommodate all users. Particularly with media, it is easier to ignore technology-disabled users who are connecting to the Internet via slow modems on out-dated machines, to say nothing of those for whom media content may be totally beyond reach - users who are physically, visually, or hearing impaired. Indeed, any time you include media on your pages you are potentially shutting out users, which is why you should take extra care with a media interface. Provide as many alternate views of your materials as possible to accommodate different users. For example, if you are including a video of a guest speaker on your course Web site, also provide a text-only transcript of the presentation, and provide captions to go along with the video. You might also provide an audio-only version, or audio synchronized with still images. By offering different views, users with disabilities, either physical or technological, will not be excluded from your materials.

Leave control in the hands of the user.

One of the most disconcerting Web moments is when you load a page for the first time and music begins to play, and there is no obvious way to turn it off. Many users in this situation will simply close the browser window to make the music stop, which means they never get a chance to view the page content. When designing a media interface, let interaction with your media be entirely user-driven. Always include user controls, such as a media controller bar, and make sure users have a way to turn it off. Avoid prescribed playback options like auto-play or looping that take control away from the user. With auto-play, for example, media files begin playing when a Web page is loaded. If the page has other elements, such as descriptive text, the user who only wants the text will find the video distracting. Design your media interface so that files play only when the user explicitly elects to initiate playback.

Page information

Go back to Articles menu