Let’s go back in time to the late 1990s. Geri Halliwell had just left The Spice Girls, Titanic had broken box office records and webpages were littered with luminous, low-resolution and repetitive animated gifs. The sheer joy of making things flash, bounce, wave, float and sprinkle fairy dust all over the content proved too enticing for early web designers and developers. Luckily, as the internet matured these abominations surfed back into the web safe darkness never to be seen again. Fast forward to now and there seems to be a growing trend in the use of animations within emails, turned up to 11.
So why has this started happening again?
One reason could be that today’s generation of designers haven’t endured the annoyance of trying to read from a screen whilst moving graphics distract you. Another reason could be the increased compatibility of modern devices, almost all of which support animations on mobile email clients. Finally, increased data speeds have seen greater use of animations due to reduced waiting times for gifs to load.
Whatever the reason, the fact that you can now animate almost any item in an email, be it with gifs or CSS animation, means that you need to keep a close check on what you add movement to as it may be too much. And no one wants to go back to the late 1990s.
What can you animate?
The question ‘How much animation is too much?’ is a difficult one to answer. Instead, consider the options available. What you create depends on the subject matter and what assets you have at your fingertips.
There is, however, a need to consider the potential for animation to cause motion sickness, dizziness, nausea and other symptoms. While most significant for people with vestibular disorders, excessive animation can affect anyone, so bear in mind whether it is necessary for you message.
To avoid distracting, confusing or annoying your audience, consider whether the area to be animated is part of the decorative, background content of the message or part of the call to action and core message content. Each of these need to be handled in different ways and animating both at the same time would definitely be too much.
If an animation is used either side of a headline, consider how close it appears to the text and remember that if the animation is too busy, it can become a distraction.
Using animation around a static call-to-action button can grab the viewer’s attention. However, if the animation is non-stop or the movement too overpowering, the call -to-action can be overlooked. Consider how you can use subtle animation to produce a stress-free transition around the call -to-action, drawing the viewer’s attention, rather than dragging their eyes to the periphery.
Animating a call-to-action itself can draw viewers to the text or button but the overuse of movement could put them off clicking on it. For example, a subtle change in the size of a button would grab the audience’s attention but a constantly swinging button could hinder their ability to actually click it. A/B testing could be a possible route to seeing how effective it is.
Enhance your message
Good animations can save space in a message, such as image carousels rotating between several photos. Animations can save the viewer time, such as showing instructions on how something is done. They can make the driest of subject matters come to life. More importantly, they can help promote and sell your product.
But, when overused, they can turn the viewer off after the first few seconds of opening our message and that’s the last thing anyone wants.
First published in net magazine, July 2019.