HOW ANIMATION CAN IMPROVE UX

Those small delightful details in a digital product are more than a well designed animation, they make us grin, and help us understand the product.

But animation is more than just an afterthought of smile-inducing touches. Good functional animation makes a user interface considerably more appealing and usable.

When we talk about functional animation, we mainly refer to the type of subtle animation that has a clear, logical purpose. It reduces cognitive load, it prevents change blindness, and it establishes a better understanding of spatial relationships. Simply put, animation brings the user interface to life.

This idea is clearly expressed in the Zurb’s quote :

“ We’re no longer just designing static screens. We’re designing for how the user gets from those screens to actually view content. ”

Here are some examples on how to incorporate animation into your experience:

• Use loading sequences that keep users interested

You should always try to make the wait more pleasant if you can’t shorten the line, and animation can be used in replacement of an annoying spinning loading indicators (which basically just remind the user that they are waiting). Almost any site or app can utilize a skeleton screen together with a subtle animation when loading its content to keep users engaged.

• Design Smooth State Change

Animation can be used to make transitions more meaningful, it connects the starting and ending points of the user’s browsing. Well-designed transitions allow the user to clearly understand where their attention should be focused.

Just compare these two transitions and you’ll see the difference in the interaction.

As you can see, the transitions help users understand the pace and flow of the interface.

• View system status

There is a heuristic principle of usability that says you should always keep your user informed of what’s going on. When users initiate a trade, they expect an immediate response but, there are times when an application needs time to complete an operation. Thus, the interface should keep the user informed of what is going on and show them the progress.

• Show what has been accomplished

Animation can be used to help people visualize the results of their actions. You can use lively comments to reinforce the sense of accomplishment. In the example below, when the user clicks “Pay”, a spinner appears briefly before the app displays the success status. The green animated check mark allows the user to be reassured that all is well.

Or like this example:

Conclusion:

The animation tells stories. No long, complicated stories, just simple ones, like “Hey you gotta watch this now” or “Hooray, your operation just completed successfully”. However, the purpose of animations is not to entertain the users, but rather to help them understand what is going on because design is more than just about visual presentation. Finally, as Steve Jobs said about design:

“It’s not just what it looks like and feels like. Design is how it works.”