In this post I’ll look at how online retailers can use animation effects and other moving elements on their website to improve user experience, display products and features more effectively, catch users attention, or simply make the site more visually appealing.
Moving elements can help to draw people’s attention to certain elements, provide fast visual feedback to users, or help users to navigate sites or complete forms.
These moving elements can include GIFs, CSS animations, mouse over effects, scrolling pages and more. It could include video, like the backgrounds used on the Hermes homepage, which reflect the brand’s image and help to showcase products.
Many moving elements are much more subtle, like the mouse over effects used by DryBar (hover over the top navigation options to see).
Some movement has more purpose, such as helping to demonstrate products. Here, Simply Chocolate has a great parallax scrolling effect which unwraps the chocolate bars as the user scrolls down the page. It looks great, but also helps to conveys key product information such as what the bar looks like and the ingredients.
Movement on websites can also be used to give feedback on actions a user has taken. For example, the effect on Le Cafe Noir when you add an item to your shopping cart confirms the user’s action in a fun way.
Some animations may look complex, and for some effects a certain amount of skill is required, but many can be relatively simple to create.
There are also plenty of tools to help create and add animation effects to sites, which appeal to a variety of budgets and skill levels. This handy list from Practical Ecommerce summarises 15 animation tools, which range from free to $695 per month, though the majority are $50 or less.
Why use animation effects on your website?
Beyond simply catching the eye and reinforcing branding with video effects such as those used by Hermes, a big part of using animation is about helping users to interact with your site.
Moving elements can provide instant and very useful visual feedback for shoppers, confirming that they have completed a step successfully, or highlighting the next step to take in a process.
This visual feedback can also be useful to inform users of errors they may have made, as in the example below from Stripe Checkout. Animation in this case provides fast and easy feedback.
They can also help to showcase your products and their features more effectively, perhaps by showing them in motion, or showing all of the variants of a product as users hover over images.
A word of caution though: using animation effects, videos and GIFs and other moving elements should be done with the user in mind. Heavy GIFs can reduce loading speed and frustrate users so it’s important to bear this in mind when adding them to your site.
The speed of animations should also be considered. Animations can be so quick that users don’t have time to take in the information (they can also be very annoying). Research suggests that the optimal speed is between 200 and 500 milliseconds. UX Collective has an excellent guide to speed, motion and other factors to think about when using animations.
More generally, when adding moving elements, the user experience must be considered. Subtle effects and product focused moving elements like those listed here can enhance the look and feel of a website and improve the user experience.
However, it’s important not to overdo it. As well as the risk to loading speed, it can just become really annoying and distracting for users.
In the same way that some news websites insist on serving overlay ads, background and auto playing videos, too much movement on an e-commerce site can distract and deter your potential customers.
How retailers can use animation effects and moving elements
Let’s look at some of the use cases for moving elements on e-commerce sites, and how they can improve the on-site experience for users.
1. Helping with form errors
Animations can be especially valuable when helping users to navigate through a process. Checkout abandonment can be an issue for e-commerce, with around 76% of shoppers adding items to baskets but failing to complete checkout.
Anything that can help to guide users through checkout forms with the minimum of friction can improve conversion rates, and animation effects can play a part here, by providing fast visual feedback.
In this example from Stripe checkout, the form is basically shaking its head at the user as they have made an error when entering payment details. If you were to try and click on the pay button the form will shake from side to side.
This has the effect of conveying to the user that they’ve made a mistake that needs to be corrected, but it’s also a fun way which should minimise annoyance.
This information is also conveyed at the exact point where the user is making the error, so they can see what needs to be done to correct it.
In another example from Stripe Checkout (there are more excellent examples here) the animation shows the transition between different checkout steps, through to confirmation of payment. The bottom banner slides through the process, turning green when the user has completed payment.
3. Improving product previews
Animation and hover effects can help customers to quickly view products on site search results or product category pages.
Hover effects can be very useful, as they reduce the effort required for users to view product features, and can help speed up conversions by making the process of product selection more streamlined.
This could mean showing alternative views of products to help people choose from a large selection of items when they’re scanning product lists, as M&S does here.
The same effect can also be used to show variants of a product, such as colour or material options, as Nixon watches uses in the example below.
The benefit is that customers can view options quickly and without much effort, which helps them to decide more quickly.
4. Loading animations
Slow loading pages are something to avoid in general, but there are some instances when it does take some time. One such example is aggregating results from a range of sources, which can take a few seconds or more.
The use of animation here to show progress can keep customers interested while they wait, and also reassures them that the site is working.
Here, Skyscanner has a green line showing loading progress, while the number of providers checked is constantly updating. It also begins to serve up some of the results and price data so people can begin to check out the results.
5. Demonstrating product features
A quick animation effect can sometimes convey a product more quickly and effectively than text product descriptions are able to.
For example, the unique selling point of Bellroy’s wallets is that they are slimmer than others, yet can still hold all you need.
The animated slider shows how their wallets compare to others as you add more cards to it. It’s a simple and effective way to demonstrate the product.
6. Marketing emails
It can be hard to get your emails noticed in crowded inboxes, and animation effects and GIFs can help to catch the recipient’s eye and drive more click throughs.
They’re relatively easy to create, and don’t have to be expensive – there are plenty of free GIF makers available online for example.
One thing to keep in mind is that GIFs can make emails heavier and can lead to slow loading times in some email clients, especially when viewed on mobile.
For this reason, it’s best to keep the size of GIFs well under 1 MB, and ideally less than 0.5 MB.
7. Add to cart confirmations
Simple effects like this provide quick visual feedback to users, showing that they have successfully added an item to their cart. It also has the effect of highlighting the ‘order now’ button so they can continue into the checkout process.
8. Scrolling effects
Parallax scrolling is a technique where background images move past the camera more slowly than foreground images. This provides an animation effect as users scroll down a page.
When done well, as in this example from Alfred (a cleaning service in Toronto) it looks amazing, and can really grab the user’s attention.
It can also have a more practical use, as in this example from Simply Chocolate. The company sells a range of all-natural chocolate bars, and the scrolling effect helps to emphasise this. It demonstrates what the bars look like, and the natural ingredients which go into them.
Animations and other moving elements can enhance the experience on your site for users, and help to convey your brand and products more effectively.
They can be relatively simple (like alternate product view hover effects) or complex. Some of the effects here will require some skill and /or budget, but many can be achieved relatively cheaply.
The key is to use animation in ways that improve the user journey by helping them navigate through forms or other processes, or in ways that help to showcase your products and features more effectively.
Useful links and resources
If you want to get started using animation on your site, here’s some useful blogs to help you:
- UX Collective. A very useful guide to using animation for UX, and making animations usable.
- Practical Ecommerce. A run through of some of the available tools for producing animation.
- Michaël Villar looks at how animation is used to improve the payment process at Stripe.
- Litmus has a handy guide to creating and using GIFs in email marketing.
- Practical Ecommerce has a list of GIF creation tools.
- Pixelz takes you through the process of creating GIFs from product images.