Optimizing Shopping Cart Page Design and Usability

Shopping cart abandonment is top-of-mind for everyone in ecommerce. According to the Listrak Index, which reports daily average cart abandonment rates, cart abandonment can spike as high as 85% (peaking July 16, 2016).

While you can’t control organic abandonment from customers who truly aren’t ready to buy, (for example, using the cart as a wishlist or price comparison shopping) your cart page’s design, features and functionality impact your ability to convert ready-to-buy customers.

Must-have shopping cart page features

Some features are just table-stakes or online shops:

  • Product thumbnail images (very useful when the cart contains more than one item)
  • Product details
  • Line item quantity selected, price and any applicable sale prices
  • Editing tools (remove, update quantity)
  • Cart subtotal and total
  • Estimated shipping and tax charges (it’s OK to say TBD in checkout)
  • Customer service telephone number
  • Continue shopping button
  • Checkout button

There are few exceptions, such as digital goods and subscriptions which don’t always have product images (like mp3 files) and don’t charge for shipping.

Optional shopping cart page features

While not required, many of the following features can improve customer experience and conversion:

  • Confirm stock availability
  • Move to wishlist / save for later
  • Coupon code box
  • Cart carrots (you’re $X.xx away from free shipping)
  • Shipping and tax calculator
  • Alternative shipping option selection
  • Alternative payment options
  • Save or email cart link
  • Cross-sells and upsells
  • Live chat
  • Security badges
  • Customer testimonials
  • Add free samples
  • Guarantee and other value proposition copy
  • Links to customer service policies

Which features help curb cart abandonment, and what are the best practices for implementing them?

Reducing cart abandonment

Why customers abandon carts

Not all abandoned carts can be blamed on UX issues. The top reasons for abandonment according to a study by UPS and ComScore are higher-than-expected shipping costs (58%), comparison shopping (57%) and the intent to simply purchase later (55%).

abandoned-cart-reasons

It’s clear that usability issues are typically not the primary cause of abandonment, at least when polled consumers are asked to recall their own reasons for ditching their carts. However, keep in mind these are self-reported, average metrics. If your shopping cart review page has UX issues that increase cart abandonment, you could be losing thousands to hundreds of thousands of dollars in revenue per year.

How can you design your shopping cart page to reduce abandonment and increase conversion?

Improving shopping cart page UX

Locating the cart

The first step to optimizing the shopping cart page is helping customers locate the cart link. For years, online shoppers have been conditioned to look for the cart icon in the top right corner of an ecommerce site, and it’s wise to stick to this convention. But many stores I’ve tested make it very difficult to spot the cart icon.

dungarees-cart-icon

Avoid placing cart links in dark bars spanning the top of the page. Our brains scan white (or light) space looking for site functions, and it’s very easy to not see anything in a skinny bar. In the examples above and below, surrounding calls to action are much more prominent and crowd out the cart.

cart-location

The trend towards responsive design has unwittingly caused usability issues on larger screens and device orientations.

responsive-cart-icons

On the “skinny screen,” top-right corner icon links are relatively more prominent, but scaled up they become virtually invisible.

For desktop designs, it’s safest to stick with an obvious cart and checkout call to action.

west-elm-bold-cart-cta

If you want to use an icon with a responsive design, make sure it “pops” with a contrasting color.

davids-tea-cart

A pop of color when there are items in the cart also attracts attention, and reminds returning visitors you’re still holding their cart contents.

honest-cart-cta

Calls to action

In the cart, your main call to action is the checkout button. While most modern cart designs use a big, colorful checkout button, many still style competing calls to action without a visual hierarchy, cluttering the design and in some cases, confusing customers.

call-to-action-priority-styling

A well-designed cart page where secondary calls to action are styled with different colors and sizing to the Checkout button

Content and design elements that surround cart buttons can also compete with and distract from your main call-to-action.

visual-clutter

Graphic elements surrounding the cart summary box compete with the Checkout button

Petedge places call to action at the top of the page, but doesn’t repeat below near the price where people expect to see it. This becomes even more of an issue the larger the cart is as cart contents push the “total” much farther from the checkout button, also white space is where the eye naturally gravitates

petedge-cart-page

The checkout button is placed too far from the order total

Color and size visibility also matters. Burt’s Bees’ Continue Shopping button is larger (and thus more prominent) than Checkout, and both are the same color as the PayPal checkout option, creating three competing calls to action.

yellow-buttons

Primary call to action styled with the same color and shape as secondary calls to action, and even smaller than one secondary CTA

The responsive design trend has created a brand new cart abandonment issue, calls to action rearrange and resize themselves, and often poorly.

For example, Airsplat has several secondary calls to action that compete with the checkout button. This is sub-optimal on desktop, but even worse on mobile screens.

airsplat-cart

Secondary calls to action clutter the cart page and compete with primary call to action

The checkout button responsively resizes on mobile devices to span the width of the screen, and no longer looks like a button or clickable element.

airsplat-responsive-cart

Fusion Beads has the same issue.

fusion-cart-ctas

Styling all three calls-to-action with the same size, color and shape violates best practice, and as they scale down for mobile and span the width of the screen and become touch-activated, it’s easy for the customer to tap the wrong button.

fusion-responsive-cart

Responsive content that “reflows” can also cause issues.

pink-pill-cart

Sally Beauty’s Checkout button floats to the top, with secondary calls to action only appearing below the cart total (where customers conventionally expect a proceed to checkout link).

sally-responsive-cart

Checkout buttons should always appear in the bottom right of the cart summary, proximal to the order total. Sporting Life only uses a PayPal button at the top right (it’s its only payment option). Not only is placement problematic (it appears there is no checkout option at all), a PayPal button is not universally recognized by customers as a Checkout link.

sportinglife-cta-visibility

When Sporting Life’s responsive design exacerbates this problem, slotting the coupon box where one would expect to find a checkout button. This is a negative call to action as its a call to abandonment to seek out a coupon code in Google – a disastrous form of friction on mobile devices where returning to a browser window is more difficult.

sportinglife-mobile-cart

Customers also don’t always understand what Express Checkout (log into your account) means. Express Checkout can be confused with Guest Checkout (implied as the faster option) and this button is often mis-clicked with that expectation, only to dump the customer on the log in screen she wanted to avoid.

express-checkout

I advise against using Express Checkout buttons in cart, and instead moving everyone to step one of your checkout, whether you choose a Sign In / Checkout As Guest gate or jump right into the checkout flow with an option to sign in to access saved information.

pay-with-amazon

You also want to be very careful using “Pay With Amazon” buttons, which allow Amazon account holders to pay with their Amazon wallets. Reminding customers about your largest competitor is conversion suicide. And if you’re like most online retailers, Amazon offers the same or similar products as your shop.

Pre-checkout tax and shipping estimates

Many ecommerce sites lose customers at the cart page because they can’t preview their final charges before initiating checkout (and sharing their information in the process). In the UPS and ComScore study, 37% reported they abandon carts when this information is presented too late in the checkout process, and pre-checkout calculators can mitigate this abandonment.

Less than half of ecommerce sites offer a pre-checkout shipping feature, and of those that do, they are often overlooked if they’re not placed in the customer’s typical eyeflow path.

left-side-shipping

Shipping calculators styled in boxes or placed to the left of the cart are harder to spot as a customer scans the right side to see estimated total

calc-shipping-button

Users don’t always “see” buttons

The safest bet is to place the shipping calculator inline where the customer reviews his order total.

inline-shipping-tool

Shipping estimator is a clear open field placed inline in the order total summary

shipping-estimate

Shipping estimate is placed within a customer’s order review eyeflow with no distracting content

Autoplicity uses a text link “Estimate Shipping” (instead of Estimated Shipping) which the customer can click to reveal the calculator.

ship-estimate-1

This method reduces visual clutter without sacrificing the value add of the tool, revealing it only when the customer chooses to interact with it.

ship-estimate-2

Coupon fields

Coupon code fields are a call to action, whether your customer has been referred with a code or not.

When presented inline, they have the same effect as an inline shipping estimate – it attracts attention!

promo-code-strong

Rather than encouraging your customer to abandon cart to score a coupon through Google (and paying out an affiliate who never referred the sale in addition to shaving profit off the order), minimize the visibility of the coupon box. Don’t worry, customers who already have a coupon code will actively look for it.

One way to minimize the coupon box is to make it a text link, instead of an open field that screams “fill me in!”

subtle-inline-promo-code

Or, use a “ghost button” — a white-on-white link that doesn’t draw much attention to itself.

subtle-promo-collapsed

Suggesting that only special snowflakes get coupon codes (i.e. subscribed to your email list) can also dissuade promo code sniping, and could build your email list to boot. However, keep in mind that a customer may sign up for email and defer checking out until a coupon arrives in the inbox, which could squash the sale.

emailed-promo-code

Another tactic is to place the coupon box in checkout instead of the cart. Ideally your coupon box is as deep in the flow as possible, as customers are less likely to abandon a checkout they’ve already invested effort into to find a coupon than at the cart stage.

coupon-in-checkout-rei

Some ecommerce sites suppress the coupon box with a p-code rule, only showing it when a customer has been referred by an affiliate, email or other campaign with a coupon code. If your ecommerce platform supports this, it can save a percentage of abandoned carts and curb unnecessary coupon use.

Supporting offline and cross-device conversion

The cart page is the perfect point to prominently display customer support information. To help customer service reps access a customer’s cart, include a cart ID number. This also helps you reconcile telephone conversions to online marketing campaigns and other analytics data.

mention-cart-id-phone

To support research online-purchase offline and cross-device shopping, consider an email-your-cart function.

save-cart-cta

Old Navy has a prominent “Save my Bag” call-to-action:

save-your-bag-old-navy-cart

However, this feature requires an email address and password (with option to create an account). The simple email-only option removes a layer of friction for shoppers without an existing account.

save-your-bag-old-navy

Persuasion

Solid usability is only half the battle, carts that persuade save more sales.

Shipping offers

It’s well known that customers looooove free shipping, and according to one study, 93% of online buyers say they’ll buy more products if free shipping is offered, 44% will abandon their cart if shipping costs are too high, and 73% of say unconditional free shipping is “critical” to their purchase decision.

Free shipping may be the single most important factor to your conversion rate, and if you do offer free shipping, it’s critical that your cart makes it very clear you do.

As with shipping calculators, if your free shipping call-out appears below the fold, or otherwise outside of your customer’s eyeflow, it may have no effect.

free-shipping-obvious

While the above cart calls out free shipping, it lists $0.00 as estimated shipping. This doesn’t assure the customer that they’ve already qualified for free shipping, and this uncertainty could cause abandonment. Make it overly obvious when a customer has reached your free shipping threshold. Use red, and replace $0.00 with FREE, like Zappos:

zappos-free-ship

When a cart falls short of your free shipping minimum, entice customers to keep spending with a colorful callout in the order total summary:

colored-inline-carrot

CVS and Toys R Us get more graphic, showing how close the customer is to free shipping visually:

graphic-carrot

toysrus-cart-carrot

If you can’t offer free shipping, consider another incentive like a free gift or free samples with minimum purchase.

special-offer-carrot

Point of action assurances

There are several ways you can boost a shopper’s confidence in buying from your site (and not Amazon or a competitor).

These FUD-busting tactics (fears, uncertainties and doubts) are called point of action assurances, and take the form of guarantees, customer testimonials, security seals and other value propositions.

point-of-action-assurances

Value propositions displayed in the cart tell customers why they can “shop with confidence” on your site

If you’re paying for a trust seal like Norton or McAfee, don’t hide them in header or footer menus. Keep them as close to the point of anxiety as possible (the cart total and checkout button). Don’t lump them in with other icons like accepted payment options if you want them to be noticed.

poaa-norton

Smaller sites may benefit from showing testimonials, such as from the TrustPilot plug-in.

reviews-cart

However, be careful with running third party scripts in your cart, which can slow down performance (which increases abandonment), especially on devices connected to slow wireless hotspots.

Basket building

Adding products to cart is the strongest indicator of purchase intent a customer can give you, don’t miss your opportunity to cross-sell and build your average order value. This tactic deserves its own chapter, coming up next on Ecommerce Illustrated. Have you subscribed?

Need help with checkout optimization? Drop me a line.

Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *