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!

M&S

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.

American Apparel

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.

Mondo

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.

Fat Face

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.

Mendo

A scrolling transition from product page to basket is a neat way to keep things fluid.

Fallen Hero

Changing the colour of your basket icon at the top of the page reminds you that there’s something there if you continue shopping.

Threadless

An old favourite that I have to include. It’s micro-UX like this that keeps me coming back for more. 

Smyths

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.

Apple

A simple but effective piece of UX is automatically changing the features of the product as you select options.

Firebox

The use of Gifs can show features of a product in a simple, clear way that may be hard to describe otherwise.

Rough Trade

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.

Two Socks

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

Footlocker has a brilliant ‘sneaker calendar', which changes dynamically when you click on a date and scroll through the products.

BMW

Pick your alloy wheels, see exactly what they look like when they’re spinning. I’m sure this is helpful somehow.

Bonus: Econsultancy

And just in case you’ve ever had the misfortune to land on our 404 page, we have this little treat waiting for you.

Further reading…

For more on web design from the blog, check out: 

Christopher Ratcliff

Published 19 February, 2015 by Christopher Ratcliff

Christopher Ratcliff is the editor of Methods Unsound. He was the Deputy Editor of Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

686 more posts from this author

Comments (1)

Avatar-blank-50x50

Lada Hrbacek, CEO at Tabfoundry

This small spice shop has a nice flip-over animations! https://youtu.be/gkA_WlJ3Y84?t=15s

over 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.