Dimmed screenshots

Sometimes I write instructions for software; generally this is just a series of steps with screenshots showing where to click.

I’m a big fan of screenshots for this sort of thing. Way better to show an image of a red button than just describe it in words.

Here’s how I do my screenshots these days:

reced-sign-in-button-860w

All of the unimportant stuff on the screen is dimmed out. It doesn’t grab your attention, you know it’s not important, but it’s there if you need it. I do this because it adds context to the highlighted area, and the context helps people to work out where things are. You’d know to look for the Sign in button at the top-right of your screen, for example.

Dimming the screenshot also indicates that it’s just an image, and not an active bit of UI. That was a problem I noticed during quickfire usability tests of my web-based instructions: people would click a screenshot of a button and feel confused about why nothing was happening.

When I started editing instructional videos, I carried this technique across. Say the speaker is going through a series of three bullet points.

Rather than show a single slide like this:

dimming-bullet-points-slide-3

I’ve found it better to show three slides like this:

dimming-bullet-points-slide-4

dimming-bullet-points-slide-5

dimming-bullet-points-slide-6

That way, you’re guiding the viewer’s attention, but the contextual information is still there if they need it.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s