When we use a screenshot to explain a web app, we’re putting
the picture superiority effect into practice:
people remember images better than words. For example, take a look at navigation
icons. Google Apps experts know that icons called the “app launcher”,
“Mr. Jingles” and “the sprocket” link to apps,
notifications, and settings, respectively. A picture of these icons helps us
remember those icons better than words alone.

Use annotated screenshots to improve how people learn web apps

The Process: capture, annotate, save, and share

Creating a web screenshot takes four steps: we capture,
annotate, save, and share an image. You can complete the process with system
tools, but isn’t elegant.

First, capture a web screenshot with your system:

  • Windows: Windows key + Print Screen (or, use the Snipping Tool to capture a region)
  • Mac: Command-Shift-4
  • Chrome OS: Shift + Ctrl + Windows switcher key

Each of these tools saves the screenshot to your local drive
(in Pictures, the desktop, or Downloads, respectively).

Next, annotate the image with a meaningful arrow or note in
your favorite image editing software. Rename the file something other than “Screenshot_2013-11-30_09:09:15.jpg”
to make it able to be found in the future. System tools all save captured files
to local storage.

Finally, upload or email the image to share it with other

more apps for screen capture in Windows

Better tools

Web screenshot tools make the whole process faster. The
tools save the captured image to online storage, which eliminates the manual
upload of a file. Many tools also offer annotation and sharing options. If you
use Google’s Chrome browser, here are four screenshot tools worth a look (pun

A few Chrome screenshot tools compared

1. Capture and save to Google Drive (by Google)

For simple web image capture, Google offers the “Save to Drive” extension for
Chrome. Once installed, click the extension to capture an image of a web page
(or the visible portion of the page) and save it to Google Drive. The tool
captures and saves a screenshot, nothing more. It’s the simplest – and least
powerful – tool of the four.

Google offers its own very basic screen capture extension

2. Web Clipper for Evernote

Evernote users should use the “Evernote Web Clipper” extension. Web
Clipper is smart: it can capture article content as text, in addition to taking
a screenshot. Web Clipper also provides powerful annotation tools: it includes
annotation features initially offered in the Skitch Android and iOS markup
apps. (Skitch is an excellent tool
for screen capture and annotation on mobile devices.) You can share a link to
the captured content via email, Facebook, Twitter or LinkedIn.

Evernote users should choose the Web Clipper extension

3. Awesome Screenshot for Diigo (and Google Drive)

Awesome Screenshot offers a huge number of
screen capture, annotation, save and share options. It is the only tool of the
four that offers to save files to Diigo (a web bookmarking and
knowledge-sharing tool). Annotated screenshots may also be saved locally, to
Google Drive, or temporarily shared at AwesomeScreenshot.com. You can also
Print the captured screenshot. The extension includes a promotion for the “SearchAll.com”
seach tool, which may make it less appealing to schools and companies.
Otherwise, power users should appreciate this tool.

Power users may appreciate Diigo’s Awesome Screenshot extension

4. SnagIt for Google Drive (by TechSmith)

The Chrome version of SnagIt from TechSmith requires you to
install both the web app and extension. Once both are installed, click the
SnagIt extension icon, then select any rectangular area or capture the visible
page. The captured image opens in the app, where you can annotate, rename the
file, and (after the image automatically saves in the “TechSmith”
folder on your Google Drive) share the image. Selecting “Share”
changes the file permissions for the image so that the images can be viewed by
anyone with the link. SnagIt for Chrome offers a solid set of annotation tools
in an extremely well designed workflow.

SnagIt’s Chrome app and extension combine to offer a workflow that nicely
balances power features with ease of use


These aren’t the only four Chrome screenshot tools: a quick
search at http://chrome.google.com/webstore
will turn up many others. But these four do address a wide range of web
screenshot needs. Choose a tool that makes the workflow of creating,
annotating, saving, and sharing a screenshot easy.

Your next “how to” document should have pictures
(screenshots!) as well as words.

Also read: