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.
You may also like these similar posts:
Original post by Linda Bustos
Subscribe to our feed