8 things to consider when creating UI animations

Published in

Hike One | Digital Product Design

6 min readNov 23, 2018

It’s no secret that UI animations can greatly contribute to the user experience of a product, and even single-handedly solve design problems. But the road leading up to a well-designed animation comes with many considerations and pitfalls. There is a very thin line between a good animation that supports the user in completing a task and a bad animation that just gets in the way. So what should you consider when designing a UI animation? Let’s find out.

1. Purpose

First and not least, there must be a purpose. UI animations should never be made when the only intention is to make something move just because it looks cool. You should create it with a purpose in mind. In the end, an animation has to contribute to the overall communication to the user. When this is received well, the animation has the right purpose. There’s a good chance that if your animation solves a design problem, then it automatically serves a purpose.

For example, Things 3 has a clever way of creating a new todo. They allow the user to drag the ‘add’ button to the position where they want to create a new todo. A big text field expands from where the user’s finger releases the screen and pushes aside the other todo items. This animation provides context and suggests that the written text will appear between right in the spot where the ‘add’ icon was released.

2. Guidance vs. Distraction

Animation can reduce cognitive load, meaning it can decrease the amount of mental effort that is needed for a user to complete a task. It guides users in understanding the structure of the interface, and therefore ask less effort from them. A simple example is the hamburger menu. The menu regularly slides in from the left side of the screen. It’s clear where it came from and where it hides when you dismiss it. If no animation was used to support this, users would have to figure this out for themselves, leading to increased cognitive load.

But in the same way, animation can also increase cognitive load, when overused. Animations have a huge impact on how it draws user’s attention. According to NNGroup it’s in our instinct to focus on parts that move. This can be used to your advantage, but if too many things are moving on a single stage users can get overwhelmed and distracted.

An example of UI animation that looks good but will not help users. While the content should have the primary focus, the top header is screaming for attention.

3. Real-world Physics

As humans, we expect that objects around us have mass and therefore have a natural way of moving. When moving, things accelerate before they reach a constant linear speed, and decelerate before completely stopping. These same principles can (and should) be applied to UI animations. If not, an animation will feel weird and unintuitive.

Timing illustrated from Disney’s The illusion of life

4. Frequency

An animation might be useful the first few times but could get annoying over time when you see it over and over again. That’s why it’s important to take the frequency into account. It should be okay when the user has to wait for an animated action to complete for a single time. When this occurs multiple times, this will far more likely result in an annoyed user, especially when this is part of a heavy-used process for the user.

Each time you open the app, you have to watch this 5-second loading animation

5. Brand Personality

Animations can express a brand’s personality just as much as fonts, colours, and icons can. Together they form a coherent visual identity. Now, there aren’t as many animation styles as there are colours, but picking the right style will definitely contribute to the user’s perception of the brand. So it’s important to consider what a brand wants to express.

For example, in the Dutch mail and parcel corporation PostNL, the user can load new deliveries by pulling down the page. While doing so, a fun and animated van shows up and moves out of the screen when loading is completed. While they could have used a regular spinner, it is animations like this that make users smile. The brand PostNL highly values customer happiness, so this definitely serves a purpose.

A UI animation that puts a smile on your face

6. Timing and perceived performance

The timing of animations has a lot of influence on the user experience and perception of performance. As designers, we tend to make our animations a bit longer than we should because we want to enjoy every frame of it. Frankly, users don’t care about our animations as much as we do, they just want to complete a task. If a lengthy animation gets in the way of that, users get frustrated. Generally, the rule is: the faster, the better.

When it’s impossible to make an action faster because the processor simply won’t allow it, animation can be used to make it feel faster. Take the opening of the Slack app (and a lot of other apps) for example. On an iPhone 7 Plus it takes exactly 2 seconds before you get to see content. It’s technically impossible to make this shorter, but by instantly showing an empty version of the app, directly followed by an animated skeleton UI before the content appears, the user will perceive as if the app loaded instantly.

What a breeze compared to the RTL example above

7. Technical restrictions

So you have created this beautiful animation, only to hear from your developer that it’s impossible to build. Unfortunately, beautiful effects made in tools like After Effects don’t always translate well to web or native code. Not to mention the millions of legacy Android devices out there and outdated hardware with processors from 1998. Besides that, animations can lead to extra work for the developer. So to avoid disappointment, always do a technical check with development up front.

It looks buttery-smooth on your iPhone XS, but what about these units?

8. Workload

So, there are plenty of good reasons to put UI animation in a digital product. But why are you designing it in the first place? Are you just trying to get a feel of how something moves, trying to blow away your Product Owner, preparing for a usability test or handing over to development? Let’s face it, designing animations take time so it’s always good to consider what is minimally needed in order to reach your goal in the project.

A good way to start is by using a motion comp. It’s often enough to get a feel of how something will move without having to dive into the details. It’s very quick to create and will hurt less when you have to throw it away.