UX Best Practices: The All-Important “Add-to-Cart” Page

This is the sixth in a series of blog posts on UX best practices. The series shows how you can increase revenue by optimizing the customer experience — from page design to payment. Read the previous, UX Best Practices: The Checkout Flow. 

Retailers, if you needed proof of the prevalence of the plague of “cart abandonment,” look no further than Google, which returned more than 1.6 million search hits on the topic.

It’s hard to overstate the importance of the add-to-cart page, which consumers use as a tool for price comparisons, as a shopping list or wishlist, to save items for later, to refine and edit their product selections, and ultimately to make an online purchase. Unfortunately, it’s also one of the biggest chokepoints; Baymard Institute reports a 69% average documented abandonment rate.

The main goal for the design of the shopping cart page is to compel shoppers to click “Checkout.” Organic abandonment can’t be avoided, but optimizing elements within the shopping cart can – and do – impact conversion for customers who are ready to buy.

In this post, we will examine best practices for various elements in the shopping cart that are based on the review of thousands of websites, extensive heat mapping studies, Commerce Cloud benchmark data, and industry statistics. Remember, what works for one retailer may not work for another. A/B testing is always recommended before you implement permanent changes.

 

Make cart updates easy

Allowing the customer to update quantities and remove items from their cart may seem like a counterintuitive goal for an ecommerce business, but it is important shoppers (often fickle) can quickly and easily make changes to their cart. Quantity controls and remove buttons have some of the highest interaction rates in the cart because shoppers often put more items than they intend to purchase as they browse and compare products on your site.

Best Practice:

• Don’t require shoppers to click an “update” button when changing item quantity. Use a drop-down for quantity selection and an automated refresh that will update cart subtotals.
• Provide edit and remove buttons next to each item so shoppers can easily edit their cart.

Think about the promo code field

Promo codes are a double-edge sword: they can increase conversion but also increase abandoned cart rates. You’ve probably personally done it yourself – you get to the shopping cart and see the promo code entry field. You don’t have a coupon code so you leave the site to search for one. Chances are you get distracted or find a better deal elsewhere.

So how should retailers display promo code entry fields in the cart to reduce the risk of abandonment? The answer depends on your business and promotional strategy.

Highly Promotional
For brands that are highly promotional, it can make sense to keep the promo code entry field visible in the cart, exposing the entry field by default. Michaels stores, for example, is highly promotional and displays the promo code box by default and very visibly in the cart. This can create less confusion and reduce calls to customer service for help.

Somewhat Promotional
For these brands, it’s often best to de-emphasize promo code entry in the cart, using an expandable div (cell) and text link. This makes it possible for shoppers who have a code to easily use it, and will encourage fewer shoppers who don’t have a code to leave the site in search for one.

To minimize abandonment, vineyard vines uses a text link and expandable div to make the promo code entry field visible when the customer interacts with the link.

Non-Promotional
Brands that do not run promotion codes may want to consider removing the promo code entry field entirely from the cart to reduce unnecessary abandonment. Often times the field is still in the cart because it was part of the reference application and was mistakenly not removed prior to site launch.

Best Practice: Evaluate your promotional strategy to determine how visible your promo code entry field should be in the cart in order to balance customer usability and the risk of cart abandonment.

Emphasize security and guarantees

It’s important to reassure shoppers that their personal information and credit cards are protected. Why? Twenty percent of shoppers don’t purchase because they are concerned about security according to Baymard. Even the largest, most-trusted brands can benefit from labeling buttons with the words “secure checkout.” Through A/B testing, we’ve seen a 2.73% lift in conversion when locks and security badging were added to the cart and checkout.

In addition to security badging, you can boost consumer confidence with “risk-free shopping” messaging that includes a satisfaction guarantee and free returns if you offer them. The cart is a great place to remind customers of your value proposition and services, as shown below.

Best Practice: Use security badges and risk-free shopping messaging in the cart to boost shoppers confidence.

Prioritize checkout button placement

Placement of order summary and checkout buttons is important, and can help reduce friction in the cart. Commerce Cloud benchmarks indicate a 3.5% lift in conversion when the order summary and checkout button are above the fold in the cart. Data also indicates that when the checkout button resides with the order summary, like in the vineyard vines example below, checkout gets a 3 to 4 times higher click rate.

Best Practice:

• On desktop, place order summary and checkout buttons together in a right column so they are above the fold and easily accessible.
• On mobile, position order summary and checkout buttons at the top of the page and show the cart details below.
• Use a high contrast color for the checkout button. This call to action should be the most prominent on the page. On mobile, span the checkout button the entire width of the screen.

Include alternate payments

Payment options such as Paypal, Apple Pay, Android Pay, Amazon Pay, and Visa Wallet streamline checkout and provide extra security (not to mention more choices) for shoppers ultimately helping to increase conversion. Alternative payment options are especially beneficial on mobile where, according to PayPal, mobile sites can see as much as a 44% increase in conversion with Paypal.

To display payment options in the cart, simply add buttons for each payment type under the main checkout button. Be sure the main checkout button has prominence and is treated as the primary call to action.

Best Practice: To streamline checkout, consider alternate payment options and display them in the shopping cart under the main checkout button.

Provide fulfillment options

Before committing to checkout, customers want to know when they will receive their order and what their shipping, delivery, or store pickup options and associated costs will be.

Best Practice:

• Display shipping, pickup, and in-home freight delivery methods, along with costs and timeframes, using radio buttons next to each item in the shopping cart.
• Offer regular and priority shipping methods. Display shipping costs and timeframes for each option near the order subtotal.
• Clearly message free shipping promotions in the cart and use “approaching discount” messaging to communicate how close the customer is from reaching the free shipping threshold. Check out these examples from Pier 1.

Don’t forget the tax

Customers don’t like surprises, especially when it comes to their order total. Estimating sales tax in the cart in real-time can help decrease abandonment later in the checkout funnel. In a study by UPS and ComScore, 37% of consumers reported that they abandon carts when shipping and tax information is presented too late in the checkout process.

Tory Burch provides estimated sales tax in the cart with the ability for the customer to enter their zip code to recalculate tax for their location.

Save the shopping cart

According to eMarketer, 56% of shoppers use the shopping cart to hold or save items for later. We also know consumers shop and browse from multiple devices. Persistent shopping carts support these shopping behaviors by allowing customers to pick up where they left off when they return to the site. When logged in, the shopper can save their cart and access it across devices thus improving the shopping experience.

Some considerations when deciding how long to persist the cart:

• the average length of time between shopper sessions
• the timing of your abandoned cart email campaigns
• how quickly you turn inventory, and whether you want baskets to expire before customers return to baskets with items that are no longer available or are no longer sold at the same price

Best Practice: Review your settings for basket duration, and be sure you’re leaving shopping baskets intact for a length of time that makes sense for your business and accommodates the shopping behaviors of your multi-session shoppers.

There’s a lot to consider when it comes to add-to-cart optimization. Seemingly small design tweaks to elements on the page and added functionality can make a big difference in usability and conversion.

Still UX obsessed? Subscribe to our newsletter to stay on top of the latest and greatest.