Use images purposefully

Some concepts require graphic representation: a chart depicting population growth on a census site, perhaps, or a photograph of a seascape on a travel site. A table of figures or a description of the scene can summarize, but cannot replace, the images. Other images are used to convey a sense of place or purpose, such as a photograph of a doctor with a patient on a hospital site. We sometimes use images as part of the user interface, such as arrows, icons, and buttons. We also use images to establish a visual identity for a site, so people know where they are. Though some of these examples are more compelling than others, in each of them the images have a purpose: providing information, establishing context, providing direction, or establishing a brand or identity.

In other cases, even though our content does not lend itself to visual representation, we feel compelled to include images because we know that "the Web is a visual medium," and we need to add images in order to "spice up our pages" (Figure 4.2).

Figure 4.2: Microsoft screenshot

Figure 4.2: When images are used for visual impact, as on the Microsoft page shown here, their meaning can be unclear, as can their relationship to the content of the site.

This is a misuse of a powerful communication device. Images first draw the eye, then they invite interpretation. When presented with a page containing an image and text, our eye is drawn to the image. We then try to interpret why it’s there and what it means. On a day-care center home page, we know that the photo of Susie and Sam on a swing is there to give us a sense of the spirit of the place, not to show us how to swing or to help us recognize Susie and Sam. When the meaning and purpose of an image is clear, images communicate extremely well. When images are unrelated, they foil all attempts at interpretation, which can lead to frustration. If the day-care center home page contained a photo of a duck, unless the center’s name was something like Ducky Day Care, users might be baffled by the image.

Images are effective when they are used purposefully. If images are not part of the message, then don’t use them. When using images, make sure they are appropriate to the context. A Web page that provides computer setup information should not be peppered with photos of happy people using computers. Instead, include useful images, such as photos or diagrams that demonstrate what is described in the setup instructions (Figure 4.3).

Figure 4.3: screenshot

Figure 4.3: includes images as an essential part of the user interface. The meaning of the images is unambiguous. The images may make features of the site more comprehensible to users who are helped by images.