Rich web interaction mockups

I’ve talked before about how much I like Keynote. Although it’s somewhat ridiculous, this tool is a one-stop-shop for mockups. For my usage, it contains just the right balance of speed and fidelity. But I’ve struggled for a while to find a way to mockup interactions. Specifically animations as things became more complex and harder to grasp with a simple mockup or even a series of mockups.

More after the jump

Keynote does animations

At first glance, it’s trivial. Some useless slide animations and the ability to make text spin onto the page. But going a bit deeper, Keynote once again provides just the right balance between speed and fidelity.

String together animations and image files to truly visualize and articulate an interaction. Sometimes an animated picture saves a thousand words.

This is a series of three slides strung together with transitions and animations for the elements on-screen. Although it’s a relatively straightforward interaction — arguably one that doesn’t need this treatment — it’s also about as complex as I would want to do in Keynote. For instance, the cursor changing states means I’m managing three graphics and toggling opacity back and forth.

Showing one leg of the i-beam's animation.
Showing one leg of the i-beam’s animation.

In the above animation I spent a fair amount of time adjusting the timing between actions and between transitions so that the entire animation plays without intervention. This is a waste of time. Instead, set actions to respond to a mouse click, then record a screencast to get your resulting video.

This is pretty decent production value, especially given how little time was spent. However, should something with more polish or more complexity be required, I’d turn to Adobe After Effects.

Optional Polish

Once the animation worked in Keynote, I took a screen recording and in my screen recording software, added a voice-over, some soothing acoustic music, and faded it all out to black. This extra bit of polish makes it a presentation. It also gave me the opportunity to explain design decisions.

This wasn’t necessarily intended to be a how-to, more it was intended to show some possibilities. I’d be happy to provide any pointers and maybe next time I’ll do a walkthrough screencast.

Leave a Reply

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