Animation For Web

Animation in web design and websites can serve different purposes on a site depending on how they’re used and what message you want to send. As well as looking aesthetically pleasing there is more to web animations than meets the eye.

Here are some reasons that might convince you to consider animations on your next site:

Draw the user’s eye

Say if your site is e-commerce and you want to attract the user to a particular area of your site such as a product or a special offer, subtly animating something can attract attention without having to break the colour scheme or design. We all know why bread, milk and eggs are located in a back corner of the supermarket, right? If not, Google it – supermarket psychology, yes that’s a thing. Sometimes you need to steer somebody in the direction you want them to go in a shop, and it’s no different online.

Communication

You want to communicate to your users that they have entered the wrong log in details without having to spell it out for them. A simple shake or colour fade can can make an error message become less harsh.

Make your website memorable

A memorable site encourages returning users. Unique features can help a site stay at the forefront of someone’s mind. If an animation starts when the user has interacted with it, it can cause an emotional response in the user and even captivate them for a couple of seconds longer than if the element had no animation at all.

Hold The User’s Attention

Sometimes you can’t avoid a long loading time. If it’s justifiable, it’s worth changing up the loading icon and giving it a bit of personality just to clarify with the user that the loading is intentional and not that the site has broken. Ian Tate, a former intern at Viget, created an experiment, testing how long users were willing to wait for something to load with different loading animations. As expected the results showed that the branded and more creative loaders had longer waiting times than the generic spinning pin wheel or loading bar. What was unexpected however, was just how long users were waiting for the better designed loaders. Read more about it here.

A Quest Paris is a site documenting seven people’s experience at the Awwwards Conference in Paris 2014. The content mainly consists of Instagram posts from the various people in the group, but it does have an initial loader. This is a great example of how it can be made a bit more exciting that a standard loader with no styling or personality. See it in action here.

lovedays-loader

Large brands are also becoming more aware of how important animation is. For example Google have extensively detailed out what their guidelines are for animation  in their Material Design specifications. This shows that moving forwards, animations should be much more carefully considered and shouldn’t be an afterthought as a lot can be said with them.google-calendar-animation-example

Creating a really strong site is often a team effort and the way animations are approached should be too. Animations can create personality so the feel of the site needs to be established to know how something should move. CSS animations generally work in most browsers with the help of some vendor prefixing.

From a Designer’s point of View

Everything in moderation: Don’t fall into the trap of getting carried away and animating everything possible. The key is to be subtle enough for the user to appreciate it, but not to be distracting or annoying. It’s all about balance.

Sickness and dizziness: Animations have been known to cause sickness in people with visually triggered vestibular disorders, which is actually more common than you would think. The three main culprits to look out for are:

Relative size and movement: Disorienting users when an object is very large in relation to the screen and moves.

Mismatched directions and speed: For example parallax, which unfortunately is a very common trend. Use responsibly and consider audience.

Distance covered: animations covering a large perceived distance can be triggering.

Val Head, a designer and web animation consultant writes for A List Apart on how to use web animations safely and responsibly

From a developer’s point of view

Will the content be changeable in CMS?: If the site has a content management system behind it and the particular element that is being animated needs to be editable this needs to be considered when making the animation. For example a button that animates each character in a word individually on hover can’t be made into a custom metabox in the usual way as the letters would be in separate spans.

Will they function across all browsers? If vendor prefixing your code isn’t enough, solutions can be found online. Sometimes, depending on the browser and what you’re telling the element to do, if it won’t work, it will remain static and not animate at all. However, testing is absolutely vital, as some browsers will still attempt to animate, resulting in your animation doing half of it and breaking. Not good!

When a lot of thought is behind animations they can be really effective and offer another feature to your site that users will appreciate. Keep an eye on our portfolio as there have been some exciting projects underway at 1minus1 one, with lots of awesome CSS3 Animations!

Jonathan Hill