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.


Use Simple Background Images:

• Use background images sparingly and make sure they are simple, especially if they are used behind text.
• 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.

Label Clickable Images:

• Ensure that all clickable images are either labeled or readily understood by typical users.
• 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.

Ensure that Images Do Not Slow Downloads:

• Take steps to ensure that images on the Web site do not slow page download times unnecessarily.
• 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.

Use Video, Animation, and Audio Meaningfully:

• Use video, animation, and audio only when they help to convey, or are supportive of, the Web site's message or other content.
• 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.

Include Logos:

• Place your organization's logo in a consistent place on every page.
• 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.

Graphics Should Not Look like Banner Ads:

• Do not make important images look like banner advertisements or gratuitous decorations.
• 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.

Limit Large Images Above the Fold:

• Do not fill the entire first screenful with one image if there are screensful of text information below the fold.
• 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.

Ensure Web site Images Convey Intended Messages:

• Ensure that Web site images convey the intended message to users, not just to designers.
• 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.

Limit the Use of Images:

• Use images only when they are critical to the success of a Web site.
• 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.

Include Actual Data with Data Graphics:

• Include actual data values with graphical displays of data when precise reading of the data is required.
• 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.

Display Monitoring Information Graphically:

• Use a graphic format to display data when users must monitor changing data.
• 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.

Introduce Animation:

• Provide an introductory explanation for animation prior to it being viewed.
• 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.

Emulate Real-World Objects:

• Use images that look like real-world items when appropriate.
• 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.

Use Thumbnail Images to Preview Larger Images:

• When viewing full-size images is not critical, first provide a thumbnail of the image.
• 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.

Use Images to Facilitate Learning:

• To facilitate learning, use images rather than text whenever possible.
• 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.

Using Photographs of People:

• Photographs of people may or may not help build trust in Web sites.
• 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.

Source:[usability.gov]