UX Research Articles

Latest · Popular · See all

179 articles based on findings from our e-commerce usability research

Product List Usability: Avoid ‘Quick View’ Overlays

Christian Holst · September 1, 2015

‘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 usability test studies 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.

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 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

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.

Post a comment or Share:

User experience research, delivered twice a month

Join 12,000+ readers and get Baymard’s research articles by RSS feed or e-mail:

Due to spam, you need JavaScript to do that.

(1-click unsubscribe at any time)

Jessica Enders September 1, 2015 Reply to this comment

As always, a highly informative piece.

Any thoughts on an alternative to hover (eg for larger image) for touch devices?

Christian, Baymard Institute September 1, 2015 Reply to this comment

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).

Christian, Baymard Institute October 27, 2015 Reply to this comment

The followup article with our research findings for mouse hover and what to do on mobile is posted here:
http://baymard.com/blog/secondary-hover-information

Sandra September 2, 2015 Reply to this comment

Thanks! Just want to second the request for a future update with more details on how to approach this problem on mobile.

Christian, Baymard Institute October 27, 2015 Reply to this comment

Hi, we’ve now posted a followup article with our research findings for mouse hover and what to do on mobile:
http://baymard.com/blog/secondary-hover-information

AdrienR September 2, 2015 Reply to this comment

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?

Atopos42 September 8, 2015 Reply to this comment

Hi Christian,

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 :-)
https://resources.maxymiser.com/h/i/131725244-review-amazon-prime-now-s-user-experience

Christian, Baymard Institute October 27, 2015 Reply to this comment

Hi, we’ve now posted a followup article with our research findings for mouse hover and what to do on mobile:
http://baymard.com/blog/secondary-hover-information

Nathan February 3, 2016 Reply to this comment

Brilliant article and loads of points to think about – Thanks for your research into this

Abdulhameid March 3, 2016 Reply to this comment

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?

Steven Wakabayashi May 20, 2016 Reply to this comment

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.

Christian, Baymard Institute May 24, 2016 Reply to this comment

Yep, we’ve covered those here: http://baymard.com/blog/secondary-hover-information

Post a comment!

Close overlay