Animating paper prototypes

I’ve spent lots of time lately talking through complex interactions with our coders. It’s tricky. Sketches, wireframes and examples all help, but it’s hard to talk about transitions and movement when you’ve only got static diagrams to illustrate. Discussions take ages. Then, after everyone seems to have agreed on how the feature’s going to work, the developers come back with something close… but no cigar.

A few months ago, I started playing with ideas to make this easier. I wanted a way to show states and transitions, in a format as fast and easy to produce as a rough sketch. So I thought I’d try animating the paper prototypes we’d been working on.

This is one of the first animations, made using a webcam and some capture software I wrote. Here, a new client is completing an application form for a new account. This shows some of the different validation behaviour in the form.

Paper prototype animation from chrisneale on Vimeo.

Then I plugged in a mic and recorded a screencast. Quicktime has a useful feature that lets you play back a video one frame at a time, using the cursor keys. This meant I could easily control the speed of the animation while explaining what was going on. Here’s what I ended up giving the developers:

Paper prototype animation – with voice-over from chrisneale on Vimeo.

The desk is the stage, and the action is framed inside a print-out of an empty browser to give it context. I wanted it to look so simple and sketchy that nobody could possibly confuse it with a design, so I used paper, card and Post-Its to build up the scene and laid a sheet of acetate on top, which I wrote on with OHP pen. There’s a rather crude cardboard mouse-cursor and a rotating paper ‘in progress’ icon.

There are 8 animations in total, each of which illustrates part of a user journey through the form and highlights complex validation behaviour I’d found tricky to explain. I was a bit worried that the developers might think it was gimmicky, but the novelty wore off quickly and they rapidly moved on to focus on the content. Because the videos illustrated a lot of the main ideas, everyone involved was spared long, tedious meetings talking about display conditions and validation behaviour. This was a big win.

The whole process is really quick and, most importantly, fun – developers and stakeholders engage fully even with dry subject matter. Non-techies can get involved too because the animation software only has about 3 buttons. Unlike with Flex or AJAX, there’s no learning curve.

Animation is famous for taking ages, but doing animations like mine is remarkably quick providing you’re tooled up and organised. It took me about half an hour to set the scene, based on some wireframes we’d already done. Then each animation took about 15 minutes. Here’s the rig in our lab:

Stop-frame animation rig

Stop-frame animation rig

I’ll upload the software I used to make this over the next few weeks along with more information on the rig. In short, a Processing script captures images from a high-resolution webcam and strings them together before exporting them as a Quicktime movie.

I’ve really enjoyed using this technique and I’m pleased at how it aids complex discussions. If you try it, I’d love to hear how you get along. Just be careful not to get too distracted by it’s ‘time-lapse’ mode – it’s very appealing if you’re procrastinating.

Update: 12/13/09 – I’ve released the software so you can download it and try it for yourself.

11 thoughts on “Animating paper prototypes

  1. Pingback: Wireframes Magazine

  2. Roy Scholten

    This is really rich. Behind the sheet is the ui, the system. On top of the sheet is the user/system interacting etc. And the all knowing voice-over presenting it to the viewer.

    Prototyping the transitions as well as the states gives a much more complete picture. I’ve been doing similar stuff, but based on live-action recording, editing that down to a similar level of moving-storyboardness. This seems more efficient though. “Scaling the timing up” by manually timing the slides and quick animation bits instead of editing all that video down. Excellent.

    Nice quick timing too, mine is boringly slow in comparison:

    Another way that works for me is wacomdrawings directly in Flash. Lets me quickly time the slides and add the little motion bits like you did on top of the acetate. Wouldn’t work for the complex stuff you tackled here though:

    Thanks for sharing.

  3. Jake

    Very neat.

    It might be a bit easier to use Catalyst to perform similar functions. No need for Flex or Flash knowledge and can get these cursory events and animations done in a familiar environment. It’s in Beta 2 right now for download. Not ready for prime time but fun to play with. Check out the Adobe website if you’re interested. And no, I don’t work for Adobe.

  4. Pingback: Кукольные мультфильмы для прототипирования (Animationizer) | Fresh: новости мира юзабилити

  5. Chris in Bristol

    I love this animation and prototyping method, I’m so glad that I have finally got to see it in action.

  6. Pingback: 24 UX Articles to Start 2010 | UX Booth

  7. Pingback: Daily Digest for January 16th | More Than Scratch The Surface

  8. Pingback: 10 Effective Video Examples of Paper Prototyping - Speckyboy Design Magazine

  9. erz

    You could also use presentation software (keynote/powerpoint) to animate different cutouts of a screenshot or cardboard cutouts if you prefer the look. It exports to quicktime, you can do the voiceover in imovie (might need to unquicktimify the .mov file with a program like evom to import it) and the whole process is much more streamlined than animating it by hand.

    Skip to 4:50 to see the effect I am talking about. The whole animation was made in Keynote. And if you understand German: the link leads to a how-to of the whole concept.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>