Nice visuals and pixel-perfect UI aren’t enough to stand out in a sea of apps.
Without animations, even the most thoughtful interfaces can confuse users and make them feel like they’re making choices without context.
Good animations elevate the user experience of your design to the next level, delivering your users a delightful, satisfying, and smooth experience.
Animations, sometimes with the combination of sound and haptic feedbacks in case of mobile apps, make the abstract experience of using an app more tactile and closer to reality with reduced cognitive load, since the user can recognize all the connections and context quicker when using the app.
In this article, my goal is to collect all the key principles that are indispensable when creating animated interfaces regardless of which tool, framework or techniques you’re using.
It’s all about focus and attention
The most important jobs of any animation in your app are to provide context and direct the focus of the user for a guided and fluid experience.
You can see here how animation provides context and connects different screens into a cohesive experience (Design by Joshua Oluwagbemiga)
Animation helps to connect otherwise unconnected screens, so the user never feels lost when navigating and using your app or website.
To get the best results from your animations, restraint is key. It’s tempting to get carried away with animations and animate everything on a screen, but this defeats the core value of incorporating motion in the first place.
Use sequences to bring order and hierarchy into your animations
Animating every element at once on a user interface feels like when everybody is talking in a room at the same time.
See how all of those bars move? (GIF by Anton Tkachev)
When you need to animate multiple elements on a screen, always use a short delay between them. Be sure to keep the same easing and duration of the animations, so everything feels consistent. For quick and fluid animations, try to use no more than 20ms delay between animated elements.
Check out the choreography principle in Material Motion for more examples.
Speed is the key to good animations
The speed of the animation is usually controlled by changing the duration of the animation (how long a transition lasts) and by easing (acceleration over time).
The duration of animations can make or break the overall user experience.
Well-timed animations are everything. (Unsplash concept by Charles Patterson)
As a general rule, try to use animations with 0.3s-1s duration.
Animations shorter than 0.3s can feel almost nonexistent, since it’s easy to miss the transition—and, when the user does notice them, that speed can cause stress and confusion in the user.
Long animations aren’t much better, though; animations longer than 1s can feel slow and get in the way of interacting with the interface.
A huge benefit of using quicker and snappier animations is that it can make your app feel faster; unfortunately, the opposite is true as well. If your animations are lagging, your app will feel broken, generally slow, and unpleasant to use.
Speed isn’t only applicable to the duration of the animation, but also to the lag between the trigger gesture and the beginning of the animation. For example, when swiping between images, if there’s a lag between the swipe gesture and the beginning of the animation, the complete experience is ruined and quickly swiping between images will feel like an impossible task to do.
Respect the laws of physics
In the real world, nothing starts or stops instantaneously. Things take time to speed up and slow down, thanks to natural forces like friction.
The more naturally an animation behaves, the less cognitive load is required from the user to get used to it and understand its purpose.
This is how spring animation should work (GIF by Ehsan Rahimi)
Beyond an animation’s duration, though, be sure to get familiar with different types of easing (acceleration over time).
Easing types used in design:
- Linear: Animation without any kind of easing. This is the most unnatural type of easing, so use it wisely and only when necessary.
- Ease-in: Accelerated easing. The animation starts slowly and ends fast.
- Ease-out: Decelerated easing. The animation starts quickly and decelerates at the end. Ease-out is generally the best choice because the fast start gives the feeling of responsiveness while still providing a natural slowdown at the end.
- Ease-in-out: Accelerated and decelerated, similarly to how a car moves. Be sure to use it with shorter animations (around 0.3-0.5s); otherwise, it can feel slow.
- Spring: Animation with a bouncing end. Often used in modern apps because of its playfulness and responsiveness.
With the right animations, your app can feel like an extension of the natural world instead of an abstract, strange, or disconnected experience.
Connect animations to interactions
Animations are usually triggered in two scenarios within apps: During/after loading a screen, and when users interact with the interface through swiping, tapping, or dragging.
The type of interaction always determines the type of animation that will be triggered. For example, if the user swipes up on the screen, the animation will reveal the new element with a slide up animation from the bottom of the screen. Another example is when a new screen slides in from the right, the user will expect that navigating back to the previous screen will be possible with a swipe left gesture.
This is how we do it: connecting touch interactions with animations – (Scaling calendar by Martha Bergmann)
When designing and applying animations, always think about the different interactions that will trigger those animations first.
Use animated prototypes to communicate your ideas
Implementing animations, especially custom animations, is always a challenge and requires additional effort from both the designers and developers.
To make this process as effortless as possible, many designers use high-fidelity prototypes that can be shared with developers, who can inspect and copy the code of the animations.
Using high-fidelity animated prototypes is the most efficient way for designers to communicate their animation ideas, solutions, and requirements with developers.
See how important animation can be in your design language? Interaction by Jakub Antalik)
Be sure to use animations in a consistent way, just like any other visual element. Integrating your animations into your design system can be a game-changer for your overall user experience and design process.
Summary
As you can see, animations are a key piece of creating a great user experience and not just an afterthought. Start thinking about animations and interactions right from the beginning so you can focus on the overall user experience throughout the entire product design process.
These principles of animations are timeless, and whether you’re just getting familiar with animations or you already know everything about them, these are some key rules that always worth keeping in mind when designing new animations and interactions.
I can only encourage everyone to start experimenting with animations either for iOS/Android apps or web-based projects. Animations are the most playful part of product design!
Hopefully, with these techniques, you’ll be able to elevate the user experience of your design to the next level.
If you’d like to learn more about animation, check out the following articles and sites:
Daniel Korpai is a product designer at InVision creating thoughtful experiences to help designers, product managers, and engineers collaborate better together. He's passionate about designing delightful experiences with a combination of business, marketing and UX/UI design.
