Include screenshots sparingly, and only to convey important visual information or orient the user when their omission is likely to result in an error or confusion.
Why it's important to avoid unnecessary screenshots:
- Technical documentation is used in conjunction with the documented application. There is no need to "show users what the app looks like" unless the appearance is noteworthy or unexpected.
- Screenshots are time-consuming to produce and maintain.
- Screenshots often result in visual clutter and impair the user's ability to scan the content for the information they need.
| Do | Don't |
|---|---|
|
|
When you do include screenshots:
- Capture the minimum area of the interface needed to accomplish the purpose of the image.
- Do not include/ add whitespace, drop shadows, or borders. These can be added when the document is formatted and should not be in the screenshot itself.
- Use consistent scaling (DPI) for screenshots in print formats, including PDF.
- For online formats, screenshots should usually be displayed at the original resolution without scaling. Adaptive CSS might usefully scale screenshots for viewing on mobile devices.
- Always include alternative text. A "decorative" screenshot that would not require alternative text is superfluous and should be omitted from the content. Decorative screenshots might sometimes be used for cover pages.
Inline screenshots
When including icon screenshots inline in running text, match the image height to the text line height.