The magic of animations (prototyping today’s user experiences) (2013-10-31)

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). – See how to compare car insurance quotes and much more by following the link.

Because of the importance of the execution of an idea and because everything about the execution counts (look, behavior and performances), the low fidelity prototypes quickly become inadequate to take final decisions. And this is the reason companies like Apple are known to bring solution proposals very far in the development process, ending up comparing almost final products.

So, after you have done with the sketches and wireframes, what is the best way to prototype with high fidelity a today’s user experience?

Before trying to answer this question there is another aspect I think it worths considering. Today’s software behavior can be very complex and animations, which can be a result of a direct manipulation of UI elements (e.g. dragging) or a transition between states, are now a big part in 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 permits you to optimize what presented at any given time, eventually removing the need of 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 like Briefs lets you use, in my opinion, suffice until you have not 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 you can create custom animations, but to have a better feel of the final behavior the prototype should have a minimum of interactivity. For this reason I would be careful in considering tools like After Effects which are made to export rendered videos. While with this type of output you can simulate powerful hardware accelerated effects, the playback of pre-rendered videos, because 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 is getting traction recently is Framer. With Framer you can easily script animations of individual UI elements using JavaScript, which of course lets you also add any logic required, it even has an official Photoshop exporter. While scripts are very easy to tweaks, and text files easy to version or collaborate with, 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 but where then an interactive layer was 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 have much knowledge of Hype, 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 did. Edge Animate should be very similar to Flash, but the logic layer is very likely not as solid. Flash still offers more scalability, since you can build proper apps with it, but, if it is just quick and throwable prototypes that you need, the simplicity of Hype may be enough and with Edge Animate could let you champ the so trendy HTML5.

Because I started using Macromedia Flash 14 years ago, this 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 have to build a tailored framework from scratch for your prototypes for better integration with your workflow, I would probably suggest you to learn basic programming in JavaScript and go for the other 2 options. Or, if you really want to stick to Flash, use the older version of its programming language (ActionScript 2.0) which is way more scripting friendly.

I am recently focused on mobile apps and my process is generally as follow. If I have remote stakeholders, I start making linear animations, these could also be as little interactive as a click through, and I illustrate the interactivity with a trace of the finger on the screen (a bit like this animated walkthrough made with Hype). The next level, suitable for instance for shortlisted concepts, should be able to run on a device, some interactivity should be at least simulated (e.g. a pan triggered by a tap). For this purpose I programmed some draggable components which, when placed in the editor timeline, allow me to 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.
Few tips for Flash+AIR: set the movie speed at 60 frames per second, use the GPU as renderer and use Penner’s custom easing curves (so that the animations properties can easily be communicated to and implemented by the developers).

A practical example I can show you is the deletion confirmation process for my app Instants, it took me 20 minutes to build the prototype when implementing the solution natively in the app, after I was happy of how it felt, took another 6 hours.
Try to delete the fullscreen photo in the Flash applet below (in case you are lost, double tapping the stage reveals temporarily the active areas).

Get Adobe Flash player

If you have any questions or want a live demonstration of my workflow, get in touch!

Click here to see the list with our top rated lighted makeup mirror.