Improving UX with animation

Author: Harry Cobbold
UX designer sketching and project planning in notebook

It’s one of our favourite subjects to work on at Unfold, there’s something about animation that really makes a product or website sparkle — it adds some magic and gets our heads whirling with new possibilities. You’d be forgiven for thinking then, that animation is just part of the “make it pretty” process. In our opinion (and hopefully yours too shortly) this couldn’t be further from the truth. Animation has some significant and tangible benefits for improving the user experience of websites and apps too…

We like to move it, move it

Let’s throwback to the stone age for a moment (bear with me) — you’re a hunter-gatherer, moving through the undergrowth when suddenly out of nowhere you spot a flash of movement — the chances are that’s either your dinner or you are the dinner. Reacting to that movement is quite literally a matter of life and death and as a result that’s had a pretty big impact on our biological makeup. We’ve been hard-wired to respond to movement from the beginning. Today’s wilderness is a little different, but when we turn our attentions to the world wild web movement still draws our attention more than anything. The stats back this up, movement and visuals are consistently attracting higher levels of engagement amongst browsers.

Visuals are really important here too — if you’re working in UX then you’ll definitely appreciate the following scenario: you’re trialling a new prototype or product and the user has got stuck. The instructions on how to get around the problem are right there. Like, RIGHT THERE… “read them, go on, read them” you think. But they don’t. They never do… users will do almost anything that isn’t read, and why should they — reading takes effort and instructions are a prime example of lazy product design. Instead, they generally fumble through hitting buttons in a game of trial and error until the result they want is achieved (or more likely they get frustrated and disappear back into the wilderness never to be seen again).

As designers our challenge to create digital products and websites which overcome these problems — to create interfaces so easy to use they don’t require people to read anything to understand and use. And that’s hard, really hard. But we’ve got a trick. And that trick is… drum roll animation. Used the right way website animation and visuals can remove friction, increase momentum and improve UX in your product designs.

Animation, movement and UI design give us a fantastic opportunity to communicate with the user in a visual language that results in a smoother user experience.

Three ways web app and website animation can improve your UX design

So, how can we go about using animation to improve the user experience you ask? Well, we’ve got three ways (and three shiny home made examples) that you can use to improve your website with animation:

1. Provides the user with visual feedback

Animation allows us to give feedback to the user without them needing to read anything, significantly reducing the effort required to use your product. When done right, it helps the user get the feedback they need almost instinctively.

In this example, we’ve been looking at how a simple proximity JavaScript library could be used to predictively show the user which fields are mandatory before they even hit the submit button. This prevents the frustrating and jarring experience of hitting the submit button only to find some required fields are still missing.

It might not seem like much, but removing these small pieces of hardship from a product design (when done well across the entire system) grows into something much greater than the sum of its parts — producing delight, simplicity and ease of use.

2. It focusses the attention

There are so many things going on in apps and websites these days that it is far to easy for users to become overwhelmed and confused. With so much to take in, it’s easy to give users information overload that results in higher numbers of dropoffs and fewer conversions. Even if the user can make sense of it all, that extra additional cognitive load (or effort to you and me) puts a bad taste in the mouth, it sours the experience. We can and should do better… animation is one of the ways we can overcome this.

Website animation and visuals allow us to convey affordances (clues as to how something works) without explanation. It also allows us to contextually focus the user on what’s important, so they only have to deal with one concept or decision at a time. This helps to reduce the burden of thinking their way through a product or making a sign-up process feel like a long linear process of tasks.

For this example, we’ve reimagined a voice search function for a generic mobile app. When the user presses the button to start recording voice, the UI disappears into the background and the focus is immediately brought into one single action — bringing clarity, simplicity and focus to the experience:

Equally if you look at something like Uber, a crucial moment in any user journey is the payment. Using a simple animation Apple Pay fades everything into the background and focusses the user on the immediate task without distraction. The double click instruction is then nicely mimicked by a bouncing button further up the screen which grabs attention and hints the user towards the next steps. Sure, there’s some supporting text, but you’ll only need this once — after that the movement will be all you’ll need to complete the action next time around.

How Apple Pay integrates into apps to smooth out the checkout process with simple animation.

How Apple Pay integrates into apps to smooth out the checkout process with simple web app animation

3. It expresses personality

Animation is also a fantastic opportunity to get creative and express some brand personality in our products. This is an opportunity to transform the tedious into the mesmerising and allow us to celebrate important moments in the user journey. Mailchimp are fantastic at this, a large portion of their success can be traced back to their fantastic use of language, design and illustration across the user journey. Sending big newsletters out is quite a nerve-racking experience, but their brand is always on hand to reassure.

Mailchimps great use of website animation
Some illustrations that celebrate the user journey for MailChimp users

In our example, we looked at the usually oh so boring process of logging into an account and used animation to bring some bear based branding to the fun. We’ll let the demo do the talking, but we think this is a fantastic example of how you can use website animation to inject some fun, brand and memorability to the UX process:

Sign up for exclusive resources and events

We'll send the latest news, events and resources straight to your inbox.

Sign up