Skip to content

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 that part of the dialog.

Common uses of imagery

Screenshots can go a long way in explaining design and user-experience techniques in how-to pieces. Use them to show the user the steps involved or to give examples that show 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.

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 of yor clients might be are 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 depth and understanding.