Best Practices When Designing Quick View And Add-to-cart

June 17, 2024

February 17, 2022

•

6 min read

On a product list, a Quick view and Add-to-cart feature is of great help to facilitate browsing and making that purchase decision. That's why up to 33% of sites use it to enhance shopper experience according to Baymard.

The thing is, it's more than easy to go wrong with the Quick view and Add-to-cart feature within the product list. When poorly designed, it gives rise to a bunch of usability issues that mitigate all of the possible benefits.

In this article, we compile a list of common mistakes that site owners usually make when implementing Quick Views, then we also suggest some best practices so you don’t turn it into a rotten apple.

3 Common Issues with Quick Views to Avoid

Quick Views but not really “quick"

The idea behind Quick Views is to give online shoppers some extra context like different variant images, and some extra information to facilitate a purchase. When opening the Quick View, customers have a preview of the selected item without leaving the product listing page.

However, Quick View overlays can easily get stuffed with too many details, making it not a preview but a nearly full product page. In some cases, the entire Quick View takes up 2 or 3 viewports in height. Therefore, shoppers need to scroll down to see everything. This is not “quick" anymore.

There is a plethora of information inside this Quick View overlay. It's easy to misinterpret this with the product detail page. (Source: Baymard)

When the Quick Views are stuffed with information and use just a small button to direct shoppers to the product detail page, these two can be easily mistaken. The preview, which should arouse customers' interest so that they open the blockbuster, is actually stopping them from discovering the blockbuster.

How to fix it:

We suggest you put just a decent amount of information on the Quick View overlays. For visually-driven industries, for example, you want to put the product images in the spotlight. Other details about returns policy, frequently bought together, etc belong on the product page.

That's also the reason why you should make the “View product details" button prominent. When the path to the product page is clear, shoppers are less likely to confuse the two.

Moreover, when designing Quick View overlays, you should leave enough room for the product list to be clearly seen and easily tapped when users want to close the Quick View.

Wrong position for Quick View button

The position of the Quick View button is crucial. As it's just a preview, you don't want it to take the spotlight away from the product page. Sadly, many e-commerce websites make the mistake of placing too much emphasis on the Quick View button.

In the example below, this button is placed in the middle of the thumbnail, which increases the chance that users mistakenly click open the Quick View overlay while trying to get to the product page. We all expect to visit the detailed page by clicking the thumbnail.

(Source: Baymard)

Things can get even worse if customers really think the Quick View is the product detail page. They may deem that there is a shortage of product information on your site and decide to leave.

How to fix it:

It's advised to have the Quick View button at the top or bottom of the list item element, or in the corner of the thumbnail, and only show the element on hover. This button can be wrapped in an eye-catching icon instead of one that is of the same size as the “View details” button. On a smaller screen size like in mobile devices, this button should be separated from the thumbnail.

Target placed the link to the “Quick View” (“Choose options”) beside the thumbnail to reduce the likelihood of mistakenly tapping on mobile.

More design tips to discover:

Fail to meet Exit expectations

There are several ways from which users expect to exit the Quick View overlays, for example: clicking the Close (x) button or the “Back" button, tapping on the product list. However, many sites don't allow them to do that.

Users see overlays such as "Quick Views" as new pages, thus when they hit the "Back" button, they expect to be sent back to the previous page, which in their eyes would be the product list. However, on certain websites, pressing the "Back" button takes customers past the product list, leaving them puzzled and irritated because their "Back" button expectations were not realized.

How to fix it:

To avoid misunderstandings, we recommend you use the Close (x) button instead of the “Back" button. Also, allow exiting Quick View overlays by clicking on the product list in the background.

2 more ways to enhance usability with Quick Views and Add-to-cart

Have an Add-to-cart button on the Quick View overlays

In browsing mode, going back and forth between a collection or category and the product page is such a pain. As a result, window shoppers love to use Quick View on e-commerce stores before picking something to find out more about. However, these browsers can convert at any time so an Add-to-cart button beside View product details is beneficial.

With the additional product data shown in Quick View, customers may have enough information to decide whether to discard an item or investigate it further — or add it to the cart, if that option is provided.

A study by Baymard also pointed out that Quick View provided mobile customers with a less stressful and aggressive approach to product discovery. During testing, several users expressed gratitude for the ability to "dip in and out" effortlessly. Viewing product pages occasionally resulted in long odysseys to refind where they were in the product list. It was sometimes difficult to get back on track with selecting a suitable product.

An additional “Add to bag” button on Quick View overlay can boost your conversion. (Source: Baymard)

More tips on cart abandonment:

Consider using a mini shopping cart

A mini shopping cart is a tiny pop-up that shows up in the cart icon on your site whenever a product is added. It usually comes with a Close button or is automatically closed when the user scrolls down and continues shopping.

The mini cart is small yet powerful as it contains most of the important information and actions. Customers can see the items with a subtotal, then go to the full cart page to edit the product number, option, variant, etc. There are also buttons to simply remove or check out.

While browsing with Quick View, this mini shopping cart doesn't impede the users with page reloads. They can quickly choose the right option and add it to the shopping bag on the Quick View overlay, check the cart information with the mini cart, and keep going with the product list.

Update your Quick View and Cart settings with Boost Product Filter & Search

Now that you know some best practices when implementing Quick View, how can you make changes to it?

If you are a Boost user, luckily for you, we have rolled out a new setting that allows you to update Quick View settings in an instant. You can find it under Theme on the top menu.

We provide various styles for Quick View buttons. You can also change the background color, the text color, the hover effect, etc.

Try Free Now

Scroll down a bit further, you'll find the setting for the Add-to-cart button. Here you can enable the mini cart to give customers a better experience on-site. Each option has a preview to let you know how it works.

Watch this video to know more:

Try out these Quick View best practices and share with us your revenue growth on Facebook, Twitter, or Linkedin. We'll be back soon!

Trusted by fast-growing brands

Start your 21-day free trial

Get started

Ellie Ho

•

Content Marketing Specialist

February 17, 2022

•

6 min read

There's More

Best Practices When Designing Quick View And Add-to-cart

Shopping shouldn’t feel like a chore

Start your 21-day free trial

Related Posts

Plan Your eCommerce With AI: Strategies For Online Businesses To Try

Top 5 Strategies to Harness Social Commerce for BFCM

4 Tips To Prep For Year-end Sales With Boost's Analytics