Image: "DIA003: Figure 2.1" by Rosenfeld Media is licensed under CC BY 2.0
Since publishing the article about applying emotions to interaction design I’ve been fascinated by this subject, tackling questions like: How do you design animations that trigger positive emotions? What does it take to create a transition that feels vivid and is fun to use? Today I would like to dig a little deeper into the subject of using animations to tell engaging stories. We would like to share our insights with you.
Where can we find inspiration and principles that we can build upon when designing movement and behaviour? The book 'The Illusion of Life' written by two of the greatest animators at Disney (Frank Thomas and Ollie Johnston) is a good starting point to answer these questions. While flipping through its pages I realized that actually a huge part of an interaction designer’s job is to create the illusion of life. Of course an interface needs to be usable – that’s the rational part to it. But it will only captivate us if it talks to us in a natural manner –it should feel alive. According to William F. Allmann our brain is hard wired to detect human behaviour and emotions everywhere around us. That’s because they help us to determine the intentions of our counterpart. Thomas and Johnston documented 12 principles of animation. Following their paths Johannes Tonollo did a great job in his thesis Meaningful Transtions in which he applied these principles to the context of interaction and transition design. To sum up the insights from both sources I’ve created a little check list for designing vivid UI animations:
Slow in Slow out a.k.a. Easing
Real world objects don’t just stop at once. Let things ease in and out, let them bounce back. Check Robert Penner’s equations that have become a defacto standard in most programming environments.
Squash and Stretch
Real word objects are not rigid, they’re flexible and they’re being distorted while moving.
Arcs a.k.a. Paths
Real world objects don’t move on straight lines, let things move along paths.
Anticipation
Real world objects don’t just start a movement immediatelly, for example you need to bend your knees before jumping. Indicate that a movement will start by a little animation before you actually start the main action.
Timing
This is the most important factor when designing animations, yet there’s no standard. Keep transitions short – don’t let people wait too long. But don’t shorten the animation too much, otherwise you’ll get a unrealistic behaviour. Finding the right timing for your transition involves a lot of testing and finetuning.
Performance, costs and focus
In contrast to a Disney movie the “special effects budget” is usually not that huge when creating interfaces. Also the device performance imposes limitations when finetuning animations. Use these constraints to focus on the important animations that support the story of your application.
In interfaces we often deal with animating a whole bunch of objects at the same time. In this case you can add some additional principles to the mix.
Swarm behaviour
In real life multiple objects usually don’t start synchronously. A swarm movement is initiated by an individual and is then adapted by the other members of the swarm.
Randomness
The movement of multiple real life objects isn’t congruent (military parades excluded). Each individual object might behave slightly different. So add some randomness when animating multiple objects. An example of this can be found in the shaking animation of the iPhone’s app icons when you’re about to delete some.
In recent projects our team has been using the browser as favorite runtime for Rapid Prototyping. You can use a lot of nice tools nowadays in order to make transitions and motion design effective and reusable. Animate.css for example is a great tool to get started with reusable transitions and behaviour. It’s a set of basic transitions that can easily be applied to objects in your interface.