Product List Usability: Avoid ‘Quick View’ Overlays

‘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 June 2020: subsequent testing have reverified quick views still aren’t worthwhile on desktop sites, but on mobile sites they can be of some use if implemented very carefully, we explore these results in the article “3 Pitfalls to Avoid if Implementing “Quick Views”“.

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.

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.

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.

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 downright harmful to the user’s browsing experience because it potentially deprives them of crucial product information and features only found on the product page.

Optimizing the Wrong Thing

The scenario looks like this: We implement a new feature like Quick Views and see conversions go up. From this we conclude that Quick Views are therefore a good design solution. Unfortunately, things aren’t so simple, because we may actually be optimizing something that is fundamentally flawed.

Now optimizing something that’s broken will of course still yield incremental conversion rate improvements – but we’re treating the symptom rather than the cause, making a better version of something that’s structurally flawed. The truly big gains are made when we tackle those core design issues head on rather than polishing something that is broken.

This is why a combination of usability testing and A/B testing is often necessary. We need to understand what is important to test and gain insight into why version A is performing better than version B, because it might just reveal that truly major gains could be made with a new version C. Usability testing helps us figure out what to test and why one variation is performing better than another, while A/B testing tells which of those solutions work the best.

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

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 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” user experience for product lists, filtering and sorting.