14 Screenshot Guidelines for Technical Documents

The purpose of screenshots is to compliment the text, not replace it. This means that your screenshots compliment what you’ve written and help orient the reader. They also help reduce anxiety in the reader as they can check if they are on the right window.

What to capture

1. Identify where the user needs to perform the action. For example, highlight the button, drop-down list, or field they need to populate.
2. If there are several options in a drop-down list, make sure the options are displayed in the screenshot.
3. If there are multiple overlapping windows, for example, if you need to click on a specific window to activate another, then include the parent window in the background. This helps the reader see how to get to the child window.
4. Avoid screenshots with no content. This provides no value to the reader. Populate the window or dialog box with dummy content to help the reader see what should be displayed.
5. Use a default MS Windows theme, for example, Blue. Make this mandatory for all screenshots. Avoid custom themes.
6. Turn off Transparency. If this is on, you can ‘see through’ the borders of window. Make sure transparency is turned off so window frames are solid colors. You can find this in Desktop, Personalization, Window Color and Appearance.

What to highlight

1. Use a purple box to highlight the control. Use a thin border, for example, 3 pixels, but make sure the purple border is easy to see if the image has to be cropped or resized.
2. If there are a number of steps that need to be performed in a sequence, then number these 1, 2, 3 etc and explain in the procedure.
3. Arrows – use arrows to draw attention to a control which may not be obvious to the user. This is also helpful if there are other markers on the screenshot. Use the same colour, purple, for the arrow.
4. Arrows Show Direction & Motion – you can also use arrows to show direction, for example, clicking this button opens a greyed out option. Arrows help illustrate tasks that are counter-intuitive or difficult to explain.
5. Arrow Style – make sure the style of the arrow is consistent. This means the head, end cap, width, and color. If you use Snagit, you can make a set of arrows and share with each writer.
6. Border – Use the same color and width. Most images look better with a border applied to them. A 1 pixel size in black or 50% black is recommended. This helps the image stand out from the text.
7. Callouts – be precise and keep the word count to a minimum, otherwise it distracts the reader from the image. Agree on fonts, color, and border. Also, position the callouts vertically outside the screen capture.
8. Numbers – instead of callouts use numbers on the image and create a table describing the content.

Formatting the screenshot

You don’t always need to show the entire image. Instead, crop the image to highlight the part of the window affected.

If showing the entire window adds value, make sure to include the borders otherwise the reader may assume this is part of a window, for example, a frame.

• Save the screenshot in PNG format.
• Adding screenshots to documents
• Add a caption for every screenshot.
• Instead of saying, this is Window X, explain what is happening in this window.
• Align the screenshot with the text it supports.

For example, if the screenshot is in a procedure, then align it with the bullet. If it’s in the main body, then align it with that. In other words, keep it in the flow of the document.