Member Article

How animation can really bring your website to life.

All successful websites have a number of factors in common. For example, their objectives have been clearly thought out. They also come from a position of having some insight about who the site’s visitors will be, how they can be directed around that site and even how they can be nudged into acting in certain ways.

As an agency, these are the sorts of considerations that Cefar always has before we embark on any project for a client, whether the brief is to create a whole new site from scratch or to implement changes aimed to make it work a great deal harder.

The challenges that we are given are many and varied. But in looking for the solutions there is one element that we always recommend introducing or increasing on any site – animation.

Whether the primary purpose of the site is to generate orders, elicit responses to educate, or any combination of these, the ability of animation to direct attention, provide continuity of experience or give feedback to the user makes it an essential tool in the developer’s armoury.

So, first, let’s take a look at some ways that it can achieve these three.

Directing attention

Yes, of course, you want the user experience and journey to be as intuitive and seamless as possible and a great deal of thought and planning has probably already gone into this. But people don’t always follow the absolutely logical. That’s what makes us people instead of robots. So to keep the visitor on track, and their attention where we want it to be. Then an icon that moves or a section of the page that transforms when the cursor runs over it will draw the eye to it almost immediately.

It’s as if you have an invisible helper in the corner waving at the user and gesturing “look at me, I’m by far the most interesting thing on this page!” – and who could resist that whether it’s a reminder that they have items in their shopping basket or some expanded information that they really need to know?

Continuity of Experience

The many different screen sizes that we use today presents something of an issue for website designers. Most are reluctant to produce two versions of a site with one being a cut-down of the “full size” version. So a solution that often comes into play is a slide-in animation of extra information that animates onto the screen when it is needed. In the site visitor’s mind, this also creates a mental map of the structure of the site, as if these extra pieces of information are almost literally waiting in the wings until they’re needed. Plus, this creates a consistent image of the site whether it’s being viewed on a laptop, tablet or just a mobile screen.

Feedback

Visiting websites is a two-way interaction. That means it’s important for the visitor to be reassured that the site is being responsive – and also to be prompted when they’ve done something wrong themselves, for example, if they’ve entered the incorrect password.

So animations that show that information is being gathered, whether it’s insurance quotes or details of their previous orders, provide a positive reassurance that the system hasn’t just “frozen”.

In the case of feedback being given about a wrong password being entered, how much friendlier is it for the input box on Apple operating systems to give a quick “shake of the head” than to receive a message in words?

Obviously, all of the above are just a few examples of the almost countless ways in which animations can bring a website to life and make the user experience a slicker and more enjoyable process.

The three golden rules of animation

But that doesn’t mean that animation should be used indiscriminately, and there are also quite a few practical considerations too.

The first is that any animations must have a practical purpose which also enhances the user experience in some way. By simply adding more and more it can quickly become confusing and disorientating.

The second is that they should happen at the right speed and the appropriate one for the screen on which the site is being viewed. Research has shown that typical animations should last between 200 and 500ms, any faster and they appear instantaneous to the human eye, any longer and the viewer’s attention begins to wander. While this may sound overly technical, never fear. You’ll know with your own intuition if an animation is too fast or too slow when you see it in action.

The third rule of animation is one that’s been widely acknowledged ever since Walt Disney first started to weave his magic. This is that, while almost anything is possible with animation, it should follow the motion laws of the physical world. For example, cars don’t simply go from 60mph to 0mph in an instant, they slow down gradually. So if an animation slides across the screen and comes to a halt it should also gradually decelerate. Again, this is something that will just look “right” if you see it on screen.

So what’s it going to achieve for me?

At this point, you might well be thinking “Now that’s all very well, but what’s animation really going to do for my site?”

The answer is that it’s going to make it easier for people to use by reducing what’s sometimes called “the cognitive load” on visitors. In layman’s language, this means it can make it more intuitive and action orientated.

But perhaps even more importantly for any brand, it will create a friendlier interaction even if it’s used in a relatively low-key way. If we go back to our example of the Apple “wrong password” shake this is a great example of how a brand with a very distinctive personality and tone of voice are enhancing it in a subtle but very effective way.

This was posted in Bdaily's Members' News section by Cefar .