Back to journal
4 Reasons Why Motion Design is Crucial for User Experience

4 Reasons Why Motion Design is Crucial for User Experience

Hayden O'Neill


Animation is a crucial tool for web development. As with any tool for any craft, its importance is in how and when you use it. Since there are many techniques available across several key animation principles, it can take a lot of time to understand these as well as execute appropriately for your web project. This could be the difference between cramming in lots of animation to change how content appears on a web page because it looks cool or thinking carefully about each user interaction and exploring how animation can benefit their experience.

With that in mind, we'll be taking a focused look at five ways in which motion design is crucial for user experience.

#1 Perception

How we use web animation can determine how effective it is for the user. This would usually take a lot of research into who the users are, their behaviours and their goals when using the site. When navigating a website, being able to recognise how the content relates to each other can make it much easier for a user to complete their goal. Interactions between screens can show the user where they are going relative to where they were on a website. Similarly, groups of content being displayed can animate in the same way to show they are related, but with a small delay in between each element to show how that content is divided. This becomes especially important for users now that websites are viewed on all kinds of devices, often on smaller screens. Since content may be broken down into smaller chunks layered on top of each other to fit smaller dimensions, having this be easier to digest whilst still maintaining the ability to navigate through all the available content is needed for a consistent user experience. Think navigation menus sliding in from the side of the screen then exiting in the same or how a shopping cart might pop up from the bottom of the screen to show current items in your basket. This can be extended further by having selected items animate down into the basket after tapping “add to cart” to represent the way we literally drop items into our baskets when shopping in a real store.

Going the extra mile with animations such as these can transform a standard website into an intuitive experience for the user. By having consistent interface animations that follow tested guidelines, not only are they able to learn the functionality of the site easier, it can also make it feel more familiar and be more accessible to users.

#2 Feedback

Ideally, any user would be able to navigate their way through any website without encountering any errors or performing any invalid actions. Whilst we can do our part to pre-empt user mistakes and direct them towards their goal, we cannot take control away from the user and do it for them. This is where feedback becomes our next important principle.

Giving feedback based on user inputs can be very easy to implement but often hard to execute correctly. For example, alert boxes are a standard browser feature and therefore a common way to give basic feedback to the user. However, arguments against alert boxes question how effective they really are. The popup nature of alert boxes can be disruptive for the user, interrupting their flow and they can be easily dismissed before being properly read, resulting in a critical action that the user hasn't understood, which may result in confusion more than clarification.

So how do we bring animation into an effective solution for user feedback? A short but noticeable animation can communicate where an invalid action has been performed quickly after it's happened. For example, when a user is filling out input fields in a form, an invalid email may be detected on submission. To clearly show the email field has produced the error, it can be animated alongside the error message indicating the problem so the user can quickly correct the email input. If the user is filling out multiple fields at once before they are able to submit, highlighting a detected error earlier, before they tap submit, would be a better solution as it may prevent similar errors in other input fields or having to re-enter information into all fields after an error in the first field. The role of animation here should provide much clearer visual feedback on the elements the user is interacting with, so they can see where something hasn't worked and why this is the case.

#3 Assistance & Direction

Although these can be broken down into two separate principles, in the context of web animation they will overlap in a lot of cases. When identifying a user's specific goal, animation can be used to assist them in completing it. Animation can be used to simplify a website's content, break things down and make it more appealing for the user.

In cases where a user will have multiple options available to them, these may be broken down into contextual options that are revealed as the user begins to interact with an element. This can also be a great way of allowing the user to preview the results of their actions before they complete them. For example, in a drag and drop interface, dragging one box into a new section may quickly animate a preview of how the content is rearranged to fit the new box. Similarly, if it's dragged over an existing box, contextual options may appear showing additional functions. These could include replacing the box or swapping the two boxes with animations to show each of these would look before being carried out by the user so they can see exactly what they want.

Sometimes, having the ability to direct the users attention and make something obvious is more ideal for the intended outcome. This will depend on what is a key option the user might not be aware of as well as where the user's attention is currently focused. If a user is filling in a lot of information with the option to save their progress but they haven't done so yet, an animation directing their attention to a save option will benefit their experience since it's in their interest to keep their work should they disconnect or accidentally exit the page. Even more directly are calls to actions. These would usually be designed near the top of the visual hierarchy anyway, especially if associated with purchasing products, but animations can certainly bring more attention to them.

#4 Message

Many websites find interesting ways of presenting information that a user can engage with directly as a way of enhancing the message they are trying to get across. These can be very scalable too in terms of size, with animation representing the message of a small section or the whole website. For example, a website with the aim to inform users about climate change could very literally animate a variety or weather effects as the user scrolls or navigates between sections. Not just as transitional animations, but animations the user can interact with and control through scroll or mouse inputs that are directly attached to the narrative being built.

Interactivity should be the main focus here. Narrative based animation leaves designers open to a lot of creative opportunities but the same principles for user experience still remain. The animations must serve the user's experience and their objectives, rather than leaving either as an afterthought.

There's a reason that great storytelling in movies adopts a “show, don't tell” approach and websites with great animation are a perfect way to combine the two.

Let's wrap things up…

There are many different things to consider when implementing some animation into your website. It's probably not a good idea to try and include everything onto one page. Instead, keep it deliberate and focused. Always ask yourself “how does this benefit the user?” because the animation should always serve the user experience.

Fancy an initial no-strings chat?

Book a free insight call

Give us a ring

Excellent customer service

Excellent customer service, the team is always on hand to assist when any situation arises. Friendly, helpful and always go above and beyond

Rob Woodwark

Marketing Manager - TAWG

One of the best dev and design teams we've worked with

The Motion12 team are far and away one of the best Dev and design teams I've worked with. From start to finish of our website project, the team offered professional and creative advice and really helped bring our ideas to life. Response tim...

Seeta Wrightson

Director of Digital Expansion - Gold 79

A fantastic team …

Sam and his team have been looking after my websites since 2017 and they have been an absolutely amazing! Kate has recently designed a new website for our not for profit and did all the branding as well and we could not be happier! A 360 de...

Dani Binnington

Founder - Menapause & Cancer

We've had and continue to have a brilliant experience with all at Motion 12

We work with Motion 12 both on a long term basis and on shorter term projects - most recently an entire website refresh. I have found the whole team to be extremely friendly, knowledgable and reliable when it comes to all of the work we do ...

Nikki Bearman

Marketing Director - Supplant

Training at Work Group have worked with…

Training at Work Group have worked with Motion 12 for the past couple of years however I started working directly with them in October last year. I have found the whole team to be reliable, organised as well as extremely knowledgeable and a...

Katie Gould

IT Manager - TAWG

Travel Chat

I came to Motion 12 as I was looking for a redesign of a card game I’ve made. After a couple of initial meetings, it was clear we were on the same page and Kate quickly came up with an idea that I loved. Fast forward to print and it looks e...

Jack Law

Founder - Travel Chat

Supplant site design

Here at The Supplant Company we partnered with Motion12 to create and deliver our new site. As well as the great work on the site design the real upside is the team at M12 feel like genuine partners looking to put the work in to optimise an...

Joe Spence

Head of Brand - Supplant

These guys are awesome!

I’m compelled to write this review but I urge you to stop reading and pick up the phone! Motion 12 are, without a doubt, the best agency we have worked with. Technically brilliant, Sam and the team deliver quality work on time, every time. ...

Faye Allyn

Managing Director - Smithkin Baker

Organised, friendly , creative , professional.

Motion 12 have previously worked with my brothers business and I was extremely impressed with there logo design and wanted no one else to do it. Motion 12 created me a really cool brand package something very bespoke and tailored to my need...

Tobias Gill

Founder - xJet

Manta Hair Ltd has worked with Motion12…

Manta Hair Ltd has worked with Motion12 since we launched and their support and expertise are exceptional. Furthermore they are really nice people to work with as well as being brilliant at what they do.

Tim Binnington

Founder - Manta Hair

Motion12 and his team are exceptional

Motion12 are exceptional. I came to Motion12 to develop Paws & Presto’s website, brand guidelines and design the brands mascot Digby. The work they have delivered is incredible. Kate (creative lead) has created an amazing cartoon version...

Tom Bennett

Founder - Paws & Presto

Over the moon

The team at Motion12 have provided the most excellent service, no problem was too small or benign for them to help me with at the drop of a hat. Really over the moon with them - I had a big online launch of new artwork so there was a lot ri...

Tori Velvet Rose

Artist - Tori Ratcliffe Art

Outstanding service

The guys at Motion-12 are brilliant. Many developers we’ve used previously have been unable to handle our requirements, as we require changes implementing within 24 hours. Sam and the team are an amazing partner to our businesses and I’d ab...

Gareth C

Account Director - Refinery Group

Always my 'go to' digital agency!

I've had the pleasure of working with Sam and the team at Motion12 on past and current projects, most recently the development of the Supplant website. Their knowledge and advice on current platforms is second to none, deadlines have consis...

Jonny Whiteoak

Creative Director - Supplant

Professionalism at its finest!

Delighted to be working with Motion 12 for all our web development requirements. Technical excellence married with first class service - a brilliant working relationship all round.

Richard Higham

Managing Director - Cleveland Scott