Feb 14, 2020

How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design

Frame 1 11 - How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design

Really good animation makes the app useful and attracts attention, but it looks natural and almost invisible. To optimize the use of animation, the designer must understand what place it occupies in the functionality of the app. After all, a successful mobile application uses animation in the right places. To do this, consider the type of animation and follow the basic principles of design.

Types of animations

Since the animation is integrated into the app interface, it should be considered as a functional element, not a decorative one. When designing animations, you need to analyze their effect on usability, and if you don’t see a real positive effect on the interaction, it is better to refuse it. Let’s look at the most popular types of animation that are used to improve interaction and user experience.

Function Change

This type of animation is the best choice if you want to illustrate how the functions of the elements change. Adding animation helps to focus the user on ongoing changes. Most often used in buttons, icons, and other small design elements. So, when you click on a picture or button, additional information about them appears.

0 sOl6YRYbey OIZo  - How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design
Image source: Dribbble

Visual Feedback

Visual feedback is an integral part of any user interface. Physical objects react when we interact with them. Therefore, people subconsciously expect that in mobile apps there will be something similar. Audio and vibration feedback gives the user a sense of control when working with the app, while the visual response indicates the app is working properly.

When the button is enlarged when pressed or the picture moves in a given direction, it becomes clear that the app is responding to the user’s commands.

sh animation - How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design
Image source: Dribbble

Clues for the user

Using animated hints in the apps helps teach the user how to use all the elements of the application as intended. To do this, you can set visual accents. For example, highlight active elements in one color, set elements in motion when the user touched them.

Clues for the user Image source Dribbble - How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design
Image source: Dribbble

App navigation

Mostly, the user is guided in the app using the menu with a list of the main sections or functions. However, many applications have a complex structure. In this case, the animation works as a visual landmark. That is, the user sees how the picture on the screen changes in the process of selecting and navigating through sections of the app. Thus, the animation is used to deliberately move the user around the app and helps to remember how to use the controls.

App navigation Image source Dribbble 1 - How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design
Image source: Dribbble

Structure of elements and their interaction

The animation is ideal for describing various parts of an interface and demonstrating how they interact with each other. Each animated element has its purpose and place. For example, if a button activates a pop-up menu, it would be better if buttons appear there, not just a slider. This will help the user to understand that the two elements (button and pop-up menu) are interconnected.

Structure of elements and their interaction Image source Dribbble - How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design
Image source: Dribbble

State of the system

Users want to be aware of the main processes in the app, such as downloading documents or images, sending messages, playing audio and video, and others. Animation allows you to demonstrate the progress of the process and track the app status in real-time. This gives the user a sense of calm and control over the situation. A mobile application will be better perceived if each process is accompanied by a characteristic animation.

READ  How to build a money-making app
State of the system Timeline App - How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design
Image source: Timeline App

Some fun stuff to make your application memorable

You can use animation just for fun and be remembered by users. The wise integration of branding into UI design can play a big role in increasing brand awareness. In most cases, this is an animation of logos, mascots, etc., which are often effectively used for welcome screens.

READ  Flutter vs React Native: what is better for your app
8b8dc21c 0f1f 461e a39b 6fc2a83e67a1 - How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design

Easing is the most useful Disney principle

In the 1930s, Disney animators Ollie Johnston and Frank Thomas came up with and formed 12 principles of animation, which were then described in detail in the book “The Illusion of Life: Disney Animation”. Many people create UI animations based on Disney principles, but in reality, not all of them work for apps. One of the most obvious signs of a competent designer is interface restraint. The overuse of animation slows down user-application interaction. The main principle for good animation we can call Easing. There are three types of such movement. Let’s take a closer look at it.

Easing is the most useful Disney principle2 - How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design

Easing make interface elements more natural. This is one of the fundamental principles in animation that is widely used. Like real objects, easing-based animations move with speed and deceleration. After all, mechanical movements are not the best choice.

Ease-in

This curve is useful in cases where objects fly off the screen at full speed. For example, this is done for system notifications or just cards in the interface. However, it is worth noting that Ease-in is suitable only for cases when objects go beyond the screen and we do not return them.

Ease i2 - How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design

Ease-out

This is the opposite effect: the object quickly covers a large distance and gradually slows down to a complete stop. These curves are useful for cases when an element quickly appears on the screen, gradually slows down and stops. Ease-out can be used for cards or objects that appear from outside the screen.

Ease out 1 - How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design

Ease-in-out

Ease-in-out is used when items move from one point on the screen to another. In this case, the animation looks as natural as possible and doesn’t attract too much attention. Consider this using the side menu as an example. This element disappears off the screen, but the user can return it to its original place at any time. For such elements, the Ease-in-out principle is used.

Greater emphasis should be placed on the end of the curve than on its beginning so that the object accelerates a little faster than slows down its movement. Then the user will pay more attention to the final movement of the element, which will allow focusing on the new state of the element.

Ease in out2 - How to Successfully Use Animations in Your Mobile App: Types of Animations and Principles of Design

Conclusion

Using the principles and rules described above will allow web developers to create interesting animations that look great. If the animation takes into account the visual features of ordinary objects and meets the user’s actions, this will significantly improve the overall impression of the app. We can also conclude that good animation is those elements that are used in the right place and don’t overload the app interface.