Case Study: How to Use Animation in UX Design

APPLYING THE PRINCIPLES OF SPEED, EASING, RELATIONSHIP AND DELIGHT

What’s not to like about animation!? 🙂

Whether in film or UX design animation entertains, improves product interactions and end user satisfaction.

Equally, if used incorrectly, animation can hurt the user experience when distracting, overused and does not assist in helping the user fulfill their goals.

Have you ever had to stick a ‘Post-it’ note on your screen to cover that pulsating ‘Buy now’ button or minimise your screen to hide that image carousel that continues to move even when you place your cursor over it and plead with it to stop?

Post-it hides pulsating ‘Buy now’ button animation

Well perhaps that says more about me as a person but something tells me the decision to use animation in these two examples was ill-advised.

Before I really understood why my animations sucked, I thought if I threw in a dusting of Trapcode Particular that my audience might excuse me for my total lack of understanding of how to use animation correctly…

Take a look at the animation below. (Although a digital screen the insights can be equally applied to animation in UX design and vice versa).

In this example the animation fails to support the message and is far from achieving its goals of adding delight, personality, character and expression to the brand.

On the contrary, the animation feels slow, laboured, jerky, abrupt and unnatural.

How not to animate transitions which are far too slow.

When an animation is slow it feels mushy, unresponsive, laboured and delayed. It holds the user up and prevents them from doing what they want to do.

It took a leap of faith into freelance and my first of many motion design courses before I understood the basics.

I get it thanks School of Motion!

By applying various principles of animation my work started to feel right; my animations had a reason to exist and felt natural.

This article will now explore those principles that will improve the feel of your animations in both UX design and motion design.

Let’s take a look at the following 4 principles that I use most frequently:

  1. Speed and Easing
  2. Transitions and Maintaining Relationships
  3. Delight.

1. Speed and Easing

Speed refers to the time that an object takes to transition from state A and B. It might be a position change or fade for example.

According to Google’s Material Design animations should take the shortest time possible without them being abrupt or jarring. A clean and crisp animation improves the user experience and stops users waiting.

MillisecondsUsage
75Dialogue close.
100Selection controls, switches.
150Fade in, scale up.
200Shape changes, nav door close, button sheet collapse.
250Nav door open, card close, button sheet open, large elements collapse.
300Card expand, large elements expand.
500Complex items, large traversing.

Google’s recommended speed settings

Easing refers to how quickly an object accelerates or decelerates. By playing with both speed and easing you can create natural looking movement.

I use After Effects to create hi-fidelity mock-up UI animations and apply easing using the curve editor.

Alternatively, you can add easing directly to a keyframe by adding easy ease, right clicking the keyframe and changing the keyframe velocity amount. As a rule of thumb, set outgoing velocity to 13% and incoming to 89%. (Fast ease in at start with a slow ease out at the end of the movement).

Adding keyframe velocity directly to keyframes in After Effects
Nav drawer opening and closing. A nav drawer opens over 250ms, and closes over 200ms.

The above animation shows the recommended speed of a nav drawer opening in 250ms and closing in 200ms for a prototype I created.

In this example, the animation is short and crisp so that the user isn’t left waiting creating a fluid and smooth transition.

Speed and easing principles apply similarly to the following takeover skins for the new Golf 8.

Images and text animate into place over 300ms durations with easing set to 13% ease in and 89% ease out resulting in a quick and responsive experience.

Golf 8 desktop prototype demonstrates speed and easing which is crisp and responsive.
Golf 8 mobile prototype demonstrates the correct implementation of speed and easing.

Google material speeds can equally apply to different types of animated interfaces such as the following that has been motion tracked in After Effects. This example is fast and crisp and feels right.

Regardless of an animation’s style the same Google Material Design principles to speed apply. Take the above infographic where each animation is quick and crisp.

Where the animations are slightly more complex an animation speed of 500ms can be used.

2. Transitions and Maintaining Relationship

When a user taps a card in an app for a more detailed view there is a transition and change of state.

With a change of state it is important to communicate that relationship with the user through animation. Why?

State changes are hard to follow and the user might not understand what has happened.

For example, a hard cut between tapping a card and displaying a more detailed view might throw the users attention because there is a lack of visual connection.

Take the following example demonstrating a parent-child transition: demonstrates how to animate this state change to maintain a clear connection and narrative between the 2 states.

Parent-child transition that maintains a relationship between state changes

The above example demonstrates:

  • Clear relationship between state A and B (Card tapped to more detailed view).
  • Continuity in the narrative between A and B.
  • Expectation by the user that by tapping A, B would occur. This conforms to a user’s mental models which is a subject I discuss in more depth in Creating Usability with Motion.

My job as a UX animator is to provide a smooth experience for the user without interruptions where they don’t have to think too much or learn how to use something.

The following example demonstrates a zoom-in relationship.

Animating a Zoom-in relationship from parent to child.

3. Delight

Delight is a polarizing topic. You either love it or you hate it. For some users having a cute animation may add to the experience for others it may be an annoyance and cause of friction for them.

When used appropriately delight puts users in an emotional flow state and they feel rewarded for tapping a button (Twitter/Facebook likes) with an endorphine high 🙂

Delightful animations can also attract the user’s attention to do something like read some text or perform an action.

Delightful animations in UX animation

Delighting users with a cute animation can such as the waving hand can add emotion to a user’s experience with a product.

If you can get this right and marry the interaction with an emotion you can become a rockstar UX animator. 🤘

Netflix Roulette provides movie suggestions from ‘spinning the wheel’.

I’ve applied the same speed and easing principles as detailed above making sure to maintain relationships in transitions where thumbs Zoom-in to video prerolls and states are changed.

MAKING ANIMATION INCLUSIVE

Animation, Motion Sickness and Vestibular Disorder

Before I wrap up here I want to talk a little about the negative effects of poorly implemented animation.

I suffer from motion sickness and vestibular disorders where some animation can make me feel nauseous.

I came across this website and although I don’t want to knock anyone, the experience left me feeling a little queezy. My advice is don’t be careless with animation, use it appropriately to assist the user experience rather than using it for the sake of using it… it should serve a purpose after all…

Poorly used animation can trigger motion sickness and vestibular disorders


I can help your business to improve the effectiveness of its animations.