Support Snap: The Perfect Screenshot

Support Snap: Your weekly customer support super tip

We were busy Monday announcing Snappy’s new iPhone app, so we saved this week’s Support Snap for a special Wednesday edition!

Continuing our study of help page best practices, it seemed a good time to discuss screenshots. Wait, don’t leave yet! I promise I actually have some stuff to say about screenshots!

Every good help page features plenty of clear, instructive screenshots. After all, a picture is worth a thousand words, and most of us learn better when we’re shown what to do, rather than just told.

So what’s to discuss? A good screenshot seems like a no-brainer. Step 1: Take a screenshot. Step 2: Stick it on your website. There. You’re done. Right?

Well, no, not really.

Your screenshots should be as polished and professional as everything else on your help page. Here are 3 tips to achieve that:

1. Frame and context

Make the object you’re calling attention to obvious. But remember to include it in the context of the page itself. If you focus on just one tiny part, a customer might get confused trying to figure out where on the page you took that screenshot.

Whenever I share a new Snappy feature with you here on the blog, I try to include screenshots to show you exactly what the feature is, what it does, and how you’ll use it. When I introduced the Snappy Widget, for example, I wanted to showcase its reporting feature. I shared the following screenshot, including the entire Snappy dashboard and its headers and tabs, so you could see immediately how to get to “Reports” from the Snappy dash. In other words, I tried to give the reader plenty of context, and frame the feature in its natural habitat:

Snappy Widget screenshot; reports in context


2. Use arrows and callouts

When you’re including plenty of context, sometimes it becomes necessary to point out the little corner of the screen that’s relevant . Arrows and callouts can be useful for this. But use them sparingly. A dozen arrows in one screenshot is just too much. Highlight one to two things that you want the customer to see.

Using another example from the Snappy Widget post, I used Skitch to draw a simple arrow calling attention to the widget within the context of the Snappy screen:

Snappy widget screenshot with arrow


Had I used a close-up screenshot of the widget with no context, you would definitely know what you were looking at, but might be confused about where on the page to find it:


On the other hand, had I taken a screenshot of the full window to show context, but left out the arrow, you might not know what element on the page you’re meant to look at:

Snappy widget screenshot with no arrow

In this case, the arrow made all the difference:

Snappy widget screenshot with arrow

3. Don’t forget the alt text tag

Alt text exists as an “alternative” to viewing your image. It’s used by readers who are either vision-impaired or have disabled images in their browsers for any number of reasons. Screen-reading software needs the alt text to describe the image in these cases, and it’s your job to provide that description in the form of alt text. You should have the option to input alt text when you upload your image, or in the image settings. It’ll take a few moments to describe the screenshot, but don’t even think about skipping this vital step. For more details on alt text best practices, check out this article by Matt Polsky.

Remembering these tips will help ensure your polished, well-planned screenshots help, rather than hinder, your help page. So get snapping!

Learn more about Snappy Customer Support.


  • Mike Bronner Reply

    I have found Clarify to be a nice little app that helps creating clear and concise offline instruction (and easy inclusions of screenshots) for clients. (Not in any way affiliated, just sharing something I found useful for this process.) You might then respond to the client from Snappy with an email message created by Clarify to step them through their process.

    • Alyssa Mazzina Reply

      Thanks Mike! I thought about doing a round-up of screenshot apps and services. Maybe I’ll put that on the list for an upcoming week. I haven’t used Clarify so I’ll have to check it out!

Leave a Reply

Your email address will not be published. Required fields are marked *