Screenshots: Trends, dos, and don’ts

Explaining something or giving instructions isn’t always a piece of cake, especially using only words, without any visuals. Screenshots are an essential part of a Technical Communicator’s job; you do have to know how to deal with them, like it or not. In particular, when writing a user guide or any other type of docs connected with instructions providing visual hints come in very handy. But you should know that it isn’t always as easy as it may sound and there’re a lot of rules and suggestions you could follow to hone your skills.

In our new reality, people tend not to have much time to analyze long sentences, structures, and especially complicated visuals, so you have to make sure that screenshots don’t take a while to comprehend and are as clear and precise as possible. Here, I’ll talk about my experience and provide you with a set of general tips on how to create a decent snapshot. But remember that various needs require different types of screenshots (full screen, zooming, free-form, different sizing, and the need for editing), there’s no magic recipe that goes with everything. Keep calm and be creative.

Major dos

So, in case you need to call attention to a section of text, imagery, or feature, you should capture a nice screencap that will help a user, not confuse. Here’s the list of things that you should do to capture a useful snapshot:

• Insert a screenshot only when you can’t explain something with words. You are not supposed to add screencap after each step you describe, some procedures are self-explanatory and do not require additional visualization.
• Analyze the goal of each screenshot.
• Provide only the high-resolution outcomes.
• You aren’t obliged to capture the whole screen or window, you can capture just the needed feature, even if it takes up only 10% of the screen. Make sure your screenshot displays the technical ability/needed UI element/etc., and the user won’t have troubles finding it. Make sure that you don’t have awkwardly cut off edges or button halves, etc.
• Use short and precise language when you add callouts.
• Use numbered icons for steps to navigate and use callouts for comments or highlights that are helpful but not duplicate the info that is already on the screen.
• Use bright colors to highlight important parts so that readers don’t have to peer at your screenshot to understand what button they need to select or what link they need to follow. You could use the Complementary color wheel to choose the right colors that is in contrast with the existing UI color palette. However, try to avoid the red color (unless it is part of your idea), since it may look aggressive, it is more relatable for warnings, etc. And avoid using more than one color to highlight UI elements.
• Crop and resize screenshots, if necessary, to make sure that they’re all of the same size and proportion.
• Use the same style throughout all your documentation. Stick to the same color and shape of the markups; this will keep your instructions and notes easily recognizable and the overall style consistent. It also includes applying the same borders and callouts, etc.
• Hide sensitive and personal information. For example, you could use the Blur or other features to hide sensitive information on a screenshot, usually with just a few clicks in most of the screen capturing tools.
• Remove a mouse pointer from the captured area unless it’s the part of your idea. Obviously, if you need it to point to a button that one should click, keep the cursor. Otherwise, a pointer shouldn’t be visible on screenshots.
• Choose the PNG format, instead of JPEG. The latter is a compressed file format, while PNG allows the lossless compression, hence more legible text, and crisp lines.
• Provide captions if needed.
• Check if your screenshots are valid. Sometimes there are updates of the UI interface / functionally/etc., so if you are responsible for documentation, make sure that it is up-to-date.
• Use a professional tool. Using some untrusted tools may result in safety issues. They have fewer features and can’t maintain the high quality.

Major don’ts

And here goes my recommendation with the things you shouldn’t do:

• Overload your documentation with visuals.
• Choose screenshots that look unprofessional (like old-fashioned design (torn edges, filters, outdated icons/emojis, etc.) complicated language, dull colors that are hard to read/see, etc.).
• Adjust/design it to an extent where it’s not recognizable. You could “play” with connecting/extracting some parts, blurring, etc., but make sure that it doesn’t affect the user’s comprehension.
• Add too many callouts and much text.
• Expose confidential and personal data.
• Capture only the part that you’re telling about. Help your user navigate and find this feature as well. Make sure that the user has enough context to understand where it is located.

Actually, most of don’ts are just the opposites of the dos that are listed above

My choice of a tool. Why Snagit?

Personally, I use Snagit and enjoy it a lot. It has many useful inbuilt features that make my job easier. I wonder what tool you use but let me share some advantages of Snagit.

Let’s just begin with the fact that Snagit is considered to be one of the best screen capture tools on the market. Also, it is only 1$ per month. That’s a real money-saver!

The next compelling reason to use Snagit is that it’s a commercial tool which means that the application is safe and secure to use. Most importantly, despite being a professional-level tool, Snagit has a user-friendly and intuitive interface with lots of helpful features that can drastically simplify and accelerate your day-to-day work with screenshots.

And a few more dos available with Snagit:

• Adjust Quick Style to save you time. This will help you create customized automatic effects such as borders, color adjustments, watermarks, etc.
• Use the Magnify tool. The Magnify tool is a perfect approach when your image has a lot of details in a relatively small area, and you want to make a specific element more visible.
• Use such options as Crop to remove the unnecessary parts and Simplify to cover the background text and graphics, etc. But make sure to keep it realistic, especially when presenting a UI/UX feature or interface.
• Use the Panoramic feature when a scrolling image is needed. In case your tool doesn’t have this feature, you can take several parts and combine them in one picture.
• I won’t spill the tea about every feature in stock, hope you are interested enough to go and discover more on your own 😊

Trends

Same as in clothes fashion, screenshots come and go as trends. Keeping to them is crucial to remain competitive, but luckily, snapshot trends vary less often than the fashion trends.

Lately, my favorite trend is simplified graphics, sometimes called simplified user interface graphics. These are revolutionary for Technical Communication, helping illustrate products, concepts, and technology quickly, in an easy-to-understand way. Using simplified graphics can reduce the need for translation and give images a longer lifespan, making your job easier. A tool like Snagit mentioned before, has an inbuilt feature Simplify that makes a process even quicker and more effective. Please make sure that you don’t rely on the automatic outcome of this feature, make sure that the interface is still recognizable, and all the needed features are highlighted.

Another trendy feature is using the phone and computers/laptops frame. The screenshots portray the app and its features in a reasonably realistic manner, giving the user their first experience with the app right away. If choosing this format, remember about the sizing, and make sure that the picture itself and callouts are in high quality and readable.

Sum-ups

Enough of trends and rules for now; remember that you can break them and be innovative, especially when it comes to visuals. The main goal of a screenshot is to display a feature and provide some useful information to a user. So, as long as it is helpful, you’re doing great. You’re lucky if you have feedback from your users to adjust your approach to screen capturing and make them even more helpful.

Actually, taking screenshots can be quite an engaging process, and after all the editing is done, you can come up with a work of art, not just a picture. The beauty is in the eye of beholder, just learn to see it 😊.