Using animation to improve mobile UX
Bringing apps to life through beautifully simple motion
Using animation allows app designers to entice users with a more engaging medium. The goal isn’t to entertain the user with over-the-top transitions but rather to simplify the way the user interacts with the app by creating a visual approach to the interaction. Thanks partially to a rise in the popularity of video games, today’s modern apps take design cues from their animated menus. They no longer simply design static screens — apps now design the entire flow of the user's interactions with the software.
These animations can be used for a wide range of interaction patterns and in many different contexts to unite beauty and functionality within the app. They can guide the user's attention, explain functionality or features, influence behaviour, communicate a status change or help the users see immediate results of their actions.
Here are a few examples that illustrate where you can add beauty to your app to improve the user experience:
Onboard users with visually engaging content
Using animation to create visual stimulation by creating short stories for each feature within your app during the onboarding process gives users a clear understanding of what the app does. It reduces the need for long explanations of these features making the onboard process visually appealing.
Create delight when changing between different views
Using simple animations to communicate the change between the different graph views when the user toggles between the ‘Line’ and ‘Column’ options creates a sense of immediacy from their action by bringing the result to life through movement.
Make the log-in experience visually enjoyable
When apps create visually stimulating opening animations, it brings a level of excitement to the user every time they open it. While these animations need to be fully functional above all else, we as human beings are not only rational, we’re emotional.
We’d like to believe we make decisions rationally or even logically, but in reality, we tend to make them emotionally first. Then we choose to defend those decisions with logic. By creating emotionally stimulating animations, apps will form stronger relationships with their users. As long as it also delivers to their needs, users will be loyal.
Allow changes to happen fluidly without hard cuts
Using animation to make transitions obvious so it is clear what happened between where the user started and where they ended up. A beautifully fluid transition lets the user clearly understand where their attention should be focused following their interaction. Take this card-based menu concept, for instance. The animation following the interaction clearly outlines the next option for the user.
Visual feedback to highlight user’s accomplishments
Animation is also a fantastic way to help users visualise the result of their actions. By following the design pattern ‘show users, don’t tell them’, we can use animated feedback to highlight the accomplishment of the action.
In Zee’s example, when the user clicks the send icon, the little paper plan component gets shot across the sky to symbolise the message sent.
Highlighting the Visual Relationship Between Elements
Animation enhances the sense of direct manipulation. For example, in this animation, the transition to adding a new goal comes directly from the results of the goal itself and back again. This effect informs the user of the screen's functionality while adding an element of wonder to the interaction. Transforming the display graph into the setting functionality also signifies the interconnected relationship between these two actions and that one doesn’t exist while the other is present.
Immediate and clear feedback to indicate the error state
The animation should also be used to reinforce the actions the user is performing. Like this example from Google Material, the error state is enhanced with the animated action button. If the correct information had been entered, the sign-in completion animation would play. Instead, the user is presented with the error animation and message and is required to retry their entry. When users notice clear animations like this, they instantly understand the action.
In summary
Animation can be pretty powerful when used in the proper context. It’s essential to consider when animation is and isn’t appropriate. As digital product designers, it’s our job to deliver delightful experiences to the user. To do this, we must embrace motion from the beginning as a natural part of the design. Design has become more than just visual presentation, it’s about creating an emotional connection.
