‘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”“.
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.
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.
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.
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.
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:
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.
Join 25,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
As always, a highly informative piece.
Any thoughts on an alternative to hover (eg for larger image) for touch devices?
Much of the effectiveness of hover, observed during testing, were gained by showing additional and secondary thumbnail or specs. On platforms with limited real estate, especially smartphone, this “extra” visual and textual info will often be impossible to fit within the product list design and is better relegated entirely to the product pages where there’s sufficient space to display it. (loosing overview in the product lists was found to be a severe issue during our mobile e-commerce study)
The key parameter on whether the info can be excluded entirely is in the distinction between primary and secondary info. We’ll be sure to elaborate on this in the future article on the observed performance potential of hover (and possibly what to do on mobile instead).
Thanks! Just want to second the request for a future update with more details on how to approach this problem on mobile.
Interesting view and a good case to explain why quantitative data should always be supplemented by qualitative data.
We use Quick Views for products featured on some of our teasers. We recognized that some users wanted to buy/see more about those products but we didn’t want to clutter the picture (we’re in the fashion industry).
Is this something you also recognised during your tests?
Any thoughts on what alternatives to Mouse Hover could be used on mobile?
And interesting to see that Alex from Maxymiser has come to the same conclusion :-)
Brilliant article and loads of points to think about – Thanks for your research into this
Thank you so much for this great article. You explained how bad is quickview on listing page. But how bad is it on product page?
Some ecommerce sites have “required items” in addition to “related items”. So is it better to show quickview for all these items and without exiting that page? so the user can add to the basket what he want, and keeping him on that product page. Why keeping him on that page?
Okay, because he still need to read and dig more for that product by seeing reviews, videos, pictures, … etc. Just to give an example for what I am trying to say: https://goo.gl/NDXlal
As you can see from design, I am thinking to implement quick view for all reviews, related items, required items, and even when you want to play a video it will show you the video you chose with list of videos on the right side. But I am reading this article now, and I am little bit confused.
What do you think?
Thank you for such an insightful piece! A lot of great pointers & takeaways.
Another example I often see is to utilize hotspot maps on thumbnails to reveal additional product imagery.
I’m curious how you know for sure that the quick view caused people to overlook the details page? Did you ask them to perform a task that required the details to complete? Did you ask them to go to the details page but they only clicked the quick view? Did you show them the details page later and ask them why they didn’t go to it? Was this a quantitative or qualitative study? Moderated or unmoderated?
In another Baynard article, Jaime Appleseed she says “poorly selected list item information to be one of the most severe usability issues.” Wouldn’t the opposite also hold true then? Well selected information would improve usability. In this case that could mean not needing the detail page.
I’d need to see the details of how this test was conducted before taking these conclusions as fact.
Hi Mike, thank you for your question.
This finding on quick views is part of a large qualitative usability test study on “Product Finding”. This qualitative study (“think-alound” protocol, in-lab testing, moderated) study had approx. 100 user/site sessions (so more than what most would normally use in qualitative moderated usability testing).
Do note this article only include parts of the findings, the full findings are available in: https://baymard.com/ecommerce-product-lists
As for testing tasks, we never instruct users in using particular parts of the interface or features. The users were given open-ended tasks like “find and purchase a spring jacket that you like” “find a camera you like and a matching case for it” “find a sleeping bag for cold weather”.
It’s when completing common product findings tasks like these that this sub-group users were observed to overlook the product details page entirely due to “quick views”, and overlooking it in a harmful way where they we never able to find the product information they were looking for which directly impact their willingness and ability to pruchase (e.g. the size of a sofa).
Hope this clarifies it.
consider also reading
“E-Commerce UX: What Information to Display in Product Listings (46% Get it Wrong)”
“Product Lists: Display Extra Information on Hover (76% Don’t)”
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 email@example.com