While doing design work and usability reviews and such for a client, I occasionally find myself needing to demonstrate an interaction visually, whether it’s something I’ve designed myself or something I’m reviewing. The written word can go a long way, but sometimes it’s just easier and faster to put the words to images so I can move on to other things. The less time I spend on what should be simple explanations, the more time I can spend doing other important things for my clients.

So recently I started creating what I like to call a protocast. Like a screencast, a protocast is a quick screen recording, but in this case, it serves as a prototype. Instead of doing a bunch of work to create a hi-res animated prototype in Flash or something, I can record a movie and toss that in with my other deliverables in just a few seconds. It’s quick work, and clients appreciate the visual explanations.

Watch an example.

So, how’s it done?

First, you need to prepare a low-res prototype in some way. Either that, or you can simply click through screens in your wireframing tool of choice while narrating your actions. Using OmniGraffle, I create a canvas for each state of an interaction and use the Actions options to set the behaviors (such as clicking a button).

Next, you need the essential ingredient: either Camtasia (or similar) for Windows, or Snapz Pro for Mac. Once you have the software installed, you need to click your heels three times, stand on one foot, pat your head and rub your stomach while reciting the alphabet backwards.

Not really. All you need to do is record a movie. Using Snapz Pro, you simply:

1. Press the keyboard shortcut to bring up the Snap Pro dialog box. As you can see, you can take screenshots of a single object, a selected area, or your whole screen as well. For a protocast, you just click the Movie button.

2. Once the Options screen opens, you adjust the size of the recording area to whatever you need, specify whether or not you want to record an audio track with your video (I almost always narrate protocasts, but you may find it’s unnecessary), and then double-click the recording area. This produces a Save As dialog box.

3. Enter the name you’d like to use to save the file, and click Save. As soon as the dialog box closes, Snapz Pro starts recording.

4. Narrate your actions as you click through your wireframes (or comps, or whatever). When you’re done, press the keyboard shortcut again to stop the movie and save it.

That’s all there is to it.

If you’re perfectionist, you may find yourself wanting to record the movie 17 more times to make sure you say and do everything just right, but this defeats the purpose (protocasts are supposed to be quick), so try to let go of your obsessions and simply go with the first or second take.

Once you have your protocast, be sure to reference it in any relevant design documentation you’ve created. In a usability review document, for example, I add a line of red text at the end of a recommendation to tell the reader where to find the accompanying movie (e.g. “See Rating.mov for an example of this recommendation.”).

If you just want to explain to a client a potential usability issue, you can use a screen recording for this as well. Simply record your actions as you perform the interaction in question, and reference that in the design documentation as well.

Protocasting saves me loads of time and clients appreciate it. This explanation should help you get started with protocasting so you can save time, too!

Posted by Robert on August 16th, 2007