Chapter 14
Graphics, Images, and Multimedia
Graphics, Images, and Multimedia
Graphics are used on many, if not most, web pages. When used appropriately, graphics can facilitate learning. An important image to show on most pages of a site is the organization’s logo. When used appropriately, images, animation, video, and audio can add tremendous value to a Web site. When animation is used appropriately, it is a good idea to introduce the animation before it begins.
Many images require a large number of bytes that can take a long time to download, especially at slower connection speeds. When images must be used, designers should ensure that the graphics do not substantially slow page download times. Thumbnail versions of larger images allow users to preview images without having to download them.
Sometimes it is necessary to label images to help users understand them. Usability testing should be used to help ensure that Web site images convey the intended message. In many cases, the actual data should be included with charts and graphs to facilitate fast and accurate understanding.
It is usually not a good idea to use images as the entire background of a page. Complex background images tend to slow down page loading, and can interfere with reading the foreground text.
Experienced users tend to ignore graphics that they consider to be advertising. Designers should ensure that they do not create images that look like banner ads. Also, they should be careful about placing images in locations that are generally used for advertisements.
Research-Based Web Design & Usability Guidelines
14:1 Use Simple Background Images
Relative Importance:
Guideline: Use background images sparingly and make sure they are simple, especially if they are used behind text.
Comments: Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates. If background images must be employed, use small, simple images with ’tiling,’ and/or keep the image resolution as low as possible.
Sources: Boyntoin and Bush, 1956; Cole and Jenkins, 1984; Detweiler and Omanson, 1996; Hackman and Tinker, 1957; Jenkins and Cole, 1982; Levine, 1996; Levy, et al., 1996; Spencer, Reynolds and Coe, 1977a; Spencer, Reynolds and Coe, 1977b; Tinker and Paterson, 1931; Tinker, 1963.
Example:
Strength of Evidence:
Graphics, Images, and Multimedia
Complex graphics can obscure text, making it very difficult for users to read the site’s content.
14:2 Label Clickable Images
144
Relative Importance:
Guideline: Ensure that all clickable images are either labeled or readily understood by typical users.
Comments: Occasional or infrequent users may not use an image enough to understand or remember its meaning. Ensure that images and their associated text are close together so that users can integrate and effectively use them together. Additionally, alt text should accompany every clickable image.
Sources: Booher, 1975; Evans, 1998; Hackman and Tinker, 1957; Spool, et al., 1997; Tinker and Paterson, 1931; Vaughan, 1998; Williams, 2000.
Example:
Strength of Evidence:
Graphics, Images, and Multimedia
The addition of labels is essential for a user to understand the clickable image links.
14:3 Ensure that Images Do Not Slow Downloads
Guideline: Take steps to ensure that images on the Web site do not slow page download times unnecessarily.
Comments: User frustration increases as the length of time spent interacting with a system increases. Users tolerate less delay if they believe the task should be easy for the computer. One study reported that users rated latencies of up to five seconds as ’good.’ Delays over ten seconds were rated as ’poor.’ Users rate pages with long delays as being less interesting and more difficult to scan. One study reported no relationship between slow page download times and users giving up.
To speed download times, use several small images rather than a single large image on a page; use interlacing or progressive images; and use several of the same images. Designers should also minimize the number of different colors used in an image and put HEIGHT and WIDTH pixel dimension tags in an image reference. To achieve faster response time for users with dial-up modems, limit page size to less than 30,000 bytes.
Sources: Bouch, Kuchinsky and Bhatti, 2000; Farkas and Farkas, 2000; Marchionini, 1995; Martin and Corl, 1986; Nielsen, 1996a; Nielsen, 1997a; Nielsen, 1999c; Nielsen, 2000; Perfetti, 2001; Ramsay, Barbesi and Preece, 1998; Schroeder, 2003; Sears, Jacko and Borella, 1997; Selvidge, Chaparro and Bender, 2001; Shneiderman, 1984; Tullis, 2001.
Example:
Relative Importance:
Graphics, Images, and Multimedia
Strength of Evidence:
The entire main content area - the background, text and photo is one large image. The page would load much quicker if normal html had been used here.
14:4 Use Video, Animation, and Audio Meaningfully
146
Guideline: Use video, animation, and audio only when they help to convey, or are supportive of, the Web site’s message or other content.
Comments: Multimedia elements (such as video, animation, and audio) can easily capture the attention of users; therefore, it is important to have clear and useful reasons for using multimedia to avoid unnecessarily distracting users. Some multimedia elements may take a long time to download, so it is important that they be worth the wait.
Used productively, multimedia can add great value to a site’s content and help direct users’ attention to the most important information and in the order that it is most useful.
Sources: Campbell and Maglio, 1999; Chen and Yu, 2000; Faraday and Sutcliffe, 1997; Faraday, 2000; Faraday, 2001; Harrison, 1995; Nielsen, 2000; Park and Hannafin, 1993; Reeves and Rickenberg, 2000; Spinillo and Dyson, 2000/2001; Sundar, Edgar and Mayer, 2000.
Relative Importance:
Graphics, Images, and Multimedia
Headings, Titles, and Labels
Links
Headings, Titles, and Labels
Strength of Evidence:
14:5 Include Logos
Relative Importance:
Guideline: Place your organization’s logo in a consistent place on every page.
Comments: Users are frequently unaware when they click through to a different Web site. Having a logo on each page provides a frame of reference throughout a Web site so that users can easily confirm that they have not left the site. Ideally, the logo should be in the same location on each page: many designers place the logo in the top left corner.
Sources: Adkisson, 2002; Farkas and Farkas, 2000; Marchionini, 1995; Nall, Koyani and Lafond, 2001; Nielsen, 1999d; Omanson, Cline and Nordhielm, 2001; Omanson, et al., 1998; Osborn and Elliott, 2002; Spool, et al., 1997.
Example:
Strength of Evidence:
Research-Based Web Design & Usability Guidelines
14:6 Graphics Should Not Look like Banner Ads
147
Guideline: Do not make important images look like banner advertisements or gratuitous decorations.
Comments: In a recent study, a graphic developed to inform users about access to live help was not clicked because many users thought it was an advertisement. Even though the graphic was larger than most other graphics on the page, some users missed the item completely because the graphic looked too much like a decoration or a banner advertisement.
Sources: Ahmadi, 2000; Badre, 2002; Bayles, 2002; Benway, 1998; Ellis and Kurniawan, 2000.
Example:
Relative Importance:
Links
Headings, Titles, and Labels
Headings, Titles, and Labels
Graphics, Images, and Multimedia
Strength of Evidence:
This graphic, which contains three major, linked headers, looks like a banner advertisement. Consequently, users may skip over this design element, thus missing the headers.
See page xxii for detailed descriptions of the rating scales
Research-Based Web Design & Usability Guidelines
14:7 Limit Large Images Above the Fold
148
Relative Importance:
Guideline: Do not fill the entire first screenful with one image if there are screensful of text information below the fold.
Comments: Large graphics that cover most of the screen at the top of the page suggest to users that there is no more information below the graphic. In one study, because a graphic filled the screen, some users did not use the scrollbar to scroll down to more content. In fact, some users did not even suspect that more information might be located below the fold.
Sources: Bailey, Koyani and Nall, 2000; Chen and Yu, 2000; Golovchinsky
and Chignell, 1993; Nielsen and Tahir, 2002.
Example:
Strength of Evidence:
Graphics, Images, and Multimedia
As the scroll bar shows, there are several additional screenfuls of information below this large navigation graphic. Users may not look
at the scroll bar, thus missing that information.
14:8 Ensure Web Site Images Convey Intended Messages
Guideline: Ensure that Web site images convey the intended message to users, not just to designers.
Comments: Users and designers tend to differ in what they think is appropriate to convey a message. When attempting to select the best graphic from a set of graphics, users tend to select those that most other users would have selected (i.e., those that look familiar), while most developers favor graphics that look more artistic. One study found that seventy-five percent of users are able to find information on a content and link-rich site, whereas only seventeen percent could find the same information on a graphic-intensive site.
Sources: Ahmadi, 2000; Evans, 1998; Nielsen and Tahir, 2002; Spool, et al., 1997.
Example:
Relative Importance:
Graphics, Images, and Multimedia
Strength of Evidence:
The new IRS site (left) is content and link-rich, allowing users to find information much faster than the old, graphic-heavy IRS site (right).
See page xxii for detailed descriptions of the rating scales
Research-Based Web Design & Usability Guidelines
14:9 Limit the Use of Images
150
Relative Importance:
Guideline: Use images only when they are critical to the success of a Web site.
Comments: Ensure that a Web site’s graphics add value and increase the clarity of the information on the site. Certain graphics can make some Web sites much more interesting for users, and users may be willing to wait a few extra seconds for them to load. Users tend to be most frustrated if they wait several seconds for a graphic to download, and then find that the image does not add any value. Some decorative graphics are acceptable when they do not distract the user.
Sources: Badre, 2002; Evans, 1998; Nielsen, 1997e; Nielsen, 1999b; Nielsen, 2000; Nielsen, 2003; Spool, et al., 1997; Wen and Beaton, 1996; Williams, 2000.
Example:
Strength of Evidence:
Graphics, Images, and Multimedia
The placement of this image disrupts the left justification of the other page elements and it is visually distracting, drawing the user’s attention from the site’s content.
This image is unrelated to the accompanying content.
14:10 Include Actual Data with Data Graphics
Guideline: Include actual data values with graphical displays of data when precise reading of the data is required.
Comments: Adjacent numeric annotation might be added to the ends of displayed bars on a bar graph, or to mark the points of a plotted curve. Some displays may require complete data annotation while others may require annotation only for selected data elements.
Sources: Pagulayan and Stoffregen, 2000; Powers, et al., 1961; Smith and Mosier, 1986; Spool, et al., 1997; Tufte, 1983.
Example:
Relative Importance:
Graphics, Images, and Multimedia
Strength of Evidence:
Placing the mouse pointer over a data point invokes this box with detailed information.
14:11 Display Monitoring Information Graphically
152
Guideline: Use a graphic format to display data when users must monitor changing data.
Comments: Whenever possible, the computer should handle data monitoring and should call abnormalities to the users’ attention. When that is not possible, and a user must monitor data changes, graphic displays will make it easier for users to detect critical changes and/or values outside the normal range.
Sources: Hanson, et al., 1981; Kosslyn, 1994; Powers, et al., 1961; Smith and Mosier, 1986; Tullis, 1981.
Example:
Relative Importance:
Graphics, Images, and Multimedia
Strength of Evidence:
14:12 Introduce Animation
Relative Importance:
Guideline: Provide an introductory explanation for animation prior to it being viewed.
Comments: Providing an explanation of animation before it begins will help users better integrate the animation and associated content. In other words, briefly explain to users what they are about to see before they see it. Also, allow animation to be user-controlled. The user should be able to pause, stop, replay, or ignore animation or other multimedia elements.
Sources: Evans, 1998; Faraday and Sutcliffe, 1999.
Example:
Strength of Evidence:
Graphics, Images, and Multimedia
Each video clip is accompanied by text that explains to the user what they are about to view. In addition, this Web site allows the user to control when to start the video clip.
14:13 Emulate Real-World Objects
154
Relative Importance:
Guideline: Use images that look like real-world items when appropriate.
Comments: Images (e.g., pushbuttons and navigation tabs) are likely to be considered as links when they are designed to emulate their real-world analogues. If a designer cannot make such images emulate real-world objects, the image may require at least one additional clickability cue, such as a descriptive label (like ’Home’ or ’Next’) or placement on the page. A text label can help inform users about a link’s destination, but in one study some users missed this type of image link, even those that contained words, because the words were not underlined.
Sources: Ahmadi, 2000; Bailey, 2000b; Galitz, 2002; Nolan, 1989.
Example:
Strength of Evidence:
Graphics, Images, and Multimedia
These control items are designed to look like real-world items. The buttons below, for example, look like the buttons you might find on an Automated Teller Machine. The control item image to the right controls video on a Web site, and thus is designed to look like a control on a VCR or DVD player.
14:14 Use Thumbnail Images to Preview Larger Images
Guideline: When viewing full-size images is not critical, first provide a thumbnail of the image.
Comments: By providing thumbnails of larger images, users can decide whether they want to wait for the full image to load. By using thumbnails, those who do not need or want to see the full image are not slowed down by large image downloads. Link the thumbnail image to the full-size copy.
Sources: Levine, 1996; Nielsen and Tahir, 2002.
Example:
Relative Importance:
Graphics, Images, and Multimedia
Strength of Evidence:
When one of the thumbnail images is clicked on the left, a new window pops up with a larger image and a brief description. This also offers a high resolution jpg file of the same image.
See page xxii for detailed descriptions of the rating scales
14:15 Use Images to Facilitate Learning
156
Relative Importance:
Guideline: To facilitate learning, use images rather than text whenever possible.
Comments: The superiority of pictures over text in a learning situation appears to be strong. For example, pictures of common objects are recognized and recalled better than their textual names. Exceptions seem to occur when the items are conceptually very similar (e.g., all animals or tools), or when items are presented so quickly that learners cannot create verbal labels.
Sources: Golovchinsky and Chignell, 1993; Krull and Watson, 2002; Levy, et al., 1996; Lieberman and Culpepper, 1965; Nelson, Reed and Walling, 1976; Paivio and Csapo, 1969; Paivio, Rogers and Smythe, 1968; Rodden, et al., 2001; Williams, 1993.
Example:
Strength of Evidence:
Graphics, Images, and Multimedia
These illustrations facilitate faster learning of key concepts.
14:16 Using Photographs of People
Relative Importance:
Guideline: Photographs of people may or may not help build trust in Web sites.
Comments: In one e-commerce study, having a labeled photograph on the Web site was perceived as more trustworthy than having a photograph with no label. Further, having a photograph with no label was perceived as more trustworthy than having no photograph at all. Highly experienced users showed the same degree of trust as users that were moderately experienced or inexperienced.
However, another study recommended that photos not be used to increase the trustworthiness of a Web site. They found that the presence of a photo did not affect the trust of a site, or user preferences for a site.
Sources: Riegelsberger, Sasse and McCarthy, 2003; Steinbrück, et al., 2002.
Example:
Strength of Evidence:
Graphics, Images, and Multimedia
Photographs of people are used widely and very differently throughout the Federal government.
