« Back to rhjr.net

Protocasting: Video as a design deliverable

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.

Protocast

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.

start.jpg

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.

record.jpg

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 on Thursday, August 16th, 2007 at 9:42 am.
You can leave a response, or trackback from your own site.

5 Responses to “Protocasting: Video as a design deliverable”

  1. Complete Beginner’s Guide to Interaction Design | UX Booth Says:

    [...] in extensive detail here. Some of these include: xhtml/css prototypes, paper prototypes, and even protocasting.Stay CurrentOne of the hardest parts about being a practicing Interaction Designer is the speed of [...]

  2. What does an Interaction Designer do? | Medios Interactivos Says:

    [...] Depending on the project, the next logical step for an interaction designer might involve the creation of prototypes. There are a number of different ways in which a team might prototype an interaction, which I won’t be covering in extensive detail here. Some of these include: xhtml/css prototypes, paper prototypes, and even protocasting. [...]

  3. Complete beginner’s guide to Interactive Design « Says:

    [...] Depending on the project, the next logical step for an interaction designer might involve the creation of prototypes. There are a number of different ways in which a team might prototype an interaction, which I won’t be covering in extensive detail here. Some of these include: xhtml/css prototypes, paper prototypes, and even protocasting. [...]

  4. Complete Beginner’s Guide to Interaction Design | 設計城堡 Says:

    [...] Depending on the project, the next logical step for an interaction designer might involve the creation of prototypes. There are a number of different ways in which a team might prototype an interaction, which I won’t be covering in extensive detail here. Some of these include: xhtml/css prototypes, paper prototypes, and even protocasting. [...]

  5. 交互设计初学者指南 | LiveSign Says:

    [...] 根据项目的不同,交互设计师的下一个逻辑思考可能会需要创建原型。对于一个团队来说,有多种方式来构建一个原型,这里就不细说了。其中包括一些 XHTML/CSS 原型,纸上原型,甚至是 protocasting [...]

Leave a Reply