Volume 31 - Best Practices of the Quick View Feature - Mar 2009

If you have an eCommerce site and are interested in enhancing the shopping experience for your users, then implementing a Quick View feature is definitely a consideration to be discussed. This article addresses the “do’s and don’ts” of the Quick View feature.

Let’s start with a definition. The Quick View is a site feature that allows users to quickly view detailed product information without navigating away from the Product Listing page. Upon mouse-over of a product image, the user simply clicks a button, typically labeled ‘Quick View’, and an overlaid window appears, presenting the product detail. This minimizes time spent browsing products since the user no longer has to wait for the site to refresh and display a Product Detail page every time he/she wants to review product details.

Consider the screenshot examples below. Figure 1 displays a Quick View button for the product of interest (in this case, labeled ‘QuickLook’). Figure 2 displays the resulting Quick View window.

Figure 1

Figure 2

Alerting Users to the Presence of the Feature

To alert your users to the presence of the Quick View feature, follow the guidelines below.

• Ensure the Quick View button appears on mouse-over of the product image, as opposed to appearing at all times. This presents a cleaner look and feel. Additionally, ensure the button appears instantly upon mouse-over.
• Ensure the Quick View button is centrally located within the product image and thus in the users’ direct line of sight.
• Ensure visual treatments of the button are such that the button commands attention. In the example screenshot above, notice the button’s contrasting colors.

Optimal Quick View Windows

For an optimal Quick View window, consider the following guidelines.

• Provide dynamic content within the window.  Ensure relevant product features, such as product size and color are dynamically available via mouse-over or click of an icon.
• Balance conciseness with rich content through the use of bulleted text and/or tabbed information, if needed.
• Provide the ability to navigate to the actual Product Details page so that users can obtain additional information if desired.
• Provide the ability to add to cart from the Quick View window, as well as make all required selections such as size, color, quantity, etc.
• Include an easy to locate close icon in the top right of the window.
• When adding to the cart, present relevant error messages that dynamically appear within the window if required selections have been overlooked or if there is insufficient inventory.
• Upon clicking the ‘Add to Cart’ button, provide clear notification that the item has been added to the cart.  Do not require the user to close the window, but do so automatically.

Potential Pitfalls

When implementing a Quick View feature, avoid these potential pitfalls.

• Do not strip out all product detail from the Product Listing page and place it within the Quick View window.  This is particularly important in the case of technical or electronic products.  Stripping out all product detail will likely frustrate users as they will be unable to differentiate between the various options presented and will be forced to rely on the Quick View.
• Do not replace Product Detail pages with the Quick View window.  Though the feature is becoming more common on eCommerce sites, there are still many users who will navigate to the Product Detail page before making a purchase decision.  Ensure the Quick View is not the sole option for providing product detail.

When implemented properly, the Quick View can be a powerful tool that enhances the user experience by cutting down time spent browsing.  Have an eCommerce site of your own?  Contact us for customized assistance in solving your usability issues.- Jason Vasilas - User Experience Team Lead

Do you have a question, comment, compliment or complaint about this or any of our past newsletters?  Please click the link below to give us feedback about what you have read and what you would like to see more (or less) of in future editions. We’d love to hear from you!

Questions, Comments, Concerns...