4 ways to keep distractions out of your screenshots

If you create documentation, then you know how annoying screenshots are under the best conditions. But when you need to highlight a visual element that’s crowded by distractions that aren’t relevant to the task at hand, that’s when the frustration spikes.

Menus, modals, popovers, and pop-ups can place important details on top of unimportant background features (or even cover up the thing you’re trying to capture). Avoiding demo data, unreleased features, and personal information can make taking a screenshot a high-stakes needle-threading exercise. And sometimes you need to establish context for a busy (or even downright unattractive) user interface.

Don’t let overwhelming visuals overwhelm you. Here are a few strategies that can help.

Crop more aggressively

Often, you can get away with leaving only the smallest hint to place a screenshot in context. Cropping more than you feel comfortable with may be less risky than you think.

Here’s a shamelessly meta example: suppose I were using a screenshot to show you how to upload an image into a document. The first screenshot shows the full route from the upper left corner of a document to the menu item in question. The subsequent versions crop increasingly tighter without losing so much context as to create confusion.

Blur, spotlight, or redact unimportant elements

Another approach to hiding extraneous detail is to blur, spotlight, or cover up unimportant elements.

Warning: Never using blurring or pixelation to scrub sensitive details, because it’s possible to recover words, numbers, and other data. Hide sensitive information with an opaque color, pattern, or image.

Here’s that image upload example again, using a spotlight effect on the relevant portion of the screen:

You can also combine an aggressive crop with redactions. In the next image, I’ve blocked out some irrelevant background text with white boxes.

Illustrate

Sometimes a screenshot can be substituted with an illustration. Even an extremely cartoonish and not particularly accurate illustration can fulfill your audience’s needs as well as a pixel-perfect screenshot.

Admittedly, illustration takes time. But often the results can be better than a screenshot because you can misrepresent a user interface just a little bit to give more clarity to the reader’s task. In some circumstances, putting together a mockup can be faster than taking care of all the cropping and redactions you’d otherwise have to do.

Here’s my attempt to illustrate the same menu. It’s not going to win any drawing awards, but it gets the job done.

Use your words

Last but not least, remember that no screenshot at all presents the fewest visual distractions. Often, giving up on a fussy screenshot is the right move. Here’s a textual replacement for all of the preceding images:

Click Insert → Image → Upload from computer.

Writing some text is much faster than taking screenshots or drafting illustrations. It’s also work that you’ll have to do anyway, to ensure that your documentation is accessible to blind and low-vision members of your audience.

Keep your toolbox open

These are just a few ways to reduce visual clutter in screenshots and there are more besides. Not every screenshot strategy is suited to every situation, but remember that you do have options to make less trouble of troublesome screenshots. The next time you get frustrated with an unsatisfactory screenshot, try one of these methods.

Published June 3rd, 2021. Thanks to Audrey Hamelers for editing.