Graphics and Media

The author goes into an extended rant at the beginning of this chapter about the negative effects on download speed (EN: dated advice) and the overuse of media gimmicks that cause distraction, but also concedes that some graphics and media enhance understanding of the content, facilitate usability by providing examples and models, and enhance the user's experience of a Web site.

1. Use simple background images (4:5)

One issue is legibility; a patterned or complex background image can make text illegible. Another issue is bandwidth; a large background graphic slows the load speed (designers are advised to take advantage of tiling).

2. Label clickable images (4:4)

This echoes advice given in the chapter on links: users do not immediately recognize that an image acts as a link, and need to be told so explicitly.

Also, for accessibility, ALT text should be used for clickable images that describes their function (not just their appearance).

3. Ensure that images do not slow download (4:4)

The author suggests restricting the number of images used in any given page so that the download time isn't "unnecessarily" increased (EN: no criteria as to necessity or acceptability. Also, the supporting research dates to 2001).

The author suggests the use of optimal image formats (JPEG for gradient images, GIF for solid color, and limit the palette breadth of GIF images) and specifying the height and width attributes in image tags to increase the load speed of non-graphical page elements.

Also, do not use an image to provide text information (embedding text as an image), as this is highly inefficient.

4. Use media meaningfully (4:5)

Due to the sever impact of page load speed and the typical additional software requirements to use media objects, they should be used only when they convey or support the Web site's message or purpose.

The author stresses that media used as a gimmick to attract attention is more often a distraction, and adds no value to the site.

5. Include logos (4:5)

A logo identifying the organization that owns the site should be consistently and prominently placed in all pages. The author specifically lauds the convention of the placement of the logo in the top-left of the screen.

EN: This is advice for government agencies, and may apply to most business sites (the company logo) - but it strikes me that in some cases, a logo that identifies the site may be more significant than one that identifies the content owner, especially in cases where a specific organization operates multiple Web sites.

6. Graphics should not resemble ads (4:4)

Important messages or page headers should not be presented in a format consistent with the dimensions and treatment of advertisements, as users are conditioned to ignore them.

EN; The text is specific to banner ads, but advertisers have since switched to other formats (probably in hope of not being ignored), and users have learned to ignore them as well. Also, in addition to ads, there are button-style ads, "chicklets" and other badges that are often quite useless, and that users have also become conditioned to ignoring. At any time, be aware of these various items, both in terms of their appearance and placement on a page, so that important content is not ignored.

7. Limit large images above the fold (4:3)

Do not use graphics that completely fill the first screen and force users to scroll past them to get to meaningful content. Not only is this a nuisance, but it may cause some users (in cases where the graphic filsl the screen and the break beneath the image corresponds to the bottom edge of the window) to overlook the fact that there is anything below the graphic at all

8. Ensure that images convey intended messages (4:3)

Users and designers differ in their opinion of what makes a graphic appropriate. Designers favor images that have visual appeal, whereas users favor those that contribute to their understanding of material or, when images are purely decorative, those that are small and unobtrusive.

Research shows a considerable difference (over fifty percent) in the ability of users to locate meaningful information within a few seconds on graphically intense pages (17%) versus text-only versions of the same pages (75%).

9. Limit the use of images (3:2)

The author advises using images only when they are critical to the success of a Web site, and eliminating all others.

EN: This seems old-school and extreme. Some compromise is necessary so that imagery can be used to provide an enhanced experience without becoming an obstruction.

10. Include actual data with graphs (3:4)

When data is represented graphically, provide the data values as well (example: percentages within a pie chart, numbers on a bar graph)

EN: Other sources declaim this practice as "junky" - it seems to be a matter of user preference. To accommodate both sets of user preferences, as well as disabled users, it may be a good alternative to provide a link to a textual representation of data whenever a graph is used.

11. Display monitoring information graphically (3:4)

Contrary to the general advice of 10, users almost universally prefer graphical displays to show comparisons between data to more clearly indicate the comparison (for example, over a time scale)

12. Introduce Animation (2:3)

The author suggests providing a text description of what a video or media (Flash) animation that illustrates or models a concept. The advice is to provide this description before the video is played. This explains the relevance so users better understand the animation, allows users to choose whether to take the time to view it at all (if the "get it" from text), and enables disabled users (who cannot see or hear the animation) to understand the concept being modeled.

EN: Generally agreed, but the advice dates to 1998, so wonder if the description can be done in arrears, side-by-side on the same page, or as a link where an animation is displayed, due to advances in media and connection speeds.

13. Emulate real-world objects (2:4)

Use images that look like real-world items when appropriate. The specific example given is video player controls that resemble the buttons of a VCR.

EN: The reference to "VCR" indicates the datedness of this advice. My sense is that most audio/video media have standard controls, which should be used by default (users "learn" to play a video of a certain type). Flash video, where the designer can alter controls in a wide variety of ways, are problematic - making controls similar to standard Web media, rather than real-world appliances, is probably more effective.

14. Use thumbnails to preview large images (2:2)

When viewing a full-size image is not strictly necessary (i.e., sufficient detail to convey meaning is present at a smaller size), provide a thumbnail that links to the full-size images. Also, when there are several images in a gallery-style presentation, present thumbnails to enable the user to have an overview and select the images they wish to view.

15. Use images to facilitate learning (1:5)

Contrary to the previous advice, the author indicates images should be used rather than text "whenever possible" to facilitate learning.

EN: The supporting research dates back to the sixties, and it's generally believed that images should be used for the sake of illiterate users on display materials. At yet, it must be admitted that visual information has a greater impact on memory - user testing should be done to determine the effectiveness of an image in conveying a concept (and can thus substitute for text entirely) and whether an image or text (or combination) is actually more effective for a given audience and topic.

14. Using photographs of people (1:2)

Studies currently disagree on the effectiveness of the use of photographs in building trust among users. One study suggested this was highly effective, another showed it had no impact at all.