16 delightful micro UX animations for ecommerce

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.