• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 9. The Aesthetic Factor > The Use of Graphics

The Use of Graphics

In emphasizing the use of graphics for aesthetic expressions, we shouldn't overlook their equally important use as facilitators in the human processing of information (Haber and Wilkinson, 1982). Graphics, when effectively designed, can be useful tools for information processing. For example, colors can help the visitor to organize chunks of information. A pictorial image can help increase the size of a chunk to be processed, and, indeed, it often may be the most economical way to transmit a complex concept. Here are the main usability guidelines that designers should consider as they incorporate graphics into the design of Web sites.

  • Minimize the use of graphics for sites where the purpose is to com plete a transaction. Quick system response times are paramount for satisfying visitor interaction experiences, and graphics are too slow to download.

  • If graphics must be used, use small images that load quickly, and repeat them if possible. For pages with multiple images, individual images should not be more than 5K in size, with total size of all images not greater than 20K. For a page to download within an acceptable response time rate, the total page size content, including text and images, should not be more than 30K.

  • Provide a text-only option, particularly for Web sites when the majority of visitors are dialup users or where the browser or screen real estate is not conducive to graphic displays, such as for some handheld devices.

  • When using color graphics, minimize the number of colors that are used in a single image.

  • For information coding on a single screen, do not use more than six colors; four are preferable.

  • GIFs are smaller than JPEGs and should be used instead of JPEGs for image rendering. In the case where color tonality changes are required, such as in photographs, using JPEGs is recommended.

  • Include ALT tags for images. Display alternate text for each image using HTML's ALT feature, and make sure that the text provides a complete description in no more than five words. If a reasonable description cannot be contained within the ALT tag, place the description in the page.

  • If images or icons are used as links, provide a redundant text link, particularly if the images are close together. In the case of image maps, provide text links next to the image map.

  • Inform the visitor when a link will lead to a page with a large image.

  • Clearly identify the active, clickable parts of an image map. For example, make them look like buttons.

  • To highlight an item, use coding techniques such as brightness, reverse imaging, and texture rendering. Site visitors will ignore images that look and behave like banner ads or other animated objects.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint