Image credit: Barthelemy Chalvet

How to Use Animation to Improve UX

by Nick Babich

Motion tells stories. Not long and complicated stories, but simple stories, like “hey, you need to look at this now” or “hurrah, your operation has just competed successfully.” However, the goal of animations is not in entertaining users, but rather helping the user understand what’s going on. 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.

Animation may be used in a wide range of scales and contexts: it can influence behavior, communicate status, guide the users attention and help the user see the results of their actions. Here are just a few examples to illustrate places where you can add some animations in your UI to improve the experience:

Loading Doesn’t Have to Be Boring

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 reminds reminds the user that they are waiting). Almost any site or app can utilize a skeleton screen together with a subtle animation when loading it’s content to keep users engaged.

Skeleton screens complete the UI incrementally before the content is fully loaded. Image credit: tandemseven

Design State Change Without Hard Cuts

Animation can be used to make transitions more obvious, it hepls connect the the states where user started and ended up. A well-designed transition enables the user to clearly understand where their attention should be focused.

Adrian Zumbrunnen has a great example on how scrolling animation can help user maintain context when they click on a link. Just compare this static instant change which feels like a hard cut:

Nothing feels more unnatural than a sudden change, such changes in an interface are hard for users to process. Image credit: smashingmagazine

With an animated behavior:

To animate is “to bring to life”. Image credit: smashingmagazine

And as you see, transitions help users understand the pace and flow of an interface. It also helps guide the user to the next step of an interaction.

Explain Relationships Between Elements

Animation can enhance the sense of direct manipulation.

It feels nice when a menu icon in a music app smoothly transitions to a playback control. This effect both informs the user of the button’s function while adding an element of wonder to the interaction. Transforming the play icon into the pause also signifies that the two actions are connected.

In this case, motion is used to draw the eye to the center of the screen where the music controls are located. Image credit: Material Design

Another example — when pressing floating action button, the plus sign transforms into a pencil. This indicates that the pencil is the primary creation method.

Image credit: Material Design

Use Feedback to Highlight That Something Went Wrong

Animation can reinforce the actions a user is preforming.

Form entry can be greatly enhanced with some animation. If correct data has been entered, a simple ‘nod’ animation can be introduced upon completion. Whereas a horizontal shake can be used when denying the input. When users see such animation they instantly understand the result of operation.

The form is basically shaking its head at you. Image credit: Michaël Villar

Use Feedback to Show What’s Been Accomplished

Animation can be used to help people visualize the results of their actions. You can use animated feedback to reinforce the sense of accomplishment.

In Stripe’s example below, when the user clicks “Pay”, a spinner briefly appears before the app shows the success state. Green animated checkmark makes user reassures users that everything is fine.

Image credit: Michaël Villar

Tools for creating animated effects and motion

Here is a collection of tools you can use to create any animated effects mentioned in this article:

Conclusion

When it comes to product design, we need to embrace the motion from the very beginning and think of it as natural part of our design, because design is more than just about visual presentation. As Steve Jobs said about design:

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

Thank you!

Follow UX Planet: Twitter | Facebook