3 Pitfalls to Avoid if Implementing “Quick Views”

While “Quick Views” aren’t as popular as they once were, our most recent benchmark shows that 33% of sites still opt for using “Quick Views” within their products list (down from the previous 48% from our benchmark in 2015). Although our desktop research has consistently shown that “Quick Views” can pose various usability issues for users if poorly implemented, as seen in our previous article Product List Usability: Avoid ‘Quick View’ Overlays, our newer mobile research has uncovered some hidden benefits for the feature specific to the mobile context.

Often “Quick Views” — especially on desktop — are a symptom of deeper-rooted design issues with a site’s product list pages. In fact, when implemented poorly, “Quick Views” create for the user a series of usability issues that mitigate all of the possible benefits.

However, for mobile sites in particular, as users can’t hover a list item to see more information, Quick Views offer a way to provide extra information to the user without cluttering the product list or forcing users to visit the product details page — which can be an anxious journey for mobile users.

In this article, we’ll explore the UX test findings from our large-scale Baymard Premium UX research database, related to “Quick Views”, including:

• 3 “Quick View” issues to avoid on both desktop and mobile sites
• 3 ways “Quick Views” on mobile sites can enhance the user experience

3 “Quick View” Issues to Avoid on Both Desktop and Mobile Sites

On desktop sites, “Quick Views” generally aren’t necessary and typically do more harm than good. Yet there are some contexts in which a “Quick View” is necessary to provide, or may enhance users’ product list browsing experience.

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 be an acceptable solution — just realize that we’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.

However, if a “Quick View” is to be implemented on desktop or mobile it is crucial to address three issues that we consistently see users face during our large-scale testing:

1. Insufficiently prominent links to the product pages
2. Making the “Quick View” link too easy to tap by mistake
3. Failing to support “Back” button behavior expectations

1) Insufficiently Prominent Links to Product Pages

What’s the issue? We observe that some users will end up misinterpreting “Quick Views” for the site’s product pages on either desktop or mobile. Our previous desktop 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 with a “Quick View” that 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.

Furthermore, other users struggled with navigating to the product page from the “Quick View” when the path wasn’t sufficiently prominent but instead implemented as a small “Full Details” link. 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).

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 (e.g., the full product description, specification sheets, etc.), and may as a consequence discard perfectly suitable products simply because they cannot find key information about the product.

How should it be implemented? Make it obvious that the “Quick View” isn’t the product page: the product page link in the “Quick View” window must be immediately obvious so users know how to proceed to the product page. By enhancing the path to the product page, users are less likely to misinterpret the “Quick View” as the product page as they are made aware of its existence. (On mobile this is especially important as there is no hover state and thus no cursor change when hovering the link to the product page, as on desktop.).

Furthermore, to ensure users don’t mistake the “Quick View” for the product page, the product list should be visible behind the “Quick View”. The product list can be dimmed while users are in a “Quick View” (allowing users to focus on the “Quick View”), and sufficient space should be left around the “Quick View” to leave room for the product list to be clearly seen and easily tapped when users want to exit the “Quick View”.

2) Making the “Quick View” Link Easy to Tap by Mistake

What’s the issue? During testing, users in the product list 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 on desktop. During usability testing, many users 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. While we do advise that repetitive list elements are only shown on hover on desktop (see our article on Product Lists: Display Extra Information on Hover — 70% Don’t) the placement of the link or button is the issue here.

How should it be implemented? Ensure the link to the “Quick View” from the product list doesn’t impede users. For many users the primary click path from the product list to the product page is the list item thumbnails — users expect to be able to reach the product page by clicking the thumbnail on both desktop and mobile. It is therefore advisable, on desktop, not to place the “Quick View” button in the middle of the thumbnail, as some users will accidentally click it and may consequently perceive it as the product page. Instead consider placing it in the top or bottom of the list item element, or at the corner of the thumbnail, and only showing the element on hover.

On mobile, the “Quick View” button shouldn’t be part of the thumbnail at all, as the smaller interface makes it too easy to tap by mistake. “Quick View” buttons that were placed, for example, below the list item information or thumbnail performed better during testing.

3) Failing to Support Users’ “Back” Button Expectations

What’s the issue? Overlays such as “Quick Views” (as well as image gallery overlays, “Edit” overlays in checkout, etc.) are perceived by users as new pages, so when they tap the “Back” button they expect to be brought back to the previous page, which in their eyes would be product list when viewing a “Quick View”. On some sites, however, tapping the “Back” button brings users back beyond the product list — leaving users disoriented and frustrated that their “Back” button expectations weren’t met.

How should it be implemented? Clicking “Back” while viewing the “Quick View” should exit the “Quick View” and return the user to the product list.

3 Ways “Quick Views” on Mobile Sites Can Enhance the User Experience

As said, our research consistently shows that “Quick Views” are generally not needed on desktop, especially if list items are well designed. There are, however, certain usability issues specific to mobile product listing pages that can be alleviated by using “Quick Views”. These benefits are mitigated, however, if the three issues discussed above are present — at which point the drawbacks to implementing “Quick Views” begin to outweigh the benefits.

In particular, “Quick Views” on mobile sites often allow users who are browsing products in the product list to avoid having to visit the product details page — which can be a problematic trip for 3 reasons:

1. Users aren’t always returned to where they were in the product list when returning back from the product page
2. It often takes longer to go from the product list to the product page and back, compared to opening a “Quick View” in the product list
3. It can be perceived by many users as “more committing” to visit the product page, compared to opening a “Quick View”, when they’re still in the early stages of an exploratory browsing phase

1) Providing Users with Assurance That They Won’t Lose Their Place in the Product List

Not all sites return users to the same place in the product list as they had been before visiting the product page. During testing this proved extremely frustrating to users, who felt they were wasting their time just to get back to where they were in the product list.

User frustration is entirely understandable: imagine scrolling through a product list for a minute or two, finding a product of interest, visiting then returning from the product page — only to end up at the very beginning of the entire list. This scenario is even worse when “Load More” product loading schemas are in place but do not remember the users previous location within the product list (as we discuss in our External Article: Testing Pagination Against Infinite Scrolling and ‘Load More’ Buttons). Generally speaking, it is harder on mobile to scroll down through potentially many items to refind the correct spot.

With a “Quick View”, the need to visit the product page is reduced, so in turn fewer users will have issues with or worries about getting back to the right place in the product list.

2) Reducing the Impact of Slow-Loading Pages

The second issue with moving back-and-forth between product lists and product pages on mobile is that it was clear during testing that many mobile sites had significant speed issues, and some pages were extremely slow to load. Even without physical speed issues (i.e., page loading times) the actual journey from product list to product page and back again can feel like a long time, even if the page loading speed is relatively quick.

As a result, journeys back-and-forth between the product list and product pages could take quite awhile, especially if the list contained a lot of items. And if users are not returned to the right place in the list (as discussed in our previous point), extra time will be needed to scroll to that location.

On desktop, users can avoid having to reload product pages by opening product pages in new browser tabs without closing the product list, and returning to the first tab once finished on the product pages — a behavior observed for a subgroup of users during desktop testing. On the other hand, mobile users aren’t likely to try the “multiple tabs” approach — in fact none of the users in our most recent mobile testing sessions opened new tabs in this way.

With a “Quick View”, users can stay on the product list — and thus avoid having to reload the page.

3) More Strongly Supporting Users Who Are “Just Browsing”

For users in an early exploratory or browsing phase of their purchasing journey, being able to easily dip into more detailed product information without too much navigation or effort is very alluring. It’s akin to being at a store and looking at things in the aisles (the product list, on e-commerce stores) before picking something up (going to the product detail page) to find out more.

On mobile, the smaller viewport limits the amount of detail that can be shown in list items, and of course there is no option to show additional list items details using a hover option. In this way, users may find that their only option to find out more, or see an item in more detail, is by visiting the product page.

With the extra product details visible in mobile “Quick Views”, however, users may have enough information to make a decision to dismiss an item or explore it further — or add it to the cart, if that’s available in the “Quick View” — without visiting the product page. Or, as one test user said while using a “Quick View”, “[it’s] not as committing as visiting the product page”.

In a sense, “Quick Views” provide mobile users with what can be perceived as a less stressful and aggressive way of browsing the products. Many users during testing were grateful that “Quick Views” allowed them to “dip in and out” easily — whereas visiting product pages sometimes led to long odysseys to refind where they were in the product list, and it was sometimes difficult to get back on track with finding a suitable product.

Carefully Weigh the Benefits of and Drawbacks to Implementing “Quick Views”

If there is no existing “Quick View” on either a desktop or a mobile site then time and resources are generally better spent ensuring the product list and product list item design and implementation are high performing (as discussed in our articles on What Information to Display in Product Listings — 46% Get it Wrong and Product Lists: Display Extra Information on Hover — 70% Don’t).

However, if implementing a “Quick View” on a desktop or a mobile site, be sure to avoid the 3 pitfalls:

• It should be abundantly clear to all end users that the “Quick View” dialog is not a product page (by ensuring the link to the full product page in the “Quick View” is sufficiently prominent)
• The link to the “Quick View” in the product list item must not interfere with users’ ability to browse the product list or go to the product page (by not placing the link in the center of the list item thumbnail on desktop, and not placing it on the thumbnail at all on mobile)
• The “Back” button must function as users expect (and return them to the product list from the “Quick View” — not “two steps back”)

If these are avoided, “Quick Views” can make product browsing faster and easier for users on mobile devices, as “Quick Views” can

• Help users feel confident that they’ll keep their place in the product list
• Reduce the impact of slow-loading pages
• Reduce users’ perception that they’re “committing” to a product, and give them a less-stressful browsing experience

That said, whether or not to implement a “Quick View” should be carefully considered. While there are clear benefits for having a well-implemented “Quick View” on mobile, the benefits weren’t observed during desktop testing, where information can sometimes just as easily be accessed via hover. Furthermore it may be too resource intensive or complex to maintain a “Quick View” only on the mobile site, but not on the desktop site, and to ensure both avoid the 3 pitfalls discussed above. For many sites, having a high-performing list item design will be a better return on investment compared to developing, implementing, and maintaining a “Quick View”.

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.