Simple animation, fluid transitions, dynamically changing results, micro UX… all these design elements can not only make your website easier to use but delight your visitors too.
I’ve rounded up 16 examples of great little animations from a variety of ecommerce sites, some of which are integral to providing the best user experience possible, others which merely provide a creative icing to an already tasty cake.
It’s also an excuse to test my new Gif generator tool. Enjoy!
Hovering your mouse over the product image reveals how it looks on a human being rather than a floating invisible body. This covers all bases in terms of how a visitor may wish to see the product.
Hover zoom is a common feature of ecommerce, it allows the user to control exactly the area they can see and is also good for those looking on a smaller screen.
Hovering over the product lets you see the price and an ‘add to cart’ button, which would otherwise distract from the artwork.
Also check out the subtle animation once the item is added to your cart.
If you hover over one of the homepage products an eye appears which you can then click, and it rearranges the page so that the item is highlighted in a larger box, with colour and size options and an ‘add to bag’ CTA.
House of Fraser
The ‘add to bag’ button only becomes solid once an available item has been chosen.
A scrolling transition from product page to basket is a neat way to keep things fluid.
Changing the colour of your basket icon at the top of the page reminds you that there’s something there if you continue shopping.
An old favourite that I have to include. It’s micro-UX like this that keeps me coming back for more.
You should be providing automatically suggested results in your search box, but changing the results dynamically as you type is even more user friendly. Also note the thumbnail images used for added persuasiveness.
A simple but effective piece of UX is automatically changing the features of the product as you select options.
The use of Gifs can show features of a product in a simple, clear way that may be hard to describe otherwise.
Instead of just clicking the item to add it to a wishlist, at Rough Trade you drag the item up to a ‘shelf’ which remains visible throughout the experience.
Can’t decide what socks to buy. Take a gamble instead. Sure tools like this may not lead to direct sales, but they are fun and show your brand’s sense of humour and creativity.
Footlocker has a brilliant ‘sneaker calendar’, which changes dynamically when you click on a date and scroll through the products.
Pick your alloy wheels, see exactly what they look like when they’re spinning. I’m sure this is helpful somehow.
And just in case you’ve ever had the misfortune to land on our 404 page, we have this little treat waiting for you.