{"id":87,"date":"2017-01-10T13:15:03","date_gmt":"2017-01-10T13:15:03","guid":{"rendered":"http:\/\/www.zombiesoftwares.com\/blog\/?p=87"},"modified":"2017-01-13T16:32:52","modified_gmt":"2017-01-13T16:32:52","slug":"23-creative-examples-of-hover-states-in-ecommerce-ux","status":"publish","type":"post","link":"http:\/\/www.zombiesoftwares.com\/blog\/23-creative-examples-of-hover-states-in-ecommerce-ux\/","title":{"rendered":"23 Creative Examples of Hover States in Ecommerce UX"},"content":{"rendered":"

\"user<\/p>\n

People\u00a0loves interaction with a website. Although scrolling experiences aren’t for everyone, mouseover effects have been established for a long time.<\/p>\n

As creative hover states feature in our\u00a0design trends to watch out for in 2016\u00a0(for the creativity they afford an otherwise increasingly restrained front-end developer), I decided to roundup some of my favourite examples.<\/p>\n

Of course, these are on desktop, where most ecommerce sales occur (for now).<\/p>\n

1. American Apparel: artistic fade-to-white<\/h3>\n

Let’s start with an illusory effect from American Apparel. This fading out of content blocks on the homepage does two things to my mind.<\/p>\n

It adds a certain mystique (hard to define, I know) but also cleverly disguises those rather inelegant calls to action until the user hovers.<\/p>\n

\"american<\/p>\n

2. American Apparel: Ken doll multicolours<\/h3>\n

Sticking with the controversial Gen-Y favourite, Apparel confidently deals with products that can come in 30 to 40 colours.<\/p>\n

There’s definitely an element of fun involved in redressing the model in all the colours of the rainbow.<\/p>\n

\"american<\/p>\n

3. Reebok: clever expanded colours<\/h3>\n

Sneakers that come in different colours are quite hard to merchandise. If every colour is listed separately, it’s too much, but if the customer isn’t aware of each colour, they might not be turned on to the product.<\/p>\n

Reebok innovatively users mouseover to display each colour and further still, then allows a second mouseover to change the colour of the main image. Nicely done.<\/p>\n

\"reebok<\/p>\n

4. Pure Fix Cycles: magical glowing bike reveals<\/h3>\n

A very specific use case for hover states here, and one that works perfectly.<\/p>\n

Pure Fix sells glow-in-the-dark bicycle frames, as you can see.<\/p>\n

\"purefix<\/p>\n

5. Urban Outfitters: models working it<\/h3>\n

Hover states on photos in category listings have been around for a while, but\u00a0Urban Outfitters\u00a0implements them with admirable sass.<\/p>\n

\"urban<\/p>\n

6. ASOS: purple cracklers and a flying plane<\/h3>\n

I love the crackling purple buttons on the\u00a0ASOS\u00a0homepage. OK, the plane that flies across the screen in fluorescent green is not a hover state (it’s actually a scrolling element) but I had to mention it.<\/p>\n

Rarely have I seen free worldwide delivery highlighted with so much panache.<\/p>\n

\"asos<\/p>\n

7. ASOS: chunky borders & negative ghosts<\/h3>\n

Elsewhere (on the Men’s content-led category page), content blocks are highlighted with a chunky border on hover.<\/p>\n

There’s also a cheeky\u00a0ghost button\u00a0in here, which switches colour negative when you run over it.<\/p>\n

\"asos<\/p>\n

8. Net-a-Porter: clarity in categories and filters<\/h3>\n

Okay, not a showy example from\u00a0Net-a-Porter, but the kind of feature that receives a silent nod of appreciation from the UX buff.<\/p>\n

Too many filters are unnecessarily fiddly, this one at least tries to help.<\/p>\n

\"net-a-porter<\/p>\n

9. Ben Sherman: restrained category snapshots<\/h3>\n

What better way than to demonstrate quietly-confident style than only affording a glimpse of a category image on rollover?<\/p>\n

Ben Sherman’s approach adds clarity and intrigue.<\/p>\n

\"ben<\/p>\n

10. Reebok: domino menu<\/h3>\n

I love this. Ecommerce sites with lots of rollover header menu categories can get annoying as content regularly pops down and disorients you.<\/p>\n

The domino fall-out of some of Reebok’s menus is only a fluorish, but I felt it removed that rather abrupt nature of dropdowns that can annoy.<\/p>\n

\"reebok<\/p>\n

11. Topshop: eyebrow-raising model reveals<\/h3>\n

More oldie-but-goodie rollover product shots here. You can’t deny it adds a real incentive to notice and explore each product.<\/p>\n

\"topshop<\/p>\n

12. Lush: ghost buttons<\/h3>\n

This is a web design trend from 2014 and 2015 (and set to continue).\u00a0Lush is the undisputed master\u00a0of this unobtrusive yet unignorable button style.<\/p>\n

\"lush<\/p>\n

13. All Saints: all about the angles<\/h3>\n

More product preview hovers. There’s something beautifully pragmatic about the way every product here turns at the same angle to reveal how the clothes hang.<\/p>\n

This fits very well with All Saints’ smart and clean style.<\/p>\n

\"all<\/p>\n

14. Urban Outfitters:\u00a0elegant filter selections<\/h3>\n

Why choose shading when you can have an elegant rounded outline?<\/p>\n

This is Urban Outfitters adding a nice touch to its filters.<\/p>\n

\"urban<\/p>\n

15. Reebok: moody content pods<\/h3>\n

Reebok’s website chooses a limited palette on the homepage, in part to mythologise sport and Reebok’s products, allowing the consumer to imagine themselves as a legend (in my opinion).<\/p>\n

In keeping with the mood, content blocks darken on mouseover.<\/p>\n

\"reebok<\/p>\n

16. Stella McCartney: negative coloured buttons<\/h3>\n

A designer touch from Stella McCartney. Simple but very effective.<\/p>\n

Interestingly, the use of white boxes with black text, over images, is something I expect to see more of. It looks classy and is a simple solution to the problem of overlaying text.<\/p>\n

\"stella<\/p>\n

17. eBuyer: recommendation previews<\/h3>\n

From fashion to electronics. Not quite as enjoyable to watch as our previous examples but an important tactic for conversion, nonetheless.<\/p>\n

Product add-ons are expanded on rollover, to display spec, price and enlarged photo.<\/p>\n

\"ebuyer<\/p>\n

18. Marks and Spencer: shoppable magazine<\/h3>\n

Another design trend is the move from pages to services, i.e. the user does not think of Facebook or Netflix as a collection of pages, merely a service.<\/p>\n

Marks and Spencer\u00a0is not there yet<\/a>, but I do admire the layout of its Style and Living magazine homepage, which feels like a natural evolution of the glossy mag, allowing you to flick through.<\/p>\n

\"m&s<\/p>\n

19. Walmart: picking out iconography<\/h3>\n

Yet more sublimely functional GIFs. OK, this type of hover state on menu icons happens everywhere. But that’s all the more reason to implement it if it’s missing from your site.<\/p>\n

Design conventions are the closest the web gets to being intuitive.<\/p>\n

\"walmart<\/p>\n

20. Topshop: informative recommendations<\/h3>\n

Another common element in ecommerce, with product titles, price and customer reviews appearing when rolling over product recommendations.<\/p>\n

Every little helps when trying to declutter a product page and focus the user.<\/p>\n

\"topshop<\/p>\n

21. Boohoo: zooming content holders<\/h3>\n

These content holders feed off mouseovers and grow in size (more accurately an image zoom).<\/p>\n

I’m not sure this effect did much for my concentration, and I did start to feel queasy after watching this GIF for 20 seconds.<\/p>\n

\"boohoo<\/p>\n

22. Missguided: the ‘reverse ghost’<\/h3>\n

Well, this ‘add to bag’ button is certainly a little more refined than the jumper in question.<\/p>\n

It’s the reverse of a ghost button, becoming ‘transparent’ on rollover and encouraging that all-important click.<\/p>\n

\"boohoo<\/p>\n

23. ASOS: product quick view or wishlist<\/h3>\n

Lastly, this is a fairly common bit of\u00a0micro-UX. Product listings on category pages display ‘quick view’ and ‘save’ options on hover.<\/p>\n

Again, great for reducing clutter on the page and encouraging interaction through dynamism.<\/p>\n

\"product<\/p>\n

 <\/p>\n

For free consultation on your idea Call us now on +971-544177921 or\u00a0email .\u00a0<\/a>Send a\u00a0query<\/a>\u00a0as well<\/p>\n","protected":false},"excerpt":{"rendered":"

People\u00a0loves interaction with a website. Although scrolling experiences aren’t for everyone, mouseover effects have been established for a long time. …<\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[3],"tags":[51,73,57,76,65],"class_list":["post-87","post","type-post","status-publish","format-standard","hentry","category-user-experience","tag-conversion","tag-digital-marketing","tag-social-media","tag-user-experience-design","tag-web-design-trends"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p8i7fD-1p","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/posts\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":9,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/posts\/87\/revisions"}],"predecessor-version":[{"id":776,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/posts\/87\/revisions\/776"}],"wp:attachment":[{"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/categories?post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/tags?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}