Interactive Design: How to Make Animation in Mobile Apps
Mobile animations are an axiom. Today you'd barely find an app without a single animation. Even the simplest, invisible to the eye animated elements allow users to literally ‘touch’ an app.
Well-designed mobile animations can contribute to the app's success, positively distinguish it among competitors, and attract users. It works as a powerful tool for the user’s experience and leads to increased customer loyalty. The majority of businesses that are thinking about their own apps see this trend and try to use all the advantages of animation.
The Material design concept that was presented at the conference Google I/O 2014 continues to strengthen and evolve regarding mobile app design. The basis of material design provides clear and correct physics of object movement and responsive animation.
In general, in-app animation aims to improve the user experience and implements the following tasks:
- Provides feedback in response to user’s actions in a mobile app
- Helps the user get acquainted with the app: shows ways to interact with the UI
- Provides information about the system status
Adding mobile animations can be a very complex task. One poorly done element can spoil the whole impression of the app interface. If you want mobile animations that solve tasks in the correct way, it is necessary to follow the basic principles of animation which helps improve the UX design.
Before adding mobile animations, analyze how consistent your idea is with the main rules of using animation in mobile apps. The majority of product owners do not consider this at all when starting the development of their own apps. And as a result, they get apps which don't fulfill the initial requirements.
Here is a quick checklist that includes the main components of well-executed mobile animations:
1. Follow official OS guidelines when creating mobile animations
Every mobile platform has special recommendations for implementing design and adding animations in apps. Developers and designers need them in order to ensure that their apps fit seamlessly into the whole picture and look native. You can easily find them on the official websites: for iOS, as well as for Android.
Do not reinvent the wheel. The users of digital devices follow the particular action logic of any mobile platform (iOS, Android, or Windows Phone). Thus, try to begin with the most common animations and be careful not to change things up more than necessary.
2. Clear and intuitive mobile animation is better than unique
The main goal of in-app animation is to help users and not to distract their attention from the app content.
Animation works as visual confirmation showing that an app reacts to user commands. In other words, a user must understand how his actions correspond to the apps reaction. For example, when the user presses a menu button, the menu must appear.
If some UI element lives its own life or has non-standard behavior, it can mislead and even irritate users. There is some understanding of the way the objects move in the real world and app users expect to see the same on their smartphone screens.
Within one of the Android development projects, we had to implement a task for opening specific elements from a list and made an elegant solution. We animated opening an image as a paper folding animation for Android apps:
A good example from our previous work is the app Wallet One made for an international payments service provider. We created an interesting animation for the recognition of bankcard numbers as a rotating drum effect. It shows that animation can be custom and intuitive at the same time:
Keep a balance between extraordinary animation effects and reality. App creators always want to add something new, their “own” to the app interface. Animation is a perfect opportunity for it. Using special animated effects, you can manage user attention and inspire users to particular in-app actions. However do not go overboard.
3. Animations have to be meaningful
All animated in-app actions have to be meaningful. This means you should apply animations for targeted user transportation within the app: between navigational components, for showing the element changes when a user interacts with different app sections, for building hierarchy (hierarchy of images, music tracks, lists and other things).
Using animation, you turn the user's attention from one app element to another and influence the development of particular user habits.
Not long ago we developed an app for gathering interesting business contacts during international conferences. We implemented an appealing function with the animated effect of list paging that facilitates navigation in the app. You can find detailed description on GitHub.
Use meaningful in-app transitions. Do not neglect the common hierarchical structure of the apps as it implies that during transitions a user moves in and out of app sections. You can implement it via similar animations. For instance, navigation in iOS implies that going deeper into the setting section moves you to the right and going back moves you to the left. The user learns this effect and applies the same transition in other app sections.
It is very clear and consistent and creates a strong sense of place for where the user is inside the product.
4. Mobile animations have to be pliant and implemented with identical rhythm within the app
Proper animated effects coincide with the app concept and have approximately equal speed. Otherwise, a combination of smooth and sharp motions can negatively influence the perception of an app.
At the same time, it’s better not to slow down all the animations within the app to the common speed. Let’s say that pressing a button has to be not as smooth as paging the list.
We developed a mobile app for a large construction company. The app included two custom animated effects: splash in the company logo when accessing the app and loader during transitions between sections. Both elements have approximately the same animation speed:
Monitor the time. Timing helps to ensure uniformity in animated effects. Set up a frame rate of every motion with approximately equal intervals. This allows you to smooth animated effects. User's eyes adjust to the identical rhythm of in-app motions. As a result, app users can perceive animated effects intuitively. Moreover, this works in favor of the second rule about clear animation.
Smartphone users are so used to in-app animation that they find a UI design without animated effects boring and outdated. For this reason, businesses often turn to the development of animated apps. At the same time, product owners are not always aware when it is necessary to use animation. They should follow the principle “Less is more”. If in-app animation is created in accordance with rules, it raises the positive UI perception and encourages users to use the app again and again.