Best Practices for Capturing Screenshots

High-quality screenshot images can help visitors quickly learn the details they are seeking. Capturing great details can take a bit of thoughtfulness for accessibility and consistency.

This workshop is based on the lesson plan, Best Practices When Capturing Images.

Learning outcomes

1. Explain which elements of a screenshot are important for readability and accessibility
2. Differentiate between effective and ineffective screenshots
3. Create screenshots that are effective and accessible for all viewers

Comprehension questions

1. Why are arrows and shapes a more accessible annotation option than text over images?
2. What are two accessibility considerations when taking screen captures?
3. What are two anonymity considerations when taking screen captures?

Resources

*This workshop was created using MacOS Version 11.6

1. How to take a screenshot:
   • macOS (and Annotating Images in Preview)
   • Windows (and Annotating)
   • Linux
   • Chrome OS
2. Demo content:
   • Theme Unit Test Data
   • Gutenberg Test Data 

Transcript

Have you ever watched a how to video or read through a lesson and struggled to read the text in a screenshot? It’s frustrating, and it can turn away visitors with different levels of visual ability. Let’s make sure that you feel confident in creating high quality screen captures. We’ll go through how to take a screenshot, and also some tips on how to make it more accessible. First things first, how do you capture an image computers have a built in method for taking screenshots, luckily. I’ll be using macOS today. But I left some helpful links above the transcript for this video if you’re a Windows or Linux user. Mac users can use shift command three to take a screenshot of the entire screen. Another neat option is shift command five. This gives some more flexibility. You can record the entire screen or just a segment. Or you can capture a selected portion or a window. I’m going to capture this selected portion. And now I could crop or edit as I need to.

Let’s talk about some accessibility features of your images. Have you ever seen a screenshot that was maybe too far out? It can make it difficult to focus in on the intended topic and to read the text. Look at this screenshot here (screenshot of Settings at Zoom 100% with most of General Settings available on screen), I could be talking about any number of things on the Settings screen. That’s fine if we’re discussing where to find something on the screen or how to navigate around it. But I’m talking about the different date formats on the bottom, it could be pretty tricky for someone to see that. One suggestion is to show where the date formats are on the screen, and then zoom in to show the different options. I did this by zooming in on my web browser. Now my audience can actually see what I’m doing as I manipulate this feature. You might be wondering why not just start zoomed in? It isn’t a bad idea, but just make sure you use it cautiously. You don’t want to lose the context of where you are in the navigation or full window display. If you jump right into the zoomed in screenshot, your visitor might get lost and not be able to follow along. Go ahead and take a moment to practice taking two screenshots, one of your entire settings screen from your admin, and then a second one of just the date settings.

I recently attended an amazing webinar. But every time the presenter showed the developer tools, they were way too small. Let’s talk about how you can zoom in to the developer console so that your audience can stay engaged. Let’s look at the default view when I go to inspect. Without increasing the developer console, it’s pretty hard to actually read what’s in a screenshot. I’m going to zoom in by clicking inside the console and typing command plus. I’m going to need to do it a few times and readjust as I go. Now my audience can actually read what’s in the console while still seeing the pages contents. Go ahead and adjust your own developer tool screen to a position that’s going to be more comfortable for your audience when you do a screenshot. A great way to catch your audience’s eye to the exact steps or actions you want them to take is by using annotations. I’ve actually already used them in this video, sometimes an arrow or circling a portion of the screen. I try to use shapes and boxes instead of text over images, since that can be difficult to translate into other languages. I’m going to use the built in annotation tools for macOS. I’ll take a screenshot and open it from the bottom right screen. I can go to the Insert shapes option and click on the arrow. You’ll see that arrow pop up, I’m going to change the angle. And I’m also going to click and drag it down to where I want it to be. Now it’s your turn, take a screenshot and add in any annotation of your choice.

Let’s talk colors. We need to make sure that any annotations are easy to see over the rest of the screen. Here’s an example of a poor accessibility choice (grey arrow on Settings screen with limited contrast against background). The gray arrow is too hard to see. I’m going to change it to a color with greater contrast like red. That color stands out much better against the rest of the background. Go ahead and practice with your annotation that you just made and pick a color that has a strong contrast against the rest of your screen capture.

Lastly, let’s chat about anonymizing information. Here’s a few tips. Keep any names generic. This is not a place to include your business name, personal email address, or other sensitive data. If you’re capturing the setting screen, just make sure to temporarily put in a fake email instead of your personal one. Next I’m going to recommend that you use test data whether theme unit or Gutenberg test data. That’s going to help create demonstration content for the site you’re showing. I’ll include these links below the transcript of the video. And lastly, make sure to use general image placeholders instead of any personal or business images or logos. You’re now ready to capture some high quality screenshots. Be sure to check out other workshops on learn.wordpress.org. See you there!