‘Quick Views’ have become immensely popular and our benchmark of product list pages reveals that 48% of the top 50 US e-commerce sites have implemented Quick Views. However, during our large-scale usability study on Product Listings we’ve observed Quick View features to cause severe usability issues – to the extent where sites should generally avoid using Quick Views altogether.
Often Quick Views are a symptom of deeper rooted design issues with a site’s product listing pages. In this article we’ll explore the usability issues related to Quick View overlays and round off with set of design alternatives.
Update August 2022: This article no longer reflects current user behaviors. See Provide “Quick Views” for Visually Driven Products (50% Don’t) for the most recent research findings.
Why ‘Quick Views’ May Seem Like a Great Idea
At first glance Quick Views would seem like a great idea. The feature does, as the name hints, provide the user with a “quick view” of the product by opening a lightbox overlay which displays a preview of the selected item – and potentially presents additional product details, images, specs, etc. This is done without pulling the user away from the product list which allows the user to take a closer look at the product without having to leave their current product list context. And in fact, on some sites the test subjects did find Quick Views useful. So why do we recommend against using them?
This is where a word of caution is necessary: Quick Views are often symptom treatments for poor product list designs. Indeed the test subjects were only appreciative of Quick Views on test sites that had a problematic list item design.
During testing Quick Views were actually appreciated by some subjects who saw it as an opportunity to get bigger thumbnails images – alas, this was only the case on sites where the product list had design flaws, such as here on Macy’s where – given the visually-driven industry they’re in – the product thumbnails are much too small.
The most common issues that Quick Views are able to partially fix are too small list item thumbnails or a lack of secondary product images. Quick View overlays obviously has room for all of these things – yet they really aren’t the most effective way of solving these problems since Quick Views also introduce friction to the user’s browsing process as clicking and waiting for content to load is still required. A better solution is to simply make the list item thumbnails the right size to begin with and have secondary hover thumbnails.
In a few other instances Quick Views were also observed to provide the user with additional information about the product. However, once again these proved to be symptom treatments to lacking list item attributes – the information should simply have been included in the list item in the first place. Indeed, relegating vital product information to a Quick View is problematic because it doesn’t allow the user to compare the products in the list by glancing over them.
The immediate and seeming appeal of Quick Views do help explain why 48% of top e-commerce sites have the feature. Especially given that some sites will likely see a small increase in conversion rate when implementing a symptom treatment. Unfortunately this disguises the underpinning issue of poor list item design which is causing a much larger hit to overall conversions.
More Issues: Misinterpreting Quick Views for Product Pages
A repeating issue throughout several of our usability test studies is users struggling to accurately understand the site’s hierarchy. It simply isn’t very easy for users to deduce a site’s hierarchical structure, understanding exactly how the different categories, sub-categories, product lists, and product pages, are all connected and structured.
By introducing a Quick View option this issue is further enhanced, as users are presented to yet another site layer. The hierarchical position of a Quick View can be tricky to understand – it’s not a list item, yet it is not a product page either. It sits somewhere in-between the two, yet isn’t necessary to actually go through when moving from list item to product page. During testing, this was observed to cause several usability issues, and confuse users as to where they were in the site hierarchy and how they could and should interact with the site.
At Pottery Barn, a subject mistook the Quick View for the product page, and as a result she couldn’t find the product specifications (i.e. sofa dimensions) she was looking for.
The primary issue with Quick Views, however, is that some users will end up misinterpreting them for the site’s product pages. Our latest eye-tracking study revealed that users often ignore the headline of a page and instead use the page content information and buttons to deduce what type of page they’ve landed on. When users are presented to a Quick View which contains a decent amount of product information, different product variations, multiple and large product images, and even a “Buy” button, some users will – quite understandably – mistake the Quick View for the site’s product page.
These users will consequently treat and interact with the page as if it is the product page. Therefore, if these users can’t find the product information they are looking for in the Quick View, they are likely to conclude that it’s because the site does not have this information (i.e. they won’t go looking for the “real” product page because they already believe they are there). Hence when users mistake the Quick View window for the site’s product page they tend to miss out on the product information and features only available on the product page, and may as a consequence discard perfectly suitable products simply because they cannot find key information about the product.
Even on sites with inferior product list designs, not all subjects found the Quick Views to be of any help, with some even describing them as “pointless” – they couldn’t see the benefits in using the Quick View feature over simply opening the product page, as both required a click and loading. After all, the larger images and additional product information is also available on the product page.
Even More Issues: Opening the Quick View or the Product Page
During testing, the subjects often accidentally opened Quick Views when trying to access the product page, especially if the ‘Quick View’ button was placed in the middle of the product thumbnail. This isn’t a major issue if the user notices it, as they can then simply close the Quick View and go to the product page instead. Unfortunately, not all users will understand or notice that they ended on a Quick View, and therefore won’t realize that they aren’t seeing all the information available about the product.
At H&M a subject wanted to see the product page for a specific dress and therefore centered her mouse over its thumbnail and clicked – unfortunately the middle of the thumbnail was reserved for a “Quick Look” hover link and she therefore accidentally ended on the “Quick View” overlay rather than the product page.
Users are even more likely to confuse the Quick View overlay for the site’s product page if the button used to open the Quick View is only displayed on hover. During usability testing, many subjects simply didn’t notice the ‘Quick View’ button appearing in the short time between them beginning to hover the list item and actually clicking it. Again, this can lead to critical misinterpretations that can be harmful to the user’s browsing experience because it potentially deprives them of crucial product information and features only found on the product page.
Alternatives & Exceptions
So what are some alternative solutions to Quick Views? Well, during testing, a much better performing alternative was utilizing mouse hover to display additional product thumbnail(s) or additional product information right within the product list. And of course making sure that primary information is there in the default view so users can compare products.
Update: we’ve now written a followup article with our research findings for mouse hover and what to do on mobile:
baymard.com/blog/secondary-hover-information
On IKEA, hovering a list item reveals additional (but ultimately secondary) product information and enables the user to cycle through any other variations of the product available.
Another possible solution would be to include embedding the entire product page in an overlay (potentially unlocking the benefits of maintaining the product list context without introducing the downside of an intermediary preview page between product list and product page) although we have yet to see such an implementation and therefore don’t have any test data on how it may perform.
So are there any instances where Quick Views should be used? In some cases there might be. For example, if for some technical reason, the list item design can’t be changed or can’t display a secondary hover image, then Quick Views may indeed work fine – just realize that you’re treating the symptom rather than the cause. Another case might be product verticals where seeing full screen sized images is highly valuable – here the Quick View can give the user an easy way of accessing a screen-sized image gallery of each product without losing their place in the product list.
Ultimately, while there are a few exceptions where Quick Views may be acceptable, they generally tend to be a classic example of symptom treatments. And the incremental conversion rate improvements Quick Views can bring to sites with flawed list item designs helps explain why so many major e-commerce sites may have implemented them. Yet not only can Quick Views be a cover for poor list item design, they can furthermore introduce a set of usability issues on their own, such as blurring the differences between the product preview and the full product page, and posing challenges of how, when and where to show the ‘Quick View’ button so users don’t accidentally open the preview when in fact they wanted the full product page.
This article presents the research findings from just 1 of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.
