Screenshots
When and how to use screenshots.
# When
- Orient users in a complicated or long procedure
- Show complex windows or dialog boxes, such as those that contain multiple subsets of information
- Emphasize a new feature or change in the UI
# When Not
- Code samples (instead, show code samples in code blocks)
- Dialog boxes that are effortless to understand, such as drop-down lists and option buttons with few or no free-form text fields
- Confirmation boxes
- License agreement boxes
- Message text (instead show message text within regular text)
- Progress bars
- Welcome windows
- Wizard pages, especially Welcome pages and other simple pages
- Tables created in another authoring tool
# Alternatives
As an alternative to screenshots, describe the steps. For example, for straightforward instructions like, To open a file, select File > Open, a screenshot is not required.
# Workflow
If you include a screenshot in a procedure, place it directly under the step that it illustrates. Do not rely on the screenshot to show information or values that the user must enter; always provide that information in the text of the steps.
Ensure that the screenshot accurately reflects the directions and values in the step text.
# Checklist
- Size: Make screenshots no larger than 600 pixels wide.
- Scope: Limit the scope of a screenshot to just the portion of the UI that shows the action, plus enough surrounding detail to help the user locate the item.
- File name: Create unique and meaningful file names to easily differentiate between screenshots.
- Titles: Titles are not required, especially for screenshots in procedures and tutorials.