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 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]
Bouncing lists, processing bars, hover effects, and click effects improve the user experience and usability. Well-thought-out motion design makes a user interface predictable, easy to control and navigate, fast, and convenient. Moreover, it delights users and makes the experience with your app memorable. The way interface elements interact with each other and with the user determines the user’s overall impression of and experience with your product.
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 the like button 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 for interactions (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 so-called 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 users can see what they’ve already selected and what’s missing.
After eliciting requirements, we started looking for references for a specific case and then sketched ideas with a pencil. After we had tested each of these ideas, we created the animation with the help of Principle.
What to consider when creating animations for mobile applications
Follow platform guidelines
When creating animations, you should always take into account current mobile UI design trends as well as the design guidelines for 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]
Nevertheless, we frequently face cases when solutions provided by guidelines are insufficient and we need to create something new. In such cases, we start with a pencil and notebook to search for ideas. We invent motions, interactions with interface elements, and transitions between those elements on paper and then polish them later.
Comply with brand identity and the needs of your target audience
The overall style and mood of animations as well as their connection to the brand are also important for building great interactions. In many cases, 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.
The techniques mentioned above are used not only for children’s apps and websites but also in products that focus on gaming and friendliness.
Don’t forget about 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 of one of our own oversights.
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 one of our solutions 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, take into account not only technical considerations and usability but also cultural norms. You definitely don’t want to lose users because of insensitivity.
How to choose a tool for designing animations
There are a number of popular tools for motion design and prototyping including Principle (for macOS), Flinto, Framer, After Effects, Origami Studio, and Form. Your choice of mobile animation software should depend on your goals.
Principle and Flinto
Principle and Flinto are the easiest motion design tools to use. 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 that a serious prototype can quickly become messy. Thus, you’ll need to use some additional tools. Nevertheless, with Principle and Flinto you can quickly build prototypes and create custom animations.
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.
In terms of development, there’s one important detail you need to take into account when choosing the right tool for your needs: delivery. Nowadays, there’s no generally accepted standard for delivering prototypes and animations to developers. Some designers make specifications for each micro-interaction manually. Others send a video or GIF file and then help the developer by describing the flow. Some combine both methods. This happens because the tools listed above either lack features to solve the problems of delivery or solve them only partially.
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. There are some useful plugins for After Effects that export an animation to code, including Lottie, Bodymovin, and Inspector Spacetime.
[Twitter 140+ app by Yalantis]
A few tips to top it off
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]
Stay consistent with your brand identity
Designing great animations can be tricky. Animations can make your app fresh and make your customers love it. But will a cute rabbit eating a carrot be a good loading animation for a mature cybersecurity company?
Consider 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.
Watch the duration of your animations
No matter how fun it is to animate static mockups and play with bounce effects and splashes, remember that what you’re creating isn’t a cartoon but rather an interface. If you abuse animations, they’ll clutter your 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, there’s a Motion section in the Material Design guidelines. Using the information in 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. But when using animation to improve a mobile app, don’t forget that you’re building an interface, not a cartoon!
Drive users’ attention to important elements
Using color and position to attract users’ attention to an important element or elements in your app is surely a good idea. But you can make an element more significant with animations in addition to color and positioning. 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]
Ease in to and out of 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 speed up and slow down before stopping, and an animation that demonstrates real-world physics will be accepted better by users than one that doesn’t.
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]
Remember the cascading effect
When trying to make your animation elements look like a waterfall, you can add delays to content. You don’t have to add delays to every single element, however; you can place your content in groups. Google recommends a 20 millisecond break between the groups of elements. Check out Google’s explanation of the choreography principle for examples.
Push elements out of the way of your content
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. See the Material Design guidelines for more examples of content-aware animations.
[Music app animation by Yalantis]
Show the state change in buttons
Buttons can also give visual feedback to users. You can use the button container to make a button change, say, from a call to action to a loading animation or even a splash to show that the interaction was successful. The point is utilizing the exact space that users interact with.
Now you can see why working on a new animation requires you to consider a bit more than easing and duration. Make sure you stay brand-consistent 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!