Adding screenshots in help topics

Here are a few tips for adding screenshots to your help topics.

Use contrast

Use a high-contrast color for callouts, arrows, and other elements that reference screenshots. Avoid any color that is heavily used in the screenshot.

I often see black callouts over screenshots with black interface elements. Such visual elements are hard to see because they blend in with the screenshot. If your callouts require black text, consider using a background color with some alpha transparency applied.

Crop for improved focus

Use the crop tool in your image editor to focus the screenshot on the elements being discussed in the text. Don't bother showing the entire screen when you really need to zoom on a small section of the interface. Help windows often limit your real-estate for screenshots, so cropping helps you to show what you need to without introducing horizontal scroll bars.

However, don't crop out so much that your reader can't determine the context of the screenshot.

You can hyperlink a cropped screenshot to a larger view of the entire screen. That way you maximize real-estate within the topic, and still offer viewers the full screenshot if they are interested.

Use CSS borders and padding

Add borders and padding to your screenshots to add a professional look and set them apart from the text. Use CSS to apply the border and padding settings to the IMG tag. That way you only have to do it once.

Don't forget ALT text

Add an ALT attribute to your images, and use descriptive text. The text should be long enough to serve as a summary for the concept presented by the image.

The ALT tag helps visual learners grasp a concept quickly without reading the boring details. (Like it or not, some users will ignore your help text and skim for images and headings that hint at the details.) Also, the ALT tag will give your images greater search visibility if your help is posted on a server.

That's all for now.

For some great advice on deciding when screenshots are worthy of inclusion in your documents, check out Screen Shots in Documentation by Michael Hughes.

Related: