Images

Graphics and other visual elements can clarify what you've written. Screen shots are easy to produce and format using SnagIt and other tools.

Rules of thumb for images

  • Address the user: Focus on illustrating or drawing attention to specific points you want them to understand.
  • Be concise: Don't go crazy. Use the images to enhance, not overwhelm the document.
  • Be conscious: Use real examples with the most current software.
  • Be smart: You don't need to include an entire interface. If you're describing options, you can show only that part of the dialog.

Common uses of imagery

Screenshots can go a long way in explaining design and user-experience techniques. Use them to show the user the steps involved or to give examples showing them what you're talking about.

Images online

An image that spans the full width of a web page should be no more than 800 pixels wide. Captions aren't necessary in procedures.

If your content may appear on hand-held devices, use responsive images. That is, provide different image sizes depending on the device. Most
online delivery software nowadays can take an image and perform automatic resizing on the fly.

Use the Light setting instead of Dark for the interface. Dark images are harder to view when reduced. If your delivery software allows the user to zoom an image with a mouseover, that's a great solution.

Copyrighted images

Don't use them, even in internal documents. Don't alter a copyrighted image and use it. Instead, search for and use public domain CC0 Images

Accessibility

While you may not be required to follow Section 508 guidelines, some clients might be required to comply with Section 508. They may expect or require vendors to comply as well. The broad requirement is that any information presented in an image must also be presented in an alternative format (for people who cannot view images).

The W3C Web Accessibility initiative is a good resource for all web accessibility issues.

Every image presented online must have alt text describing the image. Additionally, any text that appears in the image must also appear in the alt text. Most screen readers already add Image of when reading out an image, so alt text like Image of Edit Citation dialog box is redundant because screen readers will read it Image of image of edit citation dialog box. Try to limit alt text to 15 to 25 words. if you need to have a longer explanation, add it to the page as a description for the action involved.

When captioning an image, don't add additional context or information. Don't merely repeat what the user sees by looking at the image. Captions should increase understanding.