www.web-design.co.za | anything to do with web design, particularly in South Africa

Website Animation – Just because you can, doesn’t mean you should

Just because we can, doesn’t mean we should. Animation can enhance a website, but it’s important to practise restraint. Ask yourself what the purpose is in making your customers wait while an animation of your rotating logo is loading, and is anyone really going to be impressed by the way the butterflies glide all over the screen? Animations, if not obviously useful, should be tasteful and not detract from the product or service you are promoting.

What we in the web design industry are realising is that animation for animations sake is only really appropriate if you are a motion graphics / digital art type company where your site is expected to have a lot of flash and dazzle. The majority of website visitors find purposeless animation, at best, mildly annoying, and at worst, enough to make them leave and find another site that isn’t going to distract them from their goal or use up their bandwidth unnecessarily.

That’s not to say that animation can’t be useful…because movement catches the eye, animation is a powerful tool that if used correctly can help gain you customers. Imagine everyone sitting in a conservative church and then suddenly someone jumps up and starts doing star jumps – that’s going to attract attention, maybe not the right kind of attention, but you get the point. Why not use that bit of psychology to draw your customer’s eye to the most important thing on the page. If getting customers is the objective, then animation should be used to showcase the main bit of information that is most likely to create a sale

When to Use Animation

Two instances where it is a good idea to use animation:

1) Informational Slideshow

If you have several items (e.g. a few products or services, or promotions and specials) that you want to draw attention to, a slideshow banner with individually designed slides showcasing these items is a great idea. Consider these examples:

  • www.c3ss.co.za – Banner slideshow showcases latest company achievements and where appropriate links through to the relevant page for more information.
  • www.fitnesshe.co.za – Slideshow block highlights top articles and links through to relevant pages

2) Animated Call to Action

Leading the customer’s eye to the action that represents the first step in a sale (like an enquiry link, or a sign up block) is the most effective way to use animation. Consider these examples:

  • www.belomontehotel.com – The maroon rates buttons have a subtle pulse that draws the eye without behaving like a child that’s eaten too much sugar
  • dynamicbeacon.com – Comparison between static and animated call to action buttons. Here the creator also explains the increased conversion rate after utilising the animated button. Again the effect is subtle because harsh movement on a site is more like an incitement to violence than a gentle ‘look at me’.

Animation Methods

There are a few ways to achieve 2D animation…

Adobe Flash

Once a Macromedia product, and then bought by Adobe, Flash was once the answer animators dreamed of. Despite the variety of impressive effects available, over the last couple of years there has been a big move away from using flash on websites because ipads and iphones cannot view flash. Even before Apple stopped flash support for these products, savvy web designers were only using it sparingly because web crawlers (the bots that search engines send to your site) can’t read flash. If web crawlers can’t determine what your site is about or navigate through different pages in your site, your search rank will take a spectacular dive, which obviously isn’t ideal.

JavaScript Animation

Though generally not as slick as flash, JavaScript animation, if done properly, has the advantage of being search engine friendly, so if you want a simple animated slideshow banner but also want to add a few key phrases, this is a solid choice. With the unveiling of the new canvas tag in HTML5, JavaScript animation is gaining popularity. For example, one can now animate a button using sprites and still have search engine readable anchor text.

Gif Animation

A .gif is a picture file that can be animated. The animation is created by designing a series of frames and then playing through those frames. In the late 90’s and early 2000’s, animated gif files were very popular on websites, but back then zero discretion was shown by web designers and resulted in many websites looking like Christmas trees in the middle of the Rio Carnival with elements flashing, pulsing and wobbling all over every page. For this reason, gif animation has a bad reputation, but if used with restraint, can be the perfect tool and because gif files can be used as background images, a call to action can have an animated background and still have legible anchor text for web crawlers.

Subtlety

Just remember, that much like doing star jumps in church…just because we can, doesn’t mean we should. We’ve all seen those epilepsy-inducing green card and vigorously jiggling ‘this is not a joke’ internet banner adverts. You’ve seen them because there wasn’t a way to block them from your peripheral vision. This is how NOT to use animation. When I find myself unlucky enough to land on a site that allows that kind of banner advertising, I move part of my browser off-screen to block the ad so I can carry on reading. I saw it, but I didn’t click on it because the ‘in-your-face’ manner they used to bring it to my attention not only annoyed me, but makes feel like the advertiser is desperate and probably up to no good.

Even a little bit of movement will catch the eye so bring subtlety in to everything you animate. If it is an animated gif, make a gentle pulsing instead of a strobe-light fiasco. Even slideshows can be annoying if the slides whiz by too speedily. A good method of ensuring that you haven’t gone too far, is to start reading the content of the page that contains the animation, and ask yourself if the movement in your peripheral vision is gently drawing you over, or working on your nerves. If the latter, you might want to tone it down.


Article by Roxane Lapa of .COZA Web Design



Top