{"id":10,"date":"2017-01-06T10:47:30","date_gmt":"2017-01-06T10:47:30","guid":{"rendered":"http:\/\/www.zombiesoftwares.com\/blog\/?p=10"},"modified":"2017-01-13T16:13:31","modified_gmt":"2017-01-13T16:13:31","slug":"best-practices-for-mouseover-effects-on-ecommerce-sites","status":"publish","type":"post","link":"http:\/\/www.zombiesoftwares.com\/blog\/best-practices-for-mouseover-effects-on-ecommerce-sites\/","title":{"rendered":"Best Practices for mouseover effects on ecommerce sites"},"content":{"rendered":"

Mouseover (or hover) effects can be a useful way for sites to convey information quickly when used well, and can aid conversion.\u00a0<\/strong><\/p>\n

Of course, such things should be tested for effectiveness, but there are some good examples of their use on\u00a0ecommerce sites<\/a>.<\/p>\n

Here are ten examples, please suggest any other good ones you have seen\u2026<\/p>\n

Activating drop-down menus<\/strong><\/h2>\n

Large drop-downs, such as those used by John Lewis, are often activated on mouseover. This does make it easier for customers to see the various sub-categories on offer, but the timing and sensitivity of menus is key for good UX.\u00a0<\/strong><\/p>\n

For example, menus that vanish too quickly or too slowly when the cursor moves away can be an annoyance.<\/p>\n

In this case, John Lewis<\/a>\u2019 drop-down is big enough to allow users to easily move the cursor around within it:<\/p>\n

\"\"<\/p>\n

Show add to basket options on mouseover<\/h2>\n

The Amanda Uprichard site shows options for selecting size, colour and quantity when you move the cursor over preview images.<\/p>\n

This provides a useful shortcut for people to add items straight to their shopping baskets and bypass the product page.<\/strong><\/p>\n

However, it does make it slightly harder to access the product page, as users cannot click the product image to do so, and instead have to click the product title.<\/p>\n

(Click on the image the view this effect on the site).<\/em><\/p>\n

\"\"<\/a><\/p>\n

Scroll through product views<\/h2>\n

On Bottica, hovering over product images on results \/ category pages triggers multiple product views, so shoppers can gain a better idea of the product with little extra effort.<\/p>\n

\"\"<\/a><\/p>\n

Show price<\/h2>\n

Annoushka shows the price and some additional detail when you hover over product images.<\/p>\n

\"\"<\/a><\/p>\n

Showing the back of dresses<\/h2>\n

On lillypulitzer.com<\/a>, you can see the back of the dresses by hovering over the preview image:<\/p>\n

\"\"<\/a><\/p>\n

Show alternative colours<\/h2>\n

On Land\u2019s End, you can quickly view the item in different colours by moving the cursor over the one you want to see.<\/p>\n

\"\"<\/a><\/p>\n

Out of stock messaging<\/h2>\n

If you hover over a size and colour which is unavailable on House of Fraser, it will produce a message on the product image:<\/p>\n

\"\"<\/a><\/p>\n

Zooming into product images<\/h2>\n

Here, the Lego site automatically zooms into product image when you move the cursor over them:<\/p>\n

\"\"<\/a><\/p>\n

Showing basket contents<\/h2>\n

Again on House of Fraser, hovering over the shopping basket links produces a pop-up showing a summary of its contents and cost:<\/p>\n

\"\"<\/p>\n

It also disappears as soon as you move the cursor away, so it doesn\u2019t interfere with the user experience<\/strong>. Very handy.<\/p>\n

Use in checkout forms<\/h2>\n

Here, OfficeMax uses a hiver effect for users to quickly see information<\/p>\n

\"\"<\/p>\n

This is a good use of hover, as it allows users to quickly access the information, and avoids distracting them too much from the checkout form.<\/p>\n

“<\/b>For a free consultation<\/em> with a member of our team call us now on +971-544177921\u00a0 or\u00a0 send query via this link<\/a> \/ email<\/a> . \u201c<\/p>\n","protected":false},"excerpt":{"rendered":"

Mouseover (or hover) effects can be a useful way for sites to convey information quickly when used well, and can …<\/span><\/p>\n","protected":false},"author":1,"featured_media":442,"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":[48,74,75,59,65],"class_list":["post-10","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience","tag-customer-experience","tag-mobile-apps-development","tag-product-page","tag-user-experience","tag-web-design-trends"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.zombiesoftwares.com\/blog\/wp-content\/uploads\/2017\/01\/maxresdefault.png?fit=450%2C450","jetpack_shortlink":"https:\/\/wp.me\/p8i7fD-a","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/posts\/10","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=10"}],"version-history":[{"count":7,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/posts\/10\/revisions"}],"predecessor-version":[{"id":723,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/posts\/10\/revisions\/723"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/media\/442"}],"wp:attachment":[{"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/tags?post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}