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.
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:
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:
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.