Guest post by Jenny Reeves

Episode 133 of UX podcast featuring Val Head is particularly fascinating because it brings the topic of animation, which is often seen as a distraction reminiscent of Flash, to the forefront as an important aspect of interaction design.

Because of the misuse of animation in the past, it’s gotten a bad reputation. It is refreshing to examine the actual benefits of using animation in our designs – since there are plenty of them.

The Benefits of Using Animation in User Interfaces

When applied correctly, animation can enhance an experience by communicating with motion, providing meaningful feedback to users through cause and effect, and giving users some spatial orientation of where they are in the experience at any given point.

Furthermore, Val Head describes, animation enables us to be more expressive and add depth to the interaction.

Val references Disney’s 12 principles of animation when talking about user experience design. The 12 principles of animation are all rooted in the concept of borrowing from the physical world and then enhancing, or even exaggerating, the animated effect to highlight a particular emotion or state.

Most of us grew up watching cartoons, so our brains are wired to interpret animation to a certain degree. Thus, applying similar concepts to user interfaces makes perfect sense. There is a caveat, however, Val calls it “Bad Animation”. We are all familiar with flashing banner ads, wiggly popups, excessive parallax that makes you dizzy, and other misuse of animation.

All of the above is essentially a cognitive overload, and creates a distraction for the user, so how do we avoid these negative outcomes?

Avoiding Cognitive Overload Stemming from Animation

As a user experience designer myself, I always put a control in place during the design process, simply asking the following questions does the trick:

• Does this element serve a purpose within the interface?
• Does it help the user achieve their goals?
• Is the experience enhanced in any way with the inclusion of this element?

An “element” can be anything from color, to choice of words, to size, and yes, you guessed it – animation.

It is my opinion that animation should be treated no different than any other piece of an interface. If it doesn’t serve a purpose that one can define, it probably doesn’t belong.

In order to avoid animation that creates unnecessary cognitive overload, let’s examine positive outcomes of animation:

1. Feedback
   Like Val Head mentioned in this episode, feedback is one of the main reasons to use animation. A hover state for a button, a progress bar, a menu that “rolls out” from a trigger point; these are all great examples of the subtleties that bring an interface to life and give the user the satisfaction and reassurance that their actions are causing things to happen within the interface and that they have a form of control.
2. Time
   Time is yet another important aspect of an experience and because animation is rooted in time it is the perfect medium for controlling the perception of time.

Anything that takes longer than a second to load creates friction in the user experience: users may think the application is not working since it is not responding, or users may get the impression that the application is slow, which often results in abandonment of the experience.

How many times have you gone back to the Google results page after clicking a site that didn’t load in less than 3 seconds?

In my article exploring the perception of time, I argue that it likely is more important than actual and accurate time. Animation can be used to reduce the perception of time, as in the case of progress bars that are designed to keep the user’s minds occupied with an animation while something is loading, these can be dissected further to create an even better illusion of time by adjusting the speed of perceived progress to go slower at the start of a progress bar and speed up toward the end.

The Tools for Communicating Animation Ideas

Let’s zoom back out from all that detail and examine the real world problem of applying these animation concepts to projects. From wireframes, sketches, and clickable prototypes, we have many design tools at our disposal to create visualizations of our ideas, but are any of these tools useful for communicating animation ideas?

Back in the days of Flash, designers could (with some effort) learn the basics of timeline animation, which didn’t require programming skills if they didn’t have any. They put together rudimentary animations, and that was enough.

Then things went wrong. Flash didn’t work on the devices that rapidly took over the market.

Today we have better tools at our disposal for creating animation for the web such as CSS3 and Javascript. But what are designers left with if they are not comfortable writing code?

Val Head mentions the use of Keynote as a way to communicate low fidelity animation ideas to the developers who will inevitably build the interface. Another way to communicate these ideas on a team is being in the same room. UX designers, UI designers, and developers talking through the idea, the feeling, that we are trying to convey.

We can also sketch storyboards for animation progression, like Disney animators do.

We can act out animations with our hands to demonstrate the speed, acceleration, deceleration, and other characteristics of motion.

If we are creative wordsmiths, we can even describe in writing the desired animation effect.

We can use prototyping tools like inVision (or even Keynote, as Val mentions) to prototype the desired effects.

Whatever the method, we must give the aspect of animation in interaction design ample space and time to imagine, discuss, and create an experience that doesn’t just looks good and works well, but also acknowledges the user by responding back.

Val’s book, Designing interface animation is available on Rosenfeld Media. You can listen to Val in Episode 133 or via Soundcloud below.

Jenny is a user experience designer who is passionate about human computer interaction, design, and code. Her background includes web development, a degree in fine art with a painting major, user experience leadership, and teaching IT courses at a community college.

She is the founder of Steady State Digital Consulting where she creates user-centered interfaces.