Trying Tango for Short Web-Based Training Tutorials

I learned about the free Chrome extension “Tango” from Beth Jennings’s post to ALL-SIS which included a sample tutorial she made. I was intrigued by the idea that I could show someone how to do something without creating 1,000 “snips” with the Windows Snipping Tool or making another 3-10 minute video of myself using the internet. Tango’s homepage promises I can document what I’m doing instantly and after a year of online teaching under my belt, I am painfully aware of how long it takes to create and edit screen capture images and video.

So in the pursuit of science, I decided to take the lead by documenting my first tango with Tango.

Getting Started

From the start, Tango seems to be a business-oriented product. That is not a bad thing of course, but I was a little disoriented when I went to pick a role. “Training” seems the most appropriate and really isn’t a stretch—law librarians in all settings often train people how to do legal research.

Dropdown menu with business-related roles as options. Text reading “You’re Almost Ready to Tango, Katelyn” is displayed across the top.
I can hardly contain my excitement

The initial dashboard has a simple, bright, ultra-modern look and is preloaded with two tutorials- How To Pin the Chrome Extension and How to Capture Workflows. I am going to go ahead and start off with these because (1) I am totally new, and (2) they are in the format of the types of capture I am seeking to create with this product.

Just from the tutorial I can see the utility of Tango—instead of a lengthy video capturing cursor movement on screen, the Tango recordings take what they describe as a ‘highlight reel’ of your actions in a particular Chrome tab. This makes the visual aspect of the tutorial much more attractive to people who don’t have much time (like lawyers and law students) and people with a short attention span (myself, and surely others.)

To use Tango, you need to pin the extension so that you can access it quickly when you are on the page you want to record. The tutorial on how to record shows the controls so you know what to expect when the recording starts.

Image of controller for Tango extension
The anticipation continues to build

The best thing in my opinion, by far, is the ability of Tango to highlight wherever you click with a rectangle. In the absence of something like Camtasia (or numerous other helpful but costly screen capture programs), it can be difficult to call attention to your clicks. Tango adds the highlights as you are capture, making it much faster to convey your actions.

Up to this point, I am writing this based on the tutorial—so let’s see how this works out in practice.

Recording My First Workflow

I was curious about how Tango would work with a commercial legal research platform, so I selected Westlaw and decided to make a quick tutorial on how one could access Government Accountability Office Board of Contract Appeals opinions. To start, I opened Westlaw and logged in. At the homepage, I clicked on the Tango extension that I had pinned.

Tango icon pinned to top of web browser
This is where the pin lives

A small window pops down and there is just one button that says “capture workflow.” Once you click on it the capture begins and Tango takes a small screen shot of each of your clicks and typing activities.

Pop up window with the word “Tango” at the top and a button over the words “Capture Workflow” followed by a short text advertisement for the pro version

Once you begin to capture the workflow, you can see the ‘highlight’ shape (an orange rectangle) on screen wherever you rest your cursor on text or images with hyperlinks. The snapshot for your tutorial is only taken when you click or type text.

After pressing capture, all I had to do was navigate to the GAOBCA opinions page and each step was automatically captured. Toward the end of the process, I clicked where it said “Ten Most Recent” so that a screen shot would be taken, then I clicked in the search bar and ran a search. I ended the process by clicking on the green check mark in the bottom left corner of the page. If you hover your cursor over the checkmark, the controller shows up and provides the option to pause or discard the workflow. You may also change the controller to be on the right-hand side of the screen. There is a blur feature on the controller for premium users which allows you to blur out sensitive information on screen.

I did not time myself exactly, but the process from start to finish of just the capture was only a second longer than it took me to navigate to the desired page. At this point I was happy at how little it took to gather the images for the tutorial. Once the capture is complete, you get to edit your steps and provide accompanying information.

As a quick side note, out of curiosity I tried to see if I could make a tutorial on how to use Tango to capture Westlaw, but it wasn’t possible because clicking the icon again simply paused the recording.

Editing My First Workflow

The automatic title for whatever you record is “Workflow with [website you started on].” The first step is a direct link to whatever webpage you started on—you don’t have to add it at all, but you might want to change the title. Tango automatically pulled Westlaw’s logo to associate it with the steps in the guide (pictured below).

table of contents side-bar for tutorial
Looking sharp!

To edit the automatically generated headings, you simply click on them and can change them immediately. A couple of the steps didn’t need to be changed at all because Tango automatically identifies your actions and the text that you click on. For example, the step pictured in the below image was 100% Tango:

The third pane in the editing page of Tango titled “Click on Administrative Decisions and Guidance”

I had to edit the heading for last two because I wanted to indicate that the person using the tutorial could browse the “ten most recent” list or search within the content area. The automatic headings simply stated exactly what I had done. This was the most work I had to do during the editing process.

One other thing that made the editing process easy was working within each pane where the captures were organized. You can click next to your captures to add a description or modify the link that Tango adds to each picture (automatically!) If you hover over the image you can zoom in and out, adjust how much appears in the frame, and add alt text to enhance accessibility. The editing is done to each step, so those that were automatically generated and perfect could be left alone completely unless you wanted to zoom in or move the focus of the image.

Editing pane of Tango with a red circle around the button for creating alt text
Adding alt text to images is easy

The Final Product and Thoughts

My final product is here:

The tutorial may be shared by link or you can invite someone else to view it via email. Users may also download the guide as a PDF or copy the HTML code to put elsewhere. I copied the HTML into Microsoft word and was stunned when I could see all of my highlighted images and could edit the accompanying text. Each step became a heading that could be minimized in the document to create more of an outline. I would prefer this format because the PDF download has a cover and end page branded with Tango. Copying into Microsoft word allowed me to soften Tango’s brand presence because it’s only mentioned a few times without logos. With the pro version you can add your own logo to the PDF downloads which would also mitigate the distraction.

I am probably going to use this at least a few times for tutorials on how to do simple tasks, and I am curious about how it will work out with more complex research tasks. Overall, Tango is definitely going into my virtual tool box because it’s user friendly and would cut down the time it takes to prepare visual aids. I also suspect that it will capture attention differently, and I always try to deliver information in a variety of formats.


Leave a Reply

Blog at

%d bloggers like this: