4 Reasons Why Motion Design is Crucial for User Experience

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.