A look at some of the micro-interactions, effects and animations that some retailers use to improve the user experience and add more appeal to their sites.
Micro animations, animation effects and similar elements can help to improve the user experience, and can draw attention to areas of a page where you’d like visitors to focus.
They can help users to navigate around a site, display products more effectively, or provide useful visual feedback.
I’ve collected some examples of these interactions from a range of ecommerce sites…
Le Cafe Noir
This animation appears when shoppers add an item to their basket.
It’s fun, but also provides feedback that the item has been successfully added to their shopping basket.
This is a mouseover effect which Nixon shows on its category pages.
It allows shoppers to quickly view the different colour and design combinations without going to the product page.
53 sells a stylus for touch screen devices, and uses this scrolling effect to demonstrate the product’s features.
The pencil comes apart as you scroll down, to demonstrate the inner workings and explain its key selling points.
Similar to the Nixon example, this effect allows people to see the different colour options from category pages.
As you choose from a selection of alloy wheels for your car, the wheels spin to show how they look on the move.
It looks nice, but also helps people to visualise the different styles and come to a decision.
Cimemagraphs are images with just one or two moving elements. They look great and help to catch the visitor’s attention.
Chopard uses a cinemagraph here to show its luxury watches, and display a little bit of the lifestyle it wants to associate with the brand.
Here’s some more great examples.
Another scrolling page, this one is used to great effect to show off the chocolate bars.
It looks good, but also conveys the ingredients and nutritional information effectively.
The Cool Club
Another nice animation which provides feedback confirming the item has been added to the shopping cart.