Animation Principles for Interactive Designers

About two years ago I created a course for O’Reilly Media on interactive prototyping using Adobe After Effects. While I must admit, some of the material there-in is outdated given Google’s release of Sketch2AE plug-in (read my quick test drive of it here), the course is chalked full of good interactive animation tips and overall best-practices. In the course, I review practical animation tips for good user experiences and I thought it would be good to summarize here.

As a traditional animator, we are taught to memorize and use the 12-principles of animation set forth by the great Disney animators [insert names here]. If you are not an animator, but use animation in your work, I would highly recommend this book as it is a good foundation and point-of-view. The book teaches hand drawn animation techniques and if you have the dedication to do the exercises, it is incredibly rewarding – albeit painstakingly time consuming. That said, as an interaction designer, we are animating in a very different context and platform than [insert names]. For that, I have re-framed the animation principles to be more relevant and more practical for interaction and user experience designers.  

6 Principles of Animation for Interactive Designers:

1) Ease Everything

Easing is an essential aspect of animation, ensuring your motion feels and looks believable. I won’t go into details about all the easing options within the different frameworks (bezier, ease-in, ease-out, etc.) other than to say for everything you animate, add some form of ease. In the absence of ease, your motion will come across flat and robotic. Within a user experience, this is bad and could evoke a sense that the experience is broken. I’ll make it simple. For every animated action, add an ease.

“I’ll make it simple. For every action, add an ease.”

2) Call and Response

Good animators strive to create the “illusion of life.” In other words, it’s your job to simulate how things behave in the real world. Humans are experts at observing and reacting to how things move because they do it in their everyday lives. So to make something believable we have to emulate what we are all used to experiencing. Therefore, as a student of life, you spend time observing and documenting how things in the real world move. While easing helps simulate friction, weight and other forces effecting an object’s velocity, your observations would lead to another conclusion… for every action there is a reaction.

This is incredibly important in interaction design given that the User is constantly initiating an action. Their action would be the call. So as an animator, how do we respond? The easiest way to think about this is in sequencing–or staggering–your animations. If the User clicks a button, this would cause a panel to flip out. The panel then causes the first menu item to move in, which in turn causes the other menu items to follow. You could design an experience where the User click’s a button and everything pops onto screen all at once. This is efficient yet lifeless. It would not be nearly as impactful as designing a chain of reactions triggered by the User's initial action. This makes the User feel as if they are the cause, creating the illusion that they are more in control. 

3) Staging

Staging is a process that requires the animator to think beyond the object they are animating and look to other objects around it. In most cases, in order to design a good Call and Response experience, you need to consider how objects are oriented in relation to one another. This is Staging. This principle of animation is less about animating and more about meaningful choreography of objects. An object can be a single button or an entire block of content. This is extremely hard as it requires designers to think about the entire user flow and not just a single object or layout element.

The transition of content from one state to another can greatly enhance the overall User experience. In order to achieve this, you have to think in terms of “states” rather than pages. You can think of a state as being a moment in time. Each piece of content–or design element–changes and reacts as the User navigates. A good interactive designer does this in a way that carries the User’s eye seamlessly from one state to the next. How objects are placed and then move in and around each other helps orient the User during the transition.

There is so much to say about Staging that I’ve written another article on the subject. Read here to dive deeper - Interaction Designers Should Think Like Theater Directors. 

4) Timing

Timing is everything. If you were to execute all of the animation principles onto a single object, you could very easily end up with a lengthly animation. This is not recommended. First, aside from easing, you don’t need all the tools in the tool box every time you animate something. In interactive animation, Users require instant reaction and more often than not, quick movement. Timing is the art of knowing how how fast or slow a particular animation or sequence of animations should be. Bad timing could result in an experience that feels broken, sluggish or so fast it’s disorienting. While I can’t give you a rule that fits all instances, if you keep the User in mind, you should land in a good place.

5) Anticipation
In traditional animation terms, Anticipation did a good job at cueing in the viewer moments before a major action took place. A pause or pull-back moments before helped to exaggerate the main action and thus make it more clear what was happening. Same concept applies to interaction design. Some noticeable examples could occur in object transitions, button-down press or touch-and-drag interactions.

Anticipation is a great way to emphasis the call and response principle. It is also critical in those interactions where instant feedback is needed prior to a major action. I often refer to this as a pop-and-settle. While there are other examples, the most common would be when a user pushes down and there is an immediate visual indication that precedes a different animation that occurs when the user lifts up.

6) Follow Through
Follow Through is some form of visual animation that indicates a process, action or animation is complete. Follow through is by far the less used principle of animation in interaction design. This is because it often requires another line of code to execute and those who favor short mark-up and streamlined performance will ignore this step. While in some situations this makes sense, the use of Follow Through can be the ultimate polish to a premium user experience. It is also an essential concluding step to a Call and Response action, reassuring the User that an action is finished and the interface is awaiting their next click.

A good example of this is Gmail’s mobile phone experience. When a User wants to check for more mail, they touch and pull down within the inbox. In a Call and Response fashion, the loader icon appears. Once the load is complete, the looping loading icon “pops.” This 20% scale increase before is animates off screen is the Follow Through and reassures the User that the requested action worked and is complete. Think what you will, but it makes me smile every time I do it.

Check out the O’Reilly Course Here; 
Interactive Prototyping with Adobe After Effects