Animation can enhance an online experience, 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 what target market are you trying to attract by having 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.
Animation…just because you can
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.
Animation as a tool
That’s not to say that animation can’t be useful. Movement catches the eye, and because of that, animation can be a powerful tool. If used correctly website animation can help increase customer interaction and sales.
Imagine 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 sales is the objective, then animation should be used to showcase the main bit of information that is most likely to create a sale, for example a highlighted product. If getting subscribers is the goal, website animation could be used to draw attention to a call to action for subscriptions.
When to Use Animation
Two instances where it is a good idea to use animation:
1) Informational Slideshow
Slideshows are great. They cater for that couch potato mentality that so many people have, but in most cases it’s not enough just to have pretty pictures. I say ‘most cases’ because obviously if you’re a photographer, for example, then pretty pictures IS your product. For other businesses, you’re going to want to have some text included and possibly have those slides link through to various areas of your site. Here’s a few examples:
- If you’re an Internet Service Provider, you could have a few slides showcasing your packages. A slide for ADSL packages, a slide for Fiber packages, and a slide for cloud computing. So each slide acts as an introduction to one of your products and links through to the relevant page on your site.
- If you’re an Insurance company, you could use those slides to feature testimonials of happy clients. In this case, you’re using slides to create a sense of security, which at the end of the day is what you’re selling.
- If you’re a news agency or magazine, you could have a slider block with the top highlighted stories. In this case, you’re trying to hook more readers by showcasing the stories they’re most likely to want to read.
- You can also use slides for announcements. Lets say you’re exhibiting at an expo, one of your slides could be letting your customers know which stand you’re going to be at. Slides are also great for showcasing promotions, specials and competitions you may have running.
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. Studies show that the click through rate for static call to actions are much lower than animated call to actions. Here’s a few examples of how animating a call to action can work for you:
- If your aim is to gain subscribers, your subscribe button could gently pulse in a way that draws the eye without behaving like a child that’s eaten too much sugar.
- If your aim is to sell more of a particular product, you could showcase that product by having a block on your homepage with the product rotating for a 360° view.
- If your aim is have customers request a quote, you could have a mini quote form with a subtly animated background. Again the effect should be subtle because harsh movement on a site is more like an incitement to violence than a gentle ‘look at me’.
There are a few ways to achieve 2D animation…
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.
[ 2016 Edit: Even Chrome (currently the most popular web browser) has begun to phase out flash support. ]
- NivoSlider is a JQuery plugin that allows the designer to make versatile and attractive image slideshows.
- ScrollReveal is a JQuery plugin that allows you to control how elements come into focus on a website as the user scrolls. Practise restraint with this.
- Motio is a JQuery plugin for panning backgrounds. If you go really subtle on this, it could be great to use as a background to a form you want to draw attention to.
- Turn.Js is a JQuery plugin to create a page flip effect on your website. Refrain from using this ‘just because you can’. In the right setting it could make sense.
- JBlitter is a sprite-based JQuery plugin for animations. I’ve seen this used to create a beautifully animated button once.
- JQuery-Countdown is, you guessed it, a JQuery plugin to create a countdown mechanism on your website.
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. This 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.
Here an example of a simple, yet affective use of a gif file. Note it is the background image only that is animated, so the anchor text is still readable by web scrawlers…Check Availability Book your island holiday now
Cascading stylesheets have come along way since their inception. One can now create simple animation through pure CSS. Most of the effects you see on modern websites where you scroll down and things start popping into view or bouncing into place are made with CSS3 animation or Jquery. At this point there is a tendency with designers towards wanting to animate every element on the website using this method. These are a lot like flash mobs: fun but largely pointless. I suspect with time, many designers will mature and use this with more restraint – just like what happened with gifs.
You can also create the impression of a more intricate animation by placing the animation behind a cutout png. See this example I did for an Interior design firm. The actual animation is literally just an orange div that expands and moves from the left to the right. Using Z-index, I overlaid the cutout png version of the logo on top of the animation so that it looks like the logo is being filled. This type of animation could be used as a fancy preloader.
- Learn basic CSS3 Animation from w3schools.com
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