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:
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:
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:
In this case, the arrow made all the difference:
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.