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.

Checkout

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.