Since I started testing and sharing tips with end-users (in my previous assignements or more recently on my blog), I trye to have the simplest but explicit illustrations. As the saying goes “a picture is worth a thousand words”. The native Windows tool (Snipping tool) is interesting, but quickly limited.

The opportunity to change job and company is the opportunity to discover new tricks (basic, but still useful). I’ll share three of them in this article:

• Prepare animage by removing unnecessary or sensitive content from a web capture
• Select only the appropriate window
• Facilitate the modification of screenshots (annotations, blurring of information, etc.)

Tip 1: Prepare an image by removing unnecessary or sensitive content from a web capture

The first step of a screenshot is to prepare the image you want to capture. An obvious and fundamental step that I often forgot. We often think about taking a capture of the precise feature or use case, but not what is around it.

The problem with taking screenshots for change management is that it is difficult to have a clean profile that contains only the use case you want to highlight.

Let’s take an example, I want to take a screenshot highlighting the document sharing feature in Teams. My user, Goblin, shares a document in a chat with one of his team members, Goblin 1.

• In the screenshot below, I can see my user, the chat channel and the shared document.
• But I also see other conversation channels, a red spot drawing attention etc.

Since I use Teams Online to take my screenshots, I have access to the **“Developers tools” in my browser. The advantage of working with web developers is that they often have good tips to make life easier. And often, you don’t need to have a developer profile to use them!

Here, the developer module will allow you to inspect the page, select the content of the page (which is nothing but HTML code) and remove unnecessary content.

As for me, I use Edge as my browser to juggle between my different test profiles, but the other browsers have identical functionalities.

Once the “Develop tools” module is open, you can:

1. Select the inspection functionality
2. Click on the item to be deleted
3. Navigate the page tree (in the right pane) to ensure that the correct item is selected

Once the element is identified, simply delete it from the page by pressing DELETE. The HTML component will be removed from the page, but will reappear if you refresh the page.

Tadam! Here is the result: no more useless conversations or red dot on my screenshot that polluted the message.

Tip 2: Select only the appropriate window

Once the content is ready, you can make the screen capture. For this, I use an additional software: Screenpresso. This software has the advantage of being very easy to install (no need for administrator rights), to use and offers many annotation features (see tip 3) and has a fairly complete free version.

The “window selection” is a basic feature of Screenpresso (like all other screenshot tools). Just select the “Screenshot region” feature and move the mouse pointer until the right window is identified.

From what I could see, the window delimitations are more precise than in the native Windows tool.

Tip 3: Make it easier to edit images (annotations, blurring information, etc.)

Finally, the last thing to do is to enhance the image to hide some sensitive information (like identifiers or passwords …), write annotations, highlight a part or describe a sequence of clicks.

This is where I find a real added value to software like ScreenPresso.

My favorite feature is the water drop. It allows you to easily blur an area (here, the name of another conversation channel in Teams).

In real life, be careful not to do exactly what I did in my example below. If you put too many annotations, the message or use case will be completely hidden.

With these three tips, we have seen how to improve the creation of screenshots to take into account and highlight only the relevant information, while saving precious minutes.