The two main challenges you face if you’re running an ecommerce store are attracting visitors to your store and then getting them to the check out page and then completing the sale. This second stage is known as ‘the conversion’. Achieving a high visitor rate and high conversion rate is the Holy Grail for ecommerce site owners but as expected it is not easy and requires the application of a range of tactics.

In this blog we’re going to take a look at how animation can help to boost conversions and explore why if used properly it can be an effective sales tool that can be used on any ecommerce site.

The Background

Humans are capable of processing the message carried in an image many thousands of times faster than that of a written word. We are inherently visual creatures.

The power of imagery as a tool for selling has long been recognised and put to good use for thousands of years. The saying “a picture tells a story of a thousand words” is as relevant in the age of the Internet as ever.

The next step on from a single image is to use a moving image. Video is fantastic for communicating longer messages such as demonstration tutorials but if you’re after an eye catching simple to set up moving image then animation is a solution worth exploring.

The Gif

A Graphics Interchange Format if you go for the full name is a simple form of creating moving images from a collection of still images. It was first invented back in the late 1980s. Starting with a series of still images, using Adobe Photoshop or one of the other equivalent set ups, you can stitch them into one file to create moving images. Each image is referred to as a frame and the end result is an eye catching and most importantly interesting image.

The first example of an ecommerce site using a simple photo based gif is gap.com. On their homepage the ‘Back To School’ section has a photo changing on a rotating pattern. Not difficult to set up and you might think that a major company like this would go for something more sophisticated but it just goes to show that simple is good for everyone.

Small File Size

One of the key strengths of animated gifs are their small file size relative to videos. Being small means they load fast and don’t negatively affect the overall site speed. Site speed is a factor that will affect your page rank and what is more, slow site loading can irritate visitors and in severe cases turn them away.

If you want to add video onto your site and you’re worried about the file size and potential slow down of performance then simply host the video on a secondary platform e.g. YouTube or Vimeo and then embed the link into your page.

Eye Catching

The longer people spend searching through websites for ‘that’ product the more frustrating it gets when time after time they come across uninspiring products and displays that don’t engage. If you then land on a site with bold product displays and an interesting animated section whether it be a sale sign flashing or a call to action button it can lift you out of your stupor and set the wheels in motion towards selecting a product and buying it.

A well designed and executed product display and overall interface is an effective way of putting your customer at ease. They can find what they want and simply enjoy the experience of shopping on your site.

The people behind the presents and gizmos website firebox.com have got a good grasp of how to use animation to liven things up a bit. That flashing pineapple might get a bit too much if you stared at it for too long though!

Colours Changing

A popular form of gif one sees quite a bit at the moment is ecommerce fashion sites. In it the colour of the models’ jacket forinstance changes whilst everything else about them remains unchanged. Another fashion related animated gif that works well is when the model changes position or pose from one frame to the next. Stylish and sexy.

Hand Drawn

Animated gifs can take inspiration from the very early days of hand drawn animation and even take the form of hand drawn or computer illustrations. Animals, aliens, humans. Whatever it is you want to create you can compose a few frames, stitch them together, upload them and you’re off.

Things To Remember

For all their plus points, there are things to remember when it comes to using gifs as like all web design tools they have to be applied carefully and only in the correct circumstances.

Less is more – When it comes to the use of animation you don’t want to leave you’re visitors eyes hurting and have them rushing to either leave the site post sale or abandon the cart midway. Subtle is better than ‘in your face’ as ultimately you’re trying to subliminally encourage them to look at a particular product or click on a button. The best animation blends seamlessly into the background.

Retro fitting – Ideally any animation will be included during the initial design phase so that its place and purpose fit exactly with the overall layout of the page. If you are adding animated features to a page that’s live then ensure that it doesn’t clash with other features or the overall working of the page.

Low quality – Adding low quality photos or images does nothing for a brands image or the user experience and nor does the use of tacky animation. Go for one high quality animated gif not a few crumby ones.

Appropriate – The type of animation you use must be product or site appropriate. If you run a perfume store website then animated dinosaur marching across the top of your page towing a sign saying ‘Check your basket’ is unlikely to work. However, if the dinosaur was on a website for children selling dinosaur related toys then it would be perfect.

Animate Away

Improve your user experience. Make things easier to find on the page. Direct your customers towards offers and bargains. Lead them through the steps towards the check out. Make your website more interesting, engaging and yet stop short of doing to much.

Experiment with adding animation on certain pages and see if it improves conversions. See what other sites are using and whether you can ‘borrow’ their ideas or even better, improve on them.

Be bold. Animation can make all the difference and remember that most important of points from earlier on in the blog. Humans are visual creatures. Imagery is good. Moving imagery even better.

Get In Touch

Want to talk about ecommerce sites? Teapot are the right place to come if you’re after an ecommerce site that turns heads the right way. Get in touch with our team and if you like arrange to pop in for a chat with our design team. We make a mean cup of tea.

  • SBA 2016 Winner
  • chamber