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 people.
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 intended).
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.
Andy Wolber helps people understand and leverage technology for social impact. He resides in Ann Arbor, MI with his wife, Liz, and daughter, Katie.