Interface animations are an essential part of any digital product, application, or website. Think about how rarely you come across an application or website that doesn’t have at least one animated interface element. At Yalantis, we’re thorough in our approach to creating animations and try not to overlook any detail. In this article, we’ll discuss why you need animations, what to consider when creating them, and how to make animations for mobile apps from a designer’s point of view.
How is animation used in mobile applications?
One of the main goals of motion design is to enhance usability. Animations in apps can be in the form of bouncing lists, processing bars, hover effects, and click effects. They help users identify connections between interface elements and views, give feedback to users so they know what’s happening, show the hierarchy of pages and screens, and attract attention to important elements and functions.
[Finance app concept by Yalantis]
Well-thought-out motion design improves the user experience and makes a user interface predictable, fast, and easy to navigate. Moreover, it delights users and makes the experience with your app memorable.
What are the most used types of UX animation?
User experience (UX) animations, sometimes called animation movements, can be divided into three types:
- Micro-interactions similar to those associated with the like buttons on Twitter and Instagram
- Transitions that change the screen content or move users to a different screen
- Graphic animations like the scooter jump in the Zomato Order app
What does the process of creating animations look like?
Creating animations and motion design falls at the final stage of the design process. Prior to this, there are five fundamental stages of app design: research, wireframing, prototyping, testing, and visual design. These stages are iterative, so they can be performed in a different order depending on the requirements. The first step in creating mobile app user interface (UI) animations is prototyping, though some ideas may come earlier during sketching or wireframing.
[Connect Home by Yalantis]
At the prototyping stage, we generate and test our first design ideas and create sketches (including animations) that we’ll later detail and perfect. Most often, the overall visual style is still not defined at the prototyping stage. The main output of this stage is the general page structure, which also may change during future iterations if needed. That’s why at the prototyping stage, we create low-fidelity prototypes of interactions with minimal details. This saves time and allows us to test more ideas.
The main part of motion design happens after the overall visual style has been approved and all UI screens are ready. For example, when working on one of our projects, we needed to let users select multiple items and then display them in a basket so they can see what they’ve already selected and what’s missing.
After eliciting requirements, we started looking for animation references for this specific case with the item selection and then sketched ideas with a pencil. After we had tested each of these ideas, we created the animation with the help of Principle.
Read also: How to Create an App Design That Works
10 tips to consider when creating animations
#1 Follow platform guidelines
To create best-fit animations, always take into account the design guidelines of the platform you’re designing for. For example, following the detailed Material Design recommendations, you can create a good motion design interface without any special research. Moreover, this interface will already be familiar to your users.
[Pulse Feedback flow by Yalantis]
When following guidelines is not enough, we start with a pencil and notebook to search for new ideas. We invent motions, interactions with interface elements, and transitions between those elements on paper and polish them later.
#2 Comply with brand identity and the needs of your target audience
To build great interactions, you should also consider the overall style of animations and their connection to the brand. Animations have to match the product’s main idea and the needs of the target audience. For example, if you’re creating an app for kids, then bright colors, bounce effects, and animated characters are great ways to craft an interactive experience and create the right mood. But in other cases, such a playful approach may be inappropriate.
Read also: How to Develop Apps for Children and Avoid Typical Mistakes
The techniques mentioned above are used not only for children’s apps and websites but also in products that focus on gaming
#3 Remember ethical and social norms
There are tricky cases when you’ve double-checked everything and thought over every part of your animation design but there’s still a small detail that grows into a big problem.
Here’s an example from our experience
We needed to create an animation for gender selection in the onboarding process for the Talos app. Talos is a fitness application that adjusts to each user and provides recommendations based on user data. To make this possible, the app asks users some simple questions during onboarding. One of the first questions is about the user’s gender.
You can see our solution for this in the animation below. At first glance, everything is fine; the control is based on a standard switch and works perfectly. However, later we realized that this particular control should be designed differently, as male is set as the default gender. At the testing stage, we received some negative feedback from users who called this solution sexist.
[Talos Onboarding by Yalantis]
When creating an interface and animations, consider not only technical considerations and usability but also cultural norms. You definitely don’t want to lose users because of insensitivity.
#4 Prepare your layout for importing into the prototyping tool
This is especially important when creating an animation for an approved UI with a lot of details and elements. To simplify your further work, carefully structure the components in your layout: give meaningful names to layers, combine layers into groups, get rid of unnecessary layers, and merge the components you aren’t going to animate into one or two assets. For example, if you’re making an animation for scrolling content in a list, you don’t need every list element to be a separate layer, not to mention every icon and button.
[Car sharing app concept by Yalantis]
#5 Check behavior on different devices
Even a beautiful animation can become a bottleneck for some users depending on their devices. For instance, there are still a lot of people using Android devices with dual-core CPUs, and they can face some issues using a great-looking interface with sophisticated animations.
#6 Watch the duration of your animations
Make sure you don’t overuse animations. If you do, they’ll complicate the UX instead of improving it. One of the most important characteristics of an animation is its duration. Animations that are too long make users wait, which nobody likes. To define the right duration, follow guidelines and use your own sense of timing.
For example, you can consult the Motion section in the Material Design guidelines. By following these guidelines, you can easily create an effective and functional motion design. Another reference you can use is the 12 principles of animation from Disney. These principles are based on years of Disney’s experience and suggest how to create natural, lively, and realistic animations.
#7 Highlight important elements for your users
It’s great to drive users’ attention to core elements in your app with color and positioning. But with animations, you can make any element even more significant. Depending on how important the element is, consider implementing an animation that increases its intensity in terms of speed, size, or color. But don’t go overboard. Otherwise, you risk annoying your users and distracting them from the element.
[Medical app animation by Yalantis]
#8 Speed up and slow down animations
Change the speed of the animated object throughout the animation and it will look more natural than if you used linear motion. This is because objects in the real world first speed up and then slow down before stopping, and an animation that demonstrates real-world physics will be accepted better by users than one that doesn’t.
#9 Add context to menus
If your menu expands right from the action that creates it, it will grow from the point where the user touches the action button. This will help users understand what element of the app they’ve interacted with.
[Animation in a music streaming app by Yalantis]
#10 Make your animations content-aware
Let your content elements be aware of what surrounds them. Make content that’s changing its state repel or attract the other elements around it.
[Music app animation by Yalantis]
See Google’s Material Design guidelines for more examples of content-aware animations.
How to choose a tool for designing animations
There are a number of popular tools for motion design and prototyping. Principle, Flinto, Origami Studio, and Form are only available on macOS, while Framer and After Effects run on both Windows and macOS. Your choice of mobile animation software should depend on your operating system and your goals.
Principle and Flinto
Principle and Flinto are the easiest motion design tools for quickly building prototypes and creating custom animations. At the same time, they have a number of limitations such as the inability to implement 3D animations and export specifications for developers. Also, animations in Principle and Flinto always occur between artboards, which means you’ll need to use some additional tools to ensure your prototype doesn’t look messy.
After Effects isn’t intended for prototyping, but it has a wide variety of tools and resources for creating different types of animations. With its built-in plugins, After Effects can also export animations to code. This program is a bit harder to master than Principle or Flinto, however.
Framer, Origami Studio, and Form
Framer, Origami Studio, and Form are powerful prototyping tools based on coding or visual programming, but they each have a steep learning curve.
If we need to quickly create a working, clickable prototype with custom animations and transitions, we choose Principle or Flinto. If we also need to deliver the result to a developer who works remotely, we work in Framer, Origami Studio, or After Effects.
[Twitter 140+ app by Yalantis]
Now you can see why working on a new animation requires you to consider a bit more than easing and duration. Make sure your animation is consistent with the brand and test your animation to be sure your target audience will truly enjoy and benefit from it. Stay tuned for our next design updates to help you with that!