Enhancing the User Experience with Animation

As a company, we look to produce web products that not only perform well, but look good too. Our developers take the bespoke designs that our design team produce, and translate them into code that appears in your browser window whenever you visit one of our sites. 

Now, while you can produce a great representation of a design that looks good in the browser, there is a way to bring that design to life and that is through the use of animations.

Granted, there are many ways you can go over the top with animation and make a site inaccessible and ultimately unusable in the pursuit of something that looks cool, but when used correctly, animation can be the cherry on top that really makes your website stand out.

Why bother?

A sensible question, you can certainly have a successful website without any animation at all. However, if you do fancy giving your site that little extra something, though, there’s a few reasons to give animations a go.

From a User Experience (UX) point of view, animation can help you in a couple of major ways:

• Firstly, it can suggest or highlight functionality in your site, giving a little hint as to where a certain component has come from, or how it expects the user to interact with it. 

• In combination with that, it can also provide reassurance to the user, letting them now they’ve done something correctly, or by giving extra meaning to how they are interacting with something on the site.

The Golden Rules

As mentioned previously, it can be very easy to overdo it when it comes to animation, so here are a few golden rules to consider:

• It should serve a purpose: don’t make something fly in and rotate if it doesn’t need to.

• It should accent, not define: the animation should enhance what the component is, or what it does.

• It should not be an afterthought: think of animations as part of the design process. This will make the animations meaningful and, ultimately, more successful.

With all that being said, here are some simple ways you can introduce animation into a project to help the user experience rather than hinder it.

Examples

Loading sequence

One of the biggest turn offs a user can experience when viewing a site is how long it takes to load. Big delays in loading content can give the perception that something isn’t working, even if that’s not the case.

One of the pillars of good User Experience (UX) and User Interface (UI) is providing the user with feedback whenever something has changed or is changing. Including a loading sequence informs the user that data is getting loaded and something is happening behind the scenes. The alternative, a blank screen that is waiting for content, gives the impression that nothing is happening at all, which could lead to users dropping away from your site without getting the information they came for.

Directing a user’s focus

Whenever something moves on the screen, it immediately grabs the user’s attention. As designers and developers we can use this to our advantage. When you notice advertising on a site, for example, in many cases this is likely because there’s been some movement within the advert banner itself that has caught your eye. This movement drew you away from the reason you visited the site in the first place and got you looking at the ad.

We can use this to help the user rather than just annoy them though (thankfully). If you had a form that contained a user’s details, for example, and they made a few changes to their details, you could add a subtle animation to the “save” button to draw the user’s attention, and remind them to save their changes.

Keep a user’s sense of place

One of the more common animations you are likely to see online, is that of the sliding in mobile menu. It’s easy to take for granted what the animation is actually telling you, the user, but it subtly conveys quite a bit of information. 

As the navigation comes in, you brain computes exactly where the navigation “lives” (for lack of a better term) and where it comes from. This reduces any potential confusion on the part of the user as to where this new thing has appeared from, and can also show the user that this menu is always just waiting out of view should they need it.

It’s little touches like this that give the user a better overall picture of how your site works and how it is structured.

To give feedback

Another simple way of using animation to your advantage is by using it to convey feedback to the user. If you imagine a button that submits a form, for example, there’s some subtle changes you can add to tell a greater story about what’s going on when they click the button.

Rather than having the user click the button and then there being a big wait until the page refreshes, you could transition into a “loading” state that indicates that the site is doing something, before giving a visual indication that the process has run successfully before refreshing the page.

You need to keep your users engaged, and little touches like this help keep their attention even during loading and processing.

Conclusion

While it’s certainly possible to go overboard with animations and ruin your website’s accessibility in the process, that does not mean that all animation is bad.

When used correctly, it can give you another string to your UX bow and can actually help your users understand and process your website better, and at the end of the day, that all any web designer and web developer wants.

Looking to improve your website’s UX? As a creative digital agency, JUMP specialises in ensuring your digital presence is built on strong foundations, including thorough research into your audience, rigorous testing and the implementation of best practice UX principles to ensure your digital offering provides a positive experience to your customers.