The UX of Animation

Originally published on Cantina Insights · 8 min read

Animation in interfaces is nothing new. We see it all the time and may not even realize it — on Facebook, our operating systems, even the pulsing LED lights on our Amazon Echos and Google Assistants. Interface animations help inform, or delight, the user on how to use a product, website, or application. But how do we use animation to create a better user experience?

Some best practices to keep in mind

UI animations must:

• Look and feel natural to the user.
• Increase the user's understanding before it delights.
• Not prevent a user from completing a task.
• Not distract the user.

By following a set of principles, you will have no problem fulfilling these requirements, and your users will thank you for it.

Duration and speed of the animation

When elements change their state or position, the duration of the animation should be long enough to give users the possibility to notice the change, but at the same time short enough not to cause waiting.

Numerous studies have found that the optimal speed for interface animation is between 200 and 500ms. These figures are based on particular qualities of the human brain and its ability to perceive motion. As a general rule of thumb, animations shorter than 100ms are perceived as instantaneous and won't be recognized at all, whereas animations longer than one second convey a sense of delay.

For mobile devices, Material Design guidelines suggest limiting the duration of animations to 200-300ms. Tablets should run about 30 percent longer — around 400-450ms — for the simple reason that the bigger screen means objects travel a longer path when they change position. On wearables, duration should run about 30 percent shorter, around 150-200ms, because the smaller screen means a shorter distance to travel.

Web animation is treated differently. Users accustomed to almost instantly-opening webpages expect to transition between states quickly as well, so the duration of web transitions should be about two times shorter than on mobile devices — between 150-200ms. Go slower than that, and the user will inevitably think the computer froze or is having connection troubles.

These rules can be relaxed when creating a decorative animation on a website or trying to attract the user's attention to certain elements — in those cases, animation can run longer.

The most important guideline to keep in mind, regardless of platform, is that duration should depend on the distance traveled and the size of the object. Smaller elements, or animations with small changes, should move faster. Animations with large and complex elements look better when they last a little longer. Among moving objects of the same size, the first to stop is the one that has traveled the shortest distance — small objects move slower than large ones by comparison, since large objects cover bigger offsets in the same time.

Easing

Easing helps make the movement of an object feel more natural. It's one of the essential principles of animation, thoroughly described in The Illusion of Life: Disney Animation, written by two key Disney animators, Ollie Johnston and Frank Thomas. For an animation to avoid looking mechanical and artificial, the object should move with some acceleration or deceleration — just as objects do in the physical world.

Linear motion

Objects not affected by any physical force move linearly — in other words, at a constant speed. Because of this, they look very unnatural and artificial to the human eye.

All animation tools use animation curves to describe this. The curve shows how the position of the object (y axis) changes over a given time interval (x axis). With linear motion, the object travels the same distance in the same amount of time throughout.

Linear motion does have its uses — it can be used, for example, when an object changes color or transparency. But generally speaking, reserve it for states where an object doesn't change position.

Ease-in, or acceleration curve

On this curve, the position of the object changes slowly at the beginning, and the speed increases gradually — the object is moving with a certain acceleration.

This curve should be used when objects fly off the screen at full speed, such as system notifications or cards leaving the interface. Keep in mind that this should only be used when objects leave the screen for good and cannot be recalled or returned — the animation curve helps express the right mood, and even small changes to the curve shift how a movement of the same duration and distance feels.

Ease-out, or deceleration curve

This is the inverse of an ease-in curve: the object quickly covers a long distance, then slowly reduces speed until it finally stops.

This type of curve should be used when an element emerges on the screen — it flies in at full speed and gradually slows down until it comes to a complete stop. This can also be applied to cards or objects that appear from outside the screen.

Ease-in-out, or standard curve

This curve makes objects gain speed at the beginning and then slowly drop it back to zero. It's the movement most frequently used in interface animation — whenever you're unsure what type of motion to use, use a standard curve.

According to Material Design guidelines, an asymmetric curve is best, because the movement looks more natural and realistic: the end of the curve should be more emphasized than its beginning, so the duration of acceleration is shorter than the duration of slowing down. This way, the user pays more attention to the final movement of the element, and thus to its new state.

Ease-in-out is used when objects move from one part of the screen to another, since it avoids eye-catching, dramatic effects. The same movement type should be used when an element disappears off the screen but the user can return it to its previous place at any time — a navigation drawer, for instance.

From these examples follows a fundamental rule that many beginners neglect: the beginning animation is not equal to the ending animation. In the navigation drawer example, it appears with a deceleration curve and disappears with the standard curve. According to Google's Material Design guidelines, the time of an object's emergence should be longer, to attract more attention.

A cubic-bezier() function is used to describe animation curves. It's called cubic because it's based on four points — the first, at coordinates 0,0 (bottom left), and the last, at coordinates 1,1 (top right), are already fixed on the graph. That leaves two points left to describe, given by the four arguments of the cubic-bezier() function: the x and y coordinates of the first point, followed by the x and y coordinates of the second.

To simplify working with curves, the sites easings.net and cubic-bezier.com are useful references — the first has a list of the most frequently used curves, with parameters you can copy directly into a prototyping tool; the second lets you play with a curve's parameters and immediately see how an object will move.

Conclusions

Animation in the interface should reflect the movements we know from the physical world — friction, acceleration, and so on. Imitating the behavior of objects from the real world creates a sequence that allows users to understand what to expect from the interface.

If the animation is built correctly, it's unobtrusive and doesn't distract users from their goals — which means it shouldn't slow the user down or prevent them from performing a task. If it does, the animation needs to be softened, or even removed.

Always keep in mind that animation is more of an art than a science, so it's better to experiment and test your decisions on real users.

Sources

• Response Times: The 3 Important Limits — How Fast Should Your Animations Be?
• Material Design, "Duration."
• Easing Functions, easings.net.
• Cubic-bezier, cubic-bezier.com.
• Creating Usability with Motion.
• How Functional Animation Helps Improve User Experience.
• Introduction to Animation.