When to Include Animated Graphics In Your Website

Animations – they’re fun, they’re catchy, and when utilized properly in a website they’re an effective marketing strategy. It can be tempting to add animations all over your website, but let us caution about that real quick. There’s a lot more going on behind the scenes with animation than you might think, and we’re breaking them down in today’s article.

Let’s get to it!

WHAT IS ANIMATION?

Animation covers a lot of ground – from television and feature films, to advertising, to your rudimentary flip book, there’s a lot of examples to point to when you say “animation”.

However, where digital marketing is concerned, and particularly with web design, an animation is a timed moving element that is either triggered or prompted by the user (fancy popup menus, for example), or is a part of a website’s presentation (like the loading bar graphics on a page). This includes color changes on a page when you hover over a picture or text selection, or buttons spinning when you click them.

DURATION

What’s the ideal length of a web animation? The answer depends on what you intend for it.

Short animations are, by rule of thumb, the most effective. People who visit websites that aren’t for media streaming aren’t looking to be entertained by a full-length animated feature, no matter how well it’s been done.

Animated buttons that shake for 0.01 seconds? That’s cute, and users will find that interesting. Animated loading screens that take over 10 seconds to finish? The best way to lose the interest of your website visitors, guaranteed.

If your website requires a complicated animation, it’s strongly advised that you keep it under 10 seconds – and that you keep the elements as simple as possible. This is to accommodate the variation in people’s visual reaction time. Some people react to visual stimuli much faster than others, while some have slower response times. 10 seconds or shorter is ideal because it’s enough time to convey your message while still being brief enough to maintain the interest of people with fast response times.

LOADING ANIMATIONS

Loading animations are used to fill in the “space” between transitioning from one page to another, and are becoming more and more common across the world wide web – they’re just so cool, you know? 

There’s a bit of psychology involved in utilizing loading animations, too. Everyone wants a fast-loading website, this is a given. However, a web page that loads too fast can disorient users, especially if they’re transitioning from an info-packed web page to another.

Loading animations, then, are a smart way of “slowing” or buffering the user’s perception – it’s brief intermission that signals to the user that a transition is ongoing. This serves a double purpose of ramping up interest and giving the user time to absorb the previous page’s information.

Of course, the point about animation duration still apply – too long and the animation will be annoying, but too quick and you’ll have just further confused the user.

TRANSITIONS

The term “transition” is borrowed from film making, and in web animation this refers to the method of moving from one page or element to another. A common example of a transition in web animation is when a web page’s elements fade out and new elements fade in, such as catalogue photos on a shopping website 

Transitions are important because doing them well can spell the difference between your website giving your user being happy or frustrated with your website. A good transition doesn’t have to surprise your user all the time – in some cases, a transition behaving exactly as the user expects it to behave can be the best direction it could go.

This has to do with user perceptions, or what is called perceived performance. These expectations follow the rules of perceived physics – if you have a bouncing ball in your animation, viewers will expect it to move across the screen the way a real ball would move in the real world. Animations that are analogs of physical objects are expected to behave similarly.

As for shapes: if a user clicks on an animated element, the flow of the animation should move naturally. If an element on the website needs to be dragged across the screen, users expect the element to move in the direction that the cursor is moving towards; going the opposite way will be jarring, and will confuse your user. (Having trouble imagining this? Our point exactly.)

IN SUMMARY

Animations on websites are everywhere, and it’s tempting to use it for everything. However, they should be used with consideration to the user, as even the most technically created website can fail to grasp a user’s attention if it distracts, confuses, or frustrates them. Smart web animations are brief, curated, and suitable to the message that the website conveys.

Consider these points for your next website, and have fun animating!