The design community is usually torn between two opinions; whether using animation truly adds value to the interaction experience or is it simply a fancy, unnecessary feature to include. We, believe in the former. To ensure animation refines user’s experience do the following:

Keep it Functional: Functional animations are embedded in an interface to perform logical operations. They guide the user through a process without cognitive load & provide feedback.

The subtle ‘pull to refresh’ animation that plays when you pull down a webpage on your mobile browser is an example of functional animation. It provides feedback to the user that the page is being refreshed.

Make it Feel Natural: Interaction with the UI should feel natural since the animation makes the elements act as the user expects them to act based on his real-world experience. When you click a button on a website, it pushes itself down & pops back up, similar to physical button.

Direct Attention: The human eyes are hardwired to pay attention to moving objects. On an inanimate user interface, even a slight movement of one object automatically attracts the user’s attention. The power of animation can make the user focus on what’s important.

In Resonance, we made the notification icon shake whenever the user received a new notification, thus attracting his attention and ensuring he didn’t miss any important update.

Provide Feedback: Say you dragged a file to Google Drive, released your mouse button, and nothing happened. Is the file getting uploaded? Has the upload failed? There’s no way to know that until the cute little popup with a loader bar comes to the rescue.

Feedback animations like loading are a medium of responding to the user the outcome of his actions. I prefer inserting a shake animation on login screens for an incorrect password. This animation notifies the user of his error that resembles the human behavior of denying .

Add Delight: UX takes more than just making a product usable. The design should be able to invoke a feeling of delight in the user’s mind, & animation can help invoke this feeling. An attractive onboarding experience imapcts the user & motivates him to explore further.

Soften State Change: On tapping an actionable button on one screen, if a user is taken to another screen without any animated transitions to link the two, it becomes difficult to process this abrupt state change.