12 Ways To Enhance Your Online Store With Javascript Hover Effects
Jan 6th, 2010 by admin
I have to admit Im 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. Ive spotted several retailers using this effect creatively, beyond the typical image zoom or flyout menu. Heres a collection of my favorites.
Picture of 12 Ways To Enhance Your Online Store With Javascript Hover Effects [source:getelastic.com]
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 Im interested pre-click.
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 Ive 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).
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.
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:
Lands End and Brooks Brothers (below) allow you to switch thumbnail colors.
Many sites employ the mouseover effect to switch colors, product views or zoom
but there are more creative things you can do
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.
The Gap shows whether a size or color is available, making it clear over the product image.
Need to define features or industry jargon? Check out how Crutchfield does it.
Similarly, Virgin Mobile explains policies without a pop-up.
Its 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 its less likely to be noticed.
On Anthropologie, if youve missed selecting a size or color, youll notice right away as you mouse over the Add to Bag button.
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.
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.
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.[source:getelastic.com]
Related posts: