Animations in Mobile Applications
Understanding UX
As a developer, a designer, a product manager it’s important to ensure that the users feel like they are able to interact with an app and control it in a more natural way.
Animations play a very significant role in applications. They bring screens and objects to life along with giving a subtle and beautiful experience for the users.
When designing a product, there are many ways to improve its UI. For instance, you can give it a well-structured design framework or have thoughtfully written content but after this high-level structure is set, it’s important to focus on the details of small interaction and animations.
So what are these animations? And why are they important?
Sometimes, these are the small moments in which the user interacts with the details of a product design revolving around accomplishing a single task more pleasantly. If they are poorly implemented, they damage the user experience. Oftentimes, they are used to indicate a progress/transition/alert the users.
Most of the animations are not even noticed consciously by the user but the subtle details on animations make the product easier to use and understand.
Once the user learns, it helps them to map the animations to actions and hence, skip extra steps and feel familiar and comfortable.
“How many times have you closed the Google Pay app after looking at this animation and believing that the payment has been completed?”
So, how to achieve this experience?
It is recommended to remember the following three principles while adding animations. Let’s try to understand these better with the help of examples from Google Calendar application.
- Continuity: The animation in an app should be so subtle that it doesn’t take away the user’s attention from relevant information on the screen.
Notice how the name of the month changes without breaking or drawing too much attention. That is because it is understood that scrolling down a calendar means moving a few months forward.
2. Predictability: It is important to help the users feel more confident in performing different steps or taking actions in an application. If animations have an element of familiarity then the user can navigate through your application efficiently and understand it better quickly.
Here, you’ll notice that this app allows adding events/reminders by tapping on a time slot over the calendar which is expected.
3. Transformability: Fluid transformations between screens or actions are a key aspect of a quality micro-interaction. They enable a user to develop an understanding of the relationship between the series of views or elements present in them like how this ‘Add’ button transforms subtly to an ‘Event’ button while also opening a sub-menu of actions.
Dan Saffer, the author of the book Microinteractions, defines micro-interactions as “contained product moments that revolve around a single use case — they have one main task.”
Nowadays, animations have become a vital step of the app designing and development process. But as fun and important it is to have it, there are certain things to be kept in mind while adding them to a mobile application.
- Don’t overcrowd your app with unnecessary animations
- Make micro-interactions almost invisible
- Keep your motion consistent throughout the app
- Don’t force it — use animations if they totally belong there.
- Design for repeated use — engaging users to help them learn and recall
- Make sure your users are learning the ways and behaviours of your application.
It may help to remember these famous words
Tell me and I will forget, show me and I may remember, involve me and I will understand. - Benjamin Franklin
We’ll talk about the details of implementation sometime soon but this is all from today’s rant on animations.
See you, bye! 🙋🏻♀️
