The magic of animations

The design process of a product can be seen as a conversation designers have with stakeholders, peers and testers. The more fluent this conversation is, the more likely the resulting product is flawless and user-centred.

Prototypes are consequently essential enablers for this process, useful at different stages with different levels of fidelity: from communicating and co-designing the initial concept (for instance with sketches on a piece of paper) to validating the solution with existing users (for instance simulating features on a branch of the production code base).

Because the execution of an idea matters, and because everything about the execution counts (look, behaviour and performance), low-fidelity prototypes quickly become inadequate for taking final decisions. This is the reason companies like Apple are known to take proposals very far into the development process, ending up comparing almost final products.

So, once you are done with sketches and wireframes, what is the best way to prototype today’s user experiences in high fidelity?

Before trying to answer this question, there is another aspect I think is worth considering. Today’s software behaviour can be very complex, and animations, whether the result of direct manipulation of UI elements (e.g. dragging) or a transition between states, are now a big part of UI design. As Apple put it: “Although animation enhances the user experience, it is far from mere ‘eye candy.’ Animations give users feedback or context for what is happening in the user interface.” The extra information they provide lets you optimise what is presented at any given time, eventually removing the need for some UI elements.

For this reason my initial answer could be: the best tool to prototype today’s user experiences is a tool where it is easy to create ad-hoc animations.

Standard transitions, like the ones applications such as Briefs let you use, in my opinion suffice as long as you don’t have rendered designs (a.k.a. wireframes). After that point, chances are the pixel-perfect UI doesn’t get enough support from the transitions.

There are different ways to create custom animations, but to get a better feel for the final behaviour the prototype should have a minimum of interactivity. For this reason I would be careful with tools like After Effects, which are made to export rendered videos. While with this type of output you can simulate powerful hardware-accelerated effects, pre-rendered video, being heavily compressed, is just not meant to be easily controlled. Of course you could convert it to a sequence of PNG images, but this is definitely not practical for longer animations.

A new solution which has been getting traction recently is Framer. With Framer you can easily script animations of individual UI elements using JavaScript, which of course also lets you add any logic required; it even has an official Photoshop exporter. While scripts are very easy to tweak, and text files easy to version and collaborate on, it is hard to design a complex animation with independent elements without any kind of preview. Very far from what you can get from a WYSIWYG approach.

I think this leaves us with a couple of options: applications born to animate first, where an interactive layer was then added to open a new world of possibilities. I am talking about software like Adobe Flash, Adobe Edge Animate or Tumult Hype (only for Mac). My final answer is hence: the best tool to prototype today’s user experiences is a tool designed to create ad-hoc animations and where you can add logic into it (not the other way round).

Unfortunately I don’t know Hype well, but from what I can see it seems very well designed, and I guess starting with a new canvas it had the benefit of learning from the mistakes the very mature Flash made. Edge Animate should be very similar to Flash, but its logic layer is very likely not as solid. Flash still offers more scalability, since you can build proper apps with it, but if quick, throwaway prototypes are all you need, the simplicity of Hype may be enough, and Edge Animate could let you champion the so trendy HTML5.

Because I started using Macromedia Flash 14 years ago, it is obviously my weapon of choice. I don’t really have any reason to try something similar, just less mature and less featured. But if you have to start from zero with ActionScript, and you don’t need to build a tailored framework so your prototypes integrate better with your workflow, I would probably suggest you learn basic programming in JavaScript and go for one of the other two options. Or, if you really want to stick with Flash, use the older version of its programming language (ActionScript 2.0), which is way more scripting-friendly.

Recently I have been focused on mobile apps, and my process generally goes as follows. If I have remote stakeholders, I start by making linear animations. These can be as little interactive as a click-through, and I illustrate the interactivity with a trace of the finger on the screen. The next level, suitable for instance for shortlisted concepts, should be able to run on a device, with some interactivity at least simulated (e.g. a pan triggered by a tap). For this purpose I programmed some draggable components which, when placed on the editor timeline, let me control the playback of the linear animation using standard gestures (tap, pan or pinch). Then I package the Flash movie in an Adobe AIR app so that it can be installed on the mobile device (this process can easily be automated). It’s all very fake, but it feels so real.

A few tips for Flash+AIR: set the movie speed to 60 frames per second, use the GPU as renderer, and use Penner’s easing curves, so that the animation properties can easily be communicated to, and implemented by, the developers.

A practical example is the deletion confirmation for my app Instants. It took me 20 minutes to build the prototype. Implementing the solution natively in the app, once I was happy with how it felt, took another 6 hours.

October 2013