How to Use Animation to Improve UX Design?


UX design:

UX design is the process of designing (digital or physical) products that are useful, easy to use, and delightful to interact with.

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 isn’t entertaining the user, but rather they are helping the user understand what’s going on or how to use your app most effectively. 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.

In Mobile UX London meetups and conferences, our main focus is on UX. Animation may be used in a wide range of scales and contexts to unite beauty and function: 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 and UX design 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.

Loading Doesn’t Have to Be Boring
Skeleton screens complete the UI and UX design 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, so it’s clear what happened between where the 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:

Design State Change Without Hard Cuts
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:

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.

For example, a menu icon may smoothly transition to a playback control, and back again. 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, and that one cannot exist while the other is present.

Animation can enhance the sense of direct manipulation.
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. Such a small detail means the difference between having to guess what will happen next and knowing what the icon means in either state.

Material Design
Image credit: Material Design

Use Feedback to Highlight That Something Went Wrong

Animation can reinforce the actions a user is preforming.

For example, 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 notice such animation they instantly understand the action.

The form is basically shaking its head at you
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. By following the principle “show, don’t tell”, you can use animated feedback to show what’s been accomplished.

In Stripe’s example below, when the user clicks “Pay”, a spinner briefly appears before the app shows the success state. Checkmark animation makes user feel like they easily did the payment and users do appreciate such important details.

Use Feedback to Show What’s Been Accomplished
Image credit: Michaël Villar

Conclusion

Animation is powerful when used in a sophisticated ways. It’s really important to take time and consider when an animation is and isn’t appropriate. We need to embrace the motion from the very beginning and think of it as natural constituent of our design, because design is more than just about visual presentation.

Recent Posts

Hackday Homies – A Day at #HackUX

Shakira shares the experience of attending her first hackathon at #HackUX. You can check out her website, portfolio and blog
Read More
Hackday Homies – A Day at #HackUX

Why is UX different in the Internet of Things?

 Image Source: Becky Van OmmenWhat the Internet of Things introduces -- or better said, unites -- is data, interactions, and
Read More
Why is UX different in the Internet of Things?

Does Your Mobile UX Pass The Test? 4 Things You Can Improve On Today

It’s really important to get your mobile UX right. Good mobile UX consists of seamless navigation, an effective colour scheme,
Read More
Does Your Mobile UX Pass The Test? 4 Things You Can Improve On Today

Top 10 Inspiring UX Portfolios

Every UX designer knows that their portfolio will be crucial for their career and for showcasing their body of work.
Read More
Top 10 Inspiring UX Portfolios

Designing Chatbot with Elvia Vasconcelos

During our May meet-up "Designing Chatbot - Part II", Elvia Vasconcelos, senior UX designer at SapientRazorfish. He delivered a really
Read More
Designing Chatbot with Elvia Vasconcelos

Q&A with the Forms Master: Sjors Timmer

1. What inspired you to work in UX - Mobile UX London? UX brings together three things I’m interested in: figuring
Read More
Q&A with the Forms Master: Sjors Timmer

When to slow down a corporate design project? – Valuable Content

There are so many different scenarios a designer can find himself in when starting a new project. Some of them
Read More
When to slow down a corporate design project? – Valuable Content

A Day Attending HCID Open Day: Bootstrap UX

The MUXL team had the pleasure of attending the HCID conference on Thursday April 27th, it was good to see
Read More
A Day Attending HCID Open Day: Bootstrap UX

UX Influencers 2017 You Should Follow: Top 10 people in UX

Mobile UX London, a one-day User Experience & usability conference to learn and develop skills in Mobile User Experience in
Read More
UX Influencers 2017 You Should Follow: Top 10 people in UX

Compare the Market – User Centered Design Principles

 At compare the market.com we’ve always focused on customer needs when designing and building our products. Over the last couple
Read More
Compare the Market – User Centered Design Principles

7 Designing Tips AI with ChatBots – MUXL March Meet-up

Everyone was kicked backed and relaxed with a beer ready to hear the insights that David Contreras had to give
Read More
7 Designing Tips AI with ChatBots – MUXL March Meet-up

UX Jobs and Careers – How does your Pay Compare?

Are you wondering how much your work colleague makes? Are you planning on transitioning to a UX jobs but you’re
Read More
UX Jobs and Careers – How does your Pay Compare?

Meet One of Our Trainers: Dimitris Kontaris – UX Consultant

Dimitris Kontaris, currently working at HSBC Retail Banking and Wealth Management as a Senior UX Consultant, Dimitris has worked with
Read More
Meet One of Our Trainers: Dimitris Kontaris – UX Consultant

What will be the biggest UX trends in 2017? MUXL asks the experts!

In 2016 we witnessed the rapid explosion of UX in IOT and AI, bridging the gap that has traditionally existed
Read More
What will be the biggest UX trends in 2017? MUXL asks the experts!

One Device: The next big thing to replace all other devices

All smartphones will become obsolete by the end of 2018. They might share their fate with the laptops, eBook readers,
Read More
One Device: The next big thing to replace all other devices