The Imaginative Ways to Incorporate Animation in App Design

In my post before, I outlined the key features of animations and how to use the tool of Principle to create some animations. The animation is not merely meant to delight and entertain, the animation in UI can bolster user interactions and increase engagement. 

Last week when I conducted the usability testing of my app, one of my participants asked me: "Did you consider adding some effects to your app to make the notification stands out?". It was a great suggestion and actually, since day one I started my app design, this is the thing I wanted to figure out, especially my targeted users are kids and I would like to provide fun interactions when they using my app. After that testing, I searched online to understand how to better use the animations and keep the balancing when implementing that.

Microinteractions are based on accomplishing a single moment or task through the provision of a delightful experience and useful feedback for the users.

The animation provides the opportunity to surprise and delight users during a particular action. According to Vamsi, the animation is a good example of micro-interaction, and it fulfills the functions of :

• Communicating status and providing feedback
• Enhancing the sense of direct manipulation
• Helping people to see the results of their actions

The app I designed with the animation.

In today's articles, I will showcase some of the imaginative ways to incorporate animation in App Design.

Animated Splash Screen

A splash screen is a screen that appears when users open an app on their mobile device, therefore it is a great chance to make the first impression and reinforce the brand identity.

Animated Feedbacks

The feedbacks show users that their action worked, and helps them interact with the UI as if it were a real physical object. The animated feedbacks can be several ways such as the animated buttons, animated progress, error pages as well.

Animated Character

The app I designed is for the users between 3-8 years old, and in order to promote the brand, I create a series of hippo faces and by adding animation for the hippo to enforce the branding when users interact with the app.

The hippo faces I designed, and the effects after incorporated with animation and stimulate the talking.

Here showcase how I incorporated with the animated character into the app I design, you can see the hippo appears in some screens either once the users provide a correct answer of a question or complete a task.

After the user completing the learning, they can choose a visual toy and the animated hippo is excited to share the joyfulness and achievement.

Thank you for reading!

References:

How to Effectively Incorporate Animation in Your Mobile App Design

8 imaginative ways to use animation in mobile apps

The Secret To Killer UX Design: It’s All in the Microinteractions

Micro-interactions: why, when and how to use them to improve the user experience