Create animations for mobile user interfaces that meet the needs of users

Create animations for mobile user interfaces that meet the needs of users
Surface animation is an integral part of developing a digital product, application or website. Think about how rarely you encounter an application or website that does not have at least one animated UI element. At Yalantis, we follow a thorough approach to creating animations and try not to miss details. In this article, you'll learn why animation is needed, what to look at when creating, and how to create 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 improve usability.
Apps animations help users recognize links between UI elements and views. Give users feedback so they know what's going on. Display the hierarchy of pages and screens; and draw attention to important elements and functions. List bounces, processing bars, hover effects, and click effects enhance usability and ease of use. Sophisticated motion design makes a user interface more predictable, easier to navigate and navigate, faster and more convenient. In addition, it brings joy and makes the experience unforgettable. The way the UI elements interact with each other and with the user determines the overall impression and experience of using your product. What's the process of creating animations? Creating animations and motion design is in the final phase of the design process. Before that, there are five basic phases of app design: research, wireframing, prototyping, testing, and visual design.
These stages are iterative so that they can be executed in a different order depending on the requirements. The first step in creating UI animations for mobile apps is prototyping, even if some ideas come earlier during sketching or wireframe. At the prototyping stage, we create and test our initial ideas and create sketches for interactions (animations) that will later be detailed and perfected. Most of the visual style in the prototyping stage is not yet defined. The main output of this level is the general page structure, which may be changed in future iterations as well. 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 further ideas.

The bulk of the motion design takes place after the entire visual style has been approved and all UI screens are ready.

For example, when working on one of our projects, we had users select multiple elements and visually display that selection with a real-world analogy: putting things in a supermarket basket and seeing what's already there and what's missing.

After making demands, we looked for references for a particular case and then sketched ideas with a pencil. After testing each of these ideas, we created the animation using Principle for Mac.

What should be considered when creating animations for mobile applications?
Follow the guidelines of the platform
When creating animations, you should always consider the latest trends for mobile UI designs and the design guidelines for the platform you design for. For example, following the detailed material design recommendations, you can create a good motion design surface without any special research. Also, this interface will already be familiar to your users.
However, we are often confronted with cases where the solutions provided by the guidelines are not enough and we need to create something new. In such cases we start with a pencil and a notebook to search for ideas. We invent movements, interactions of surface elements and transitions between them on paper and polish them later.

Meet the brand identity and needs of your target audience
The overall style and mood of the animations as well as their connection to the brand are also important in enabling good interactions. In many cases, animations need to match the basic idea of the product and the needs of its target audience. For example, when creating an app for children, bright colors, bouncing effects, and animated characters are a great way to create an interactive experience and create the right mood. But in other cases, such a playful approach may be inappropriate.

Also read: To develop apps for children and avoid typical mistakes

The above techniques are used not only for children's apps and websites, but also in products that focus on gaming and friendliness.

Do not forget the ethical and social norms
There are tricky cases where you have checked everything and thought about each part, but there is still a small detail that becomes a big problem. Here is an example of one of our own oversights.

We had to create an animation for gender selection while onboarding the Talos app. Talos is a fitness application that adapts to each user and provides recommendations based on user data. To make this possible, the app asks users a few simple questions when it comes to onboarding. One of the first questions concerns the gender of the user. In the following animation you will see one of our solutions. At first glance, everything is fine; The control is based on a standard switch and works flawlessly.
Later, however, we realized that this particular control should be redesigned - male is set as the default gender. During the testing period, we received some negative feedback from users who called this solution sexist. When creating the interface and animations, consider not only the technical side and ease of use, but also cultural norms. You do not want to lose users because of insensitivity. How to choose a tool for designing animations? There are a number of popular motion design and prototyping tools, 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, there are a number of limitations, such as the inability to implement 3D animations and export specifications for developers. In addition, animations always appear between artboards, which means that a serious prototype can quickly become messy.
Therefore, you must use some additional tools. With Principle and Flinto, you can quickly prototype and create custom animations. After Effects After Effects is not intended for prototyping. However, it has a variety of tools and resources to create various animation types. With its built-in plug-ins it has tools for exporting an animation into code. However, it is a bit harder to master than Principle or Flinto. Framer, origami studio and form Framer, Origami Studio, and Form are powerful tools for prototyping, though each has a steep learning curve. They are based on coding or visual programming.

In terms of development, there is one important detail that you need to consider when selecting the right tool for your needs - delivery. Today, there is no universally accepted standard for providing prototypes and animations for developers. Some designers manually create specifications for each micro-interaction.
Some developers send a video or GIF file and then help the developer describe the process. Some combine both methods. This is because the tools listed above either have capabilities to solve delivery problems or only partially solve them. If we need to quickly create a working, clickable prototype with custom animations and transitions, we'll choose Principle or Flinto. If we have to deliver the result to a developer who works remotely, we work in Framer, Origami Studio, or After Effects (there are some useful plug-ins for After Effects that export animation to code, including Lottie, Bodymovin, and InspectorSpacetime).
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 user interface with many details and elements. To further simplify your work, you should carefully structure the components in your layout: give levels meaningful names, group layers together, remove unnecessary layers, and merge the components you do not want to animate into one or two elements. For example, if you create a scrolling animation of content in a list, you do not need to use each element of the list as a separate layer, not to mention all the icons and buttons.

Watch the duration of your animations No matter how fun it is to animate static models and play with bounce effects and splashes, remember that what you create is not a cartoon but an interface. If you abuse animations, they will overload your UX instead of improving it. One of the most important features of an animation is its duration. Too long animations let users wait, what nobody likes.
To define the right duration, use your own sense of time and guidelines. For example, in the Material Design Guidelines, there is a special movement section. Use the information in these guidelines to easily create an effective and functional motion design. Another reference you can use is the 12 Principles of Animation from the Disney Studio. Based on years of Disney experience, these principles show how to create more natural, vivid and realistic animations. But when using animations to enhance a mobile app, do not forget to create a user interface, not a cartoon!