Interface animation is an essential part of developing any digital product, application, or website. Think about how rarely you come across an application or a 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 animations are needed, 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 the 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. Find more on our Dribbble account]
List bounces, processing bars, hover effects, and click effects improve the user experience and usability. Well-thought-out motion design makes a user interface more predictable, easier to control and navigate, faster, and more convenient. Moreover, it brings delight and makes the experience memorable. The way interface elements interact with each other and with the user determines the overall impression and experience of using your product.
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 UI mobile apps animations is prototyping, though some ideas may come earlier during sketching or wireframing.
[Connect Home. Find more on our Dribbble account]
At the prototyping stage, we generate and test our first ideas and create sketches including for interactions (animations) which will later be detailed and perfected. 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 be changed during future iterations if needed. That’s why at the prototyping stage, we create so-called low-fidelity prototypes of interactions with minimum details. This saves time and allows us to test more ideas.
The main part of the motion design happens after the overall visual style is approved and when all UI screens are ready.
For example, when working on one of our projects, we needed to let users select multiple elements and visually display this choice with an analogy from the real world: putting items in a basket at the grocery store and seeing what’s already there 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 for Mac.
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. Find more on our Dribbble account]
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 of interface elements, and transitions between them 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 its target audience. For example, if you create 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, 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 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 fine. However, later we realized that this particular control should be designed differently – 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. Find more on our Dribbble account]
When creating the interface and animations, take into account not only the technical side 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 Mac, 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 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 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 animation. With its built-in plugins, it has tools for exporting an animation to code. It’s a bit harder to master than Principle or Flinto, however.
Framer, Origami Studio, and Form
Framer, Origami Studio, and Form are powerful tools for prototyping, though they each have a steep learning curve. They’re based on coding or visual programming.
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. Some designers 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 InspectorSpacetime).
[Twitter 140+ app. Find more on our Dribbble account]
A few tips to top it off
Prepare your layout for import into the prototyping tool
This is especially important when creating an animation for an already 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 that you aren’t going to animate into one or two assets. For example, if you’re making a scroll animation of content in a list, you don’t need to have every element of the list as a separate layer, not to mention every icon and button.
[Car sharing app concept. Find more on our Dribbble account]
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, use your own sense of time as well as guidelines.
For example, in the Material Design guidelines, there’s a special Motion section. Using the information in these guidelines, you can easily create effective and functional motion design. Another reference you can use is the 12 principles of animation from the Disney studio. These principles are based on years of Disney’s experience, and suggest how to create more natural, lively, and realistic animations. But, when using animation to improve a mobile app, don’t forget – you’re building an interface, not a cartoon!