The Imaginative Ways to Incorporate Animation in App Design

3 min readAug 1, 2020

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

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.

Animated faces of hippo — Animated faces

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.