Great screenshots make excellent documentation.

Simply writing  "how-to" documentation just won't cut it these days. That’s why you need to know how to use a screenshot chrome extension to create documentation that provides an unparalleled experience for your users.

This article will give you tips on using a screenshot chrome extension to create beautiful documentation including:

• Let users easily glance over your documentation screenshots.
• Put the emphasis on the most important elements.
• Create documentation screengrabs that are inclusive.
• Organize your screenshots so they can be accessed and reused anytime.
• Keep your branding consistent, even in the documentation process. 

Note: If you're tired of juggling multiple tools to take screenshots and annotate them, Tango's screenshot chrome extension is for you. It lets you capture, edit, and share beautiful screenshots from a single dashboard. Try it now. 

Let users easily glance over your documentation screenshots.

Most chrome screenshot extensions are great for grabbing images but not for end-to-end creation of seamless and beautiful documentation. 

Think about it: what's your process for creating product walkthroughs?Like most people, you probably write a how-to or tutorial article and take a screenshot of the user interface (UI) of the product you're creating the playbook, runbook, or product guide for. 

The result? Long blocks of text squeezed together with some visual content. 

According to TechSmith, this way of documenting can be intimidating and overwhelming for the end-user, seriously ruining the customer or employee experience. 

That's why when you're documenting a process, it's essential to use a screenshot chrome extension that is designed to make your playbook or product guide screenshots actionable. 

Actionable documentation screenshots take the guesswork out of your tutorials and make your customers' lives easier. 

One such screenshot chrome extension is Tango. It allows you to create beautiful and intuitive step-by-step guides with screenshots.

Using Tango, you say bye-bye to documentation like this:

Source 

And create more Workflows like this one:

Here's an example in action. We’ll show how to install Tango using the old way of making screenshot Workflows; then, we will do the same tutorial using Tango. Afterwards, we will compare the two to see which one is more actionable.

The usual way of using screenshots in a step-by-step guide

Head over to tango.us, and on the top right corner of the hero section, click on “Install Extension.”

‍

Or click on the “Add to Chrome” button. 

You will be taken to the Chrome Web Store, where you can add the extension to your browser. Click on "Add to Chrome" to do it.

‍

Once the installation is finished, pin the extension on your extension bar to start using Tango.

Now let’s use Tango to do the same tutorial and see how it compares.

Using Tango to make your documentation actionable.

As you walk through the process of installing the Chrome Extension, Tango automatically captures screenshots of your actions, creates descriptions and annotations,  and saves them as an editable Workflow in your Tango Workspace. 

‍

‍

The beauty of Tango workflows is that they are intuitive and help the reader know how to use your product without reading dozens of paragraphs before finding their way around. 

More importantly, it saves you time because you don't have to juggle through different software to make solid documentation. Yes, you got that right. You don't need a separate screenshot chrome extension or a markup tool to nail your playbooks and product guides. 

Put the emphasis on the most important elements.

More often than not, when we want to highlight a UI element when documenting a process, we tend to capture the entire page and then mark it up. 

‍

‍

Another common technique is only to capture the part you want to illustrate so that it is more visible to the reader.
‍

‍

These two methods often lead to sizing and markup mistakes that only confuse your customers more. The customer has to hunt through the screenshot and guess what you're trying to illustrate. 

It makes sense because most screenshot chrome extensions only allow you to capture the user interface. If you want to mark up a part of this screenshot, you must use another dedicated tool.

Tango is different. Tango considers the page and content structure when capturing a screen. It allows you to capture the elements you want to illustrate in your documentation and automatically highlights the most important parts with markup elements like arrows, shapes, and text.

‍

‍

Once you save the Workflow, you can edit each capture by adding either an arrow, rectangle, or ellipse to direct the customer to the most essential  element to watch. 
‍

‍

If these elements are not enough to emphasize the part of the screen you want to showcase, you can also add text to your capture to make it more understandable. 
‍

‍

If your screen contains sensitive information that you don't want the end-user to see, Tango Pro allows you to blur out those elements.
‍

This not only protects your company's sensitive information but also makes the user focus on the most critical  information in the screengrab.

Create documentation screengrabs that are inclusive.

No two customers are the same, and you can't predict if some of them have visual problems or if they will use a smartphone, a tablet, or a PC to access your documentation.

So, marking up screenshots only will not do the trick. Take the image below. How long does it take you to spot the highlighted element?
‍

‍

And how easy is it to read the text on the button?

Some of you will be able to spot the rectangle and read the text easily, but others will have to lean towards the screen or zoom out of the text.

That's why you need to choose a screenshot chrome extension that allows you to  highlight your UI elements and make them ACCESSIBLE to everyone.

Tango has an auto-zoom feature that allows you to highlight the parts you have circled or bordered.

‍

‍

And if your initial screenshot setting doesn't fit the reader’s, they can adjust the zooming to their liking. This way, you are sure to create inclusive documentation for people who have a vision impairment and typically rely on a screen magnifier to read well.

Organize your screenshots so they can be accessed and reused anytime.

‍

‍

Raise your hand if you can relate to how these screenshots are arranged haphazardly on my laptop. ✋

Screenshots can be very difficult to organize. Most of them end up on the desktop and live there in a total mess until you delete them.

Even worse, if you want to find a screenshot that you used in one of your documentations, it won’t be a piece of cake. So you often have to take another screenshot and start marking them up all over again. 

If you manage documentation for a product as complex as IBM or Salesforce, doing the same repetitive tasks can be time-consuming and overwhelming. 

With Tango's screenshot chrome extension, you can access your screenshots and documentation Workflows anytime. 

‍

‍

Tango Workspace with Organized Workflows

Now, imagine a scenario when something changes. For instance, you need to reword part of your process, or there is an error that you need to fix in your Workflows - such as poor positioning of an arrow or text annotation. If anything like that happens, you can come back to your Tango folders and click on the particular screenshot and update it.

You can add more elements to the screenshot or remove previously used elements.

‍

If another team member wants to use your documentation screenshots for other purposes, they can reuse and repurpose them without starting from square one.

Keep your branding consistent, even in the documentation process. 

Without reading the content, what brand do you think of when looking  at the screenshot below?

No idea?

Now, look at the following image. Which brand name came into your mind?

McDonald's, right?

Now imagine that your screenshots do not contain any of your brand collateral in your documentation: no logo, no brand color, nothing.

How will your brand be top of mind? 

Branding is an integral part of your company's growth strategy. In everything you do, even when it's not directly related to marketing, you must keep your branding consistent. 

Yes, you heard that right; you should keep your branding consistent, even in your documentation.

You can customize your screenshot setting to contain your brand colors and logo with Tango Pro.

This way, for every screenshot or workflow documentation you create, your branding remains consistent. Also, these customization settings remain intact for all team members you add to your Tango workplace for more consistency.

The most apparent reason brand consistency is so important is that it leads to brand recognition. 

If you want your brand to be memorable and increase your company’s bottom line,  you need brand consistency. Consistent branding increases revenue by 23 percent, and uniform  colors can improve recognition by 80 percent.

Bonus: Make your documentation screenshots transcend devices, interfaces, and geography

Most organizations rely on locally stored screenshots to populate their documentation with visuals. This comes with a host of problems. Consider a few below.

• The employee who made the screenshots stored them on Google Drive before uploading them to the documentation page. If the employee moves to another company and their email (and in turn Google Drive) is deleted, your documentation page becomes image-free.

• The employee in charge of the documentation is an individual contributor and needs buy-in from leadership before uploading the screenshots to the documentation page. How do they send the 300+ screenshots without compromising image quality? How does the feedback loop work in this case?

• Each digital interface or platform has its own image size and resolution requirements. How do you ensure your screenshots fit those requirements?

It would be difficult to get past all these problems using conventional screenshot chrome extensions.

Fortunately, Tango allows you to:

1. Store your company's documentation screenshots in a single dashboard. Internal and external stakeholders can access them from any device, anywhere in the world, using the link you share with them. Even if you leave the company, the files will remain. 

2. Share the link of each Workflow with your managers. You can give them access to edit the Workflow or simply view it. No more never-ending back and forth. You can also download the workflows as PDFs without losing the quality of the screenshots in the process.

3. Embed the screenshots or documentation workflows on each platform. Forget about the headache of adapting each screenshot to each platform.

Level up your documentation game using Tango!

If there is one thing to keep in mind as you leave this page,  let it be this - to create excellent documentation, you should always have your end-user in mind.

The idea is to make documentation that delights customers and provides them with an unparalleled experience.

And that's what Tango helps you do. Using it is as easy as navigating to a webpage, clicking the Tango Chrome extension, and capturing your Workflow. 

Capture, edit, and share. It's that simple.

Companies like LinkedIn, Indeed, Bytedance, IBM, Pluralsight, and many others use Tango to streamline their documentation. Want to join the club?