12 Ways To Enhance Your Online Store With Javascript Hover Effects

I have to admit I’m a big fan of “hover” (or “mouseover”) features in web design. Anything that spares me a click or pop up window wins points with me as a shopper. I’ve spotted several retailers using this effect creatively, beyond the typical image zoom or flyout menu. Here’s a collection of my favorites.

Home Page and Navigation

Home Page Flash

Barnes and Noble augments its home page flash banner with product details and a cart button when you mouse over a product. Often retailers just hyperlink the images, but this saves me from bouncing back and forth. I can decide whether I’m interested pre-click.

Rich Flyout Menus

Flyout menus allow the visitor to expose categories and subcategories without a click, making it easier to locate products quickly and flattening your site architecture (more pages are 1 click away from the home page). They are quite common, but I’ve spotted a few that you might call “rich flyout menus” as they include promotional information or thumbnail images for products. For example:

American Eagle Outfitters shows featured products and sale messaging (above) and Best Kiteboarding shows the a product image that changes as you roll over menu items (below).

Site Search Rich Autocomplete

As mentioned in a previous Get Elastic post, many consumer software sites offer an autocomplete feature that is “rich” with additional images, text and promotional areas. Below is an example from the Apple Store.

Category Pages

Category Previews

There are several ways retailers are using mouseover effects to improve category pages.

One method is a simple image enlargement to detail previews, like Bidz.com and Neiman Marcus:

Other sites use it to show alternative views, product details or both, as Blue Nile:

Land’s End and Brooks Brothers (below) allow you to switch thumbnail colors.

Product Pages

Product Imagery

Many sites employ the mouseover effect to switch colors, product views or zoom…

…but there are more creative things you can do…

Category Exposure on Product Pages

American Eagle Outfitters allows you to navigate the category from a product page without hitting the back button. As shown below, you can “View All Shorts”.

Stock Availability

The Gap shows whether a size or color is available, making it clear over the product image.

Terms and Policies

Need to define features or industry jargon? Check out how Crutchfield does it.

Similarly, Virgin Mobile explains policies without a pop-up.

Add To Cart Error Handling

It’s easy for customers to forget to select a size, color or other option required before adding to the cart. Often retailers will disable the Buy button until properly selected or refresh the page with an error message. Both of these approaches can confuse customers. The best way to handle errors is to show the error message close to the call-to-action, rather than in red letters at the top of the page where it’s less likely to be noticed.

On Anthropologie, if you’ve missed selecting a size or color, you’ll notice right away as you mouse over the Add to Bag button.

Currency Conversion

This site shows you currency conversion values with a hover. You can eyeball them without having to select a currency and wait for a page load.

Cross-sell Preview

Barnes and Noble lets you preview product recommendation prices, details and even lets you add directly to cart.

See more examples like this in Merchandising Usability: A Better Way to Show Product Recommendations.


Policies and Instructions

Office Max explains what MaxPerks ID and Tax Exempt ID mean with a mouseover.

roll over to find out what MaxPerks ID and Tax Exempt ID are.

You could also use this to explain policies or provide instructions for finding a CVV code.

This is only scratching the surface. Potentially, anything on-page feature that requires a click or a pop up window could be handled with a mouseover effect for a smoother customer experience and more modern feel to your website.

Related Articles

11 Responses to “12 Ways To Enhance Your Online Store With Javascript Hover Effects”

  1. mtkd says:

    Not sure these all add to the experience. Certainly the realtime error feedback is useful, but many users find hover popups quite annoying.

    Javascript should be used sparingly and when used for navigation there should be a usable fallback when it is not enabled on the user’s browser.

  2. phaab says:

    In 2010, is there still a significant number of users that don’t enable javascript or -even worse- refuse cookies ?

    I don’t know anyone (except the paranoid geeks) who disable JS or cookies. Disabling those would prevent you from surfing on a majority of web sites througout the Internet…

  3. Kim Dudra says:

    Rich search is a favourite feature of mine. It’s frustrating when a site doesn’t have one, such as on Amazon and even Twitter.

    I worked in web marketing at a medical diagnostics company where many of our customers were over 50 years old and many of whom had issues with coordination. With some Java code, you have to hover just right to see the expanded views, which is troublesome with those with dexterity challenges. These examples seem to be improved versions of this feature, whereby the expanded view stays in place even if your mouse “falls off” the link.

  4. Ive been reading your blog. Keep it up for us to be updated!! Can you post more often? Ive made my new forex mentoring blog. This will give my subscribers a whooping 82% accuracy on all their trades. Check it out…

  5. Bushy says:

    Why there are no links to the pages, so everyone can see the examples working in real?

    • Short answer is product pages get dropped when the item is no longer available, and you end up with a blog full of broken links. I’d rather post the screenshot. Also, sites get redesigned and you may check out the site and become frustrated that the feature is no longer to be found.

  6. Image preview was one of the recent features added to Magic Zoom: http://www.magictoolbox.com/magiczoom_examples/#entire

    Another nice JavaScript hover technique is the descriptive text shown when you mouseover the thumbnail image on the Guardian homepage: http://www.guardian.co.uk/

  7. DefunkOne says:

    Great post. Will get some of this developed into my site this month. Also added a free feedback script from http://www.kampyle.com.

    Time to get down to business!

  8. Mark says:

    Another great post Linda, with lots of examples to check out and think about.

    I’ve been a fan of flyouts for awhile, but many designers dislike them as it messes with the integrity of their design. (But they say that about a lot of things.)

  9. [...] information displays when a user hovers over a top-level [...]

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS