How to Use the ‘Quick View’ Feature to Enhance the Browsing Experience

It has become commonplace for e-commerce sites to provide a Quick View feature to enhance the shopping experience for their users. This post 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

Creating User Awareness 

To alert 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 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 cart.  Ensure the window closes automatically, so the user is not required to take the extra step to close it.

Potential Pitfalls

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

• Do not strip out all product detail from the product listing page just because you have placed the details within the Quick View window.  This is particularly important in the case of technical or electronic products.  Stripping out all product detail from the detail page will likely frustrate users as they will be forced to rely on the Quick View window to access product details.
• Do not do away with the product detail page.  Though the Quick View feature is now more common on e-commerce sites, there are still many users who want to navigate to and view a product detail page before making a purchase decision.  Ensure the Quick View is not the sole option for providing product detail.

By following the recommendations above, the Quick View can become a powerful tool that enhances the user experience by cutting down time spent browsing.