You’ve probably heard the saying “Good design is obvious and great design is invisible.” The same principle applies to developing animations for mobile apps: a really great animation makes your app user-friendly and catches attention, but it mustn’t distract your user from the app itself. The main task of any animation is to explain the logic of an app to the user. We wanted to share our expert knowledge about designing beautiful and useful animations.
Types of animations:
To optimize your use of animations you need To understand their place and function within your app. Let’s see what types of animations there are.
Visual Feedback
Visual feedback is crucial for any user interface. In the physical world, objects respond to our interactions with them. People expect a similar level of responsiveness from app elements. Visual — As well as audible and haptic feedback from an app — makes users feel in control. Visual feedback also serves a more simple function: it indicates that your app is working properly! When a button grows in size or a swiped image moves in a certain direction, It’s clear that the app is “doing something,” That it’s responding to the user’s input. In the example below, when a user checks the box to indicate that the task is complete, the block containing this data shrinks in size and changes its colour to green.
[Workout book animation. Read the case study here. Check out the shot on Dribbble]
A well-known Tinder swipe-left-to-like-right-to-pass also refers to visual feedback animation type. We’ve implemented this animation in Koloda, our open-source library:
[Koloda Tinder-like animation. Sources: Shot on Dribbble, Github component for iOS, case study on our blog]
Function Change
This type of animation shows how an element changes when a user interacts with it. This type of animation is the best if you want to illustrate how functions of the elements change. Orientation animation is often used with buttons, icons and other small design elements.
In the first example here you can see that an icon In fast action button changes its look from a “hamburger menu” to an “X” to indicate that the function of the button has changed.
[Principle animation. Check out the shot on Dribbble]
In the second example, the icon changes along with the content:
[Contact display switch. Check out the shot on Dribbble]
Orientation in Space
Most mobile apps have complex structures, And it is the designer’s task to simplify navigation as much as possible. Animation can be extremely helpful for simplifying navigation accomplishing this task. If your animation shows where an element is hiding, a user will be able to easily find it next time. In the first animation in this example, we see a menu in the navigation bar. It turns upside down when a user presses the button:
[Guillotine menu animation. Check out the shot on Dribbble, Github component for iOS and for Android, and case studies on our blog for iOS and for Android]
In this example, we see how additional options appear from the bottom of the screen which also refines selection process.
[Bottom navigation. Check out the shot on Dribbble]
Hierarchy of elements and their interaction
Animations are perfect for describing parts of the interface and illustrating how they interact with each other. Each element has its own purpose and place within the animation. For instance, if a button activates a pop-up menu, it’s better to have the menu appear from the button and not just slide from the side of the screen: this will show a user a reaction to pressing the button. This helps a user understand that these two elements (a button and a pop-up) are connected.
All animations should illustrate how elements are connected. This hierarchy and interaction of elements are essential for an intuitive interface. In the first example here a menu bar appears when the icon is pressed, And so from the user’s point of view the menu is essentially the same element, only mended.
[Hamburger menu animation. Check out the shot on Dribbble]
In the second example, a card with information about an element grows when a user presses it, letting the user know that it is the same element, the only difference being the scale.
[3D Touch and Apple Pay concept. Check out the shot on Dribbble]
Visual prompt
Animations drop hints about how to interact with elements. It’s especially important to offer visual cues when an app has an unpredictable interaction pattern among elements. In this example, when a user opens a blog, cards with articles appear on the right side of the screen and a user has to swipe horizontally to go through those cards.
[Travel blog app. Check out the shot on Dribbble]
In the second example, a similar technique is used, only for social network icons.
[Share and statistics menu concept. Check out the shot on Dribbble]
Condition of the system
There are always a number of processes happening backstage in your app: data are being downloaded from the server, calculations are taking place and so on. Your task is to let a user know that the app hasn’t frozen or crashed and to indicate the status of ongoing processed. Visual signs of progress give a sense of control over the app’s performance. Ideally, each process in your app should be accompanied by a separate animation. For example, when an audio recording is in the process, the app screen might show a moving audio track. Real-time sound wave animations can indicate how loud the sound is.
[Record audio sample. Check out the shot on Dribbble]
One of the most common examples of this type of animation is a pull-to-refresh animation.
[Latest news. Check out the shot on Dribbble]
Fun Animations
Fun animations can be good or bad. Often they are used senselessly, and can seriously complicate the development of an app. But a really unique animation can be very appealing for users and make your app stand out. It’s one of the secret tools that designers can use when they want users to fall in love with their product. Unique animations can help you create a recognisable brand.
In our example, moving circles look very unusual and draw user’s attention. The ability to move these circles around the screen brings enjoyment and “gamification.” It’s easy and it’s fun.
[Workout book design concept. See the shot on Dribbble and ready the case study]
I’m also certain that a pull-to-refresh feature presented as a cooking pot won’t leave you indifferent!
[Pull to Make Soup animation. See the shot on Dribbble, the component for iOS on GitHub, and read how we made it here]
Thereare two things to consider when designing a fun animation: 1) Always make sure it doesn’t sink or hide any features of the app 2) It may not be time-consuming
The main principles of design
We looked at the main types and functions of animations. To make truly successful animations, keep in mind 9 of the animation principles that were initially articulated by Walt Disney, but can be effectively applied to UI design.
1. Material.
Show what your element consists of: is it something light or heavy, rigid or flexible, flat or multi-dimensional? Give users a sense of how this element of your UI will interact with others.
2. The trajectory of movement.
You have to define the nature of movements. General principles dictate that inanimate mechanical objects usually have a straight trajectory of movement, whereas living beings have a more flexible and less straight trajectory. You have to decide which impression you want your UI to give, and then stick with it.
3. Timing.
Timing is arguably one of the most important considerations when designing animations. In the real world, physical objects do not move according to the rules of linear motion because they need time to accelerate and slow down. Use curves to make your objects move in a more natural way.
4. Focus of animation.
Focus attention to a particular area of the screen. For example, a blinking icon will alert a user that they should press it because there is a notification waiting. This type of animation is used in interfaces that have too many details and elements and there is no other way to separate a particular element.
5. Follow-through and overlapping.
Follow through is the termination part of an action. Objects don’t rapidly stop or start moving, every motion can be presented as a set of smaller moves with every part of the object moving with its own rate. For example, when you throw a ball, after it is released, your hand still continues to move.
Overlapping means that a second action starts before the first one is complete. This keeps the interest of the viewer since there is no dead time between actions.
6. Secondary actions.
The secondary actions principle is similar to the follow-through and overlapping principles. In short, a main animation can be accompanied by secondary actions. Secondary actions make the design more vivid, But if you don’t watch out they can be an information cavil.
7. Ease In and Out.
Ease In/ Ease Out is a fundamental principle of design, equally important for animation in general and UI animation in mobile development in particular. Though well understood, 2. This principle is often overlooked. The ease in/ ease out principle need not be invented from The fact that real-world objects can’t start moving or halt immediately. Every object requires some time for acceleration and deceleration. When you design animations according to the ease in/ ease out principle, it will result in a very realistic pattern of movement.
8. Anticipation.
The principle of anticipation applies to such visual elements as prompts. Before the animation manifests itself, we give a user some time to predict that something is going to happen. One way to accomplish this sense of anticipation is through the ease in the method we described above. It is also possible to give visual prompts indication that an object can move in a certain way: for example, if a stack of cards appears on the screen, you can tilt the last card in the stack, thus indicating that users can swipe it.
9. Rhythm.
Rhythm in animations performs the same function as it does in music and dance; it structures the motion. Using rhythm in your animations makes them look more natural.
10. Exaggeration.
Exaggeration is often used by animators, But it can’t be easily illustrated because it is based on the idea of submerged of expected action or effect helps to draw additional attention to a particular feature.
In this article, we’ve talked about types of animations and principles of designing animations that can help you create a unique and useful animation for your app.
Here are the five most important points that we want you to remember:
- Remember who your target audience is and design your prototype as a solution for their problems.
- Make sure every single element of your animation has a rationale behind it (why this? why so? why now?)
- To make your product stand out, strive for a natural-looking animation that mimics real patterns of movement.
- Consult with developers at all stages of your project.
- Don’t be greedy-share your components on GitHub (as we do at Yalantis).