Optimizing Shopping Cart Page Design and Usability
Hey friends! This article was originally published on EcommerceIllustrated in 2016 - some data and statistics may be old but the theory stands! Will update with newer data soon.
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%.
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 simply table-stakes or online shops, including:?
Of course, 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. Commerce is contextual!
Optional shopping cart page features
While not required, many of the following features can improve customer experience and conversion:
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%).?
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.?
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.
The trend towards responsive design has unwittingly caused usability issues on larger screens and device orientations.
On the “skinny screen,” top-right corner icon links are relatively more prominent, but scaled up, they become virtually invisible (can you spot them above?)
For desktop designs, it’s safest to stick with an obvious cart and checkout call to action.
If you want to use an icon with a responsive design, make sure it “pops” with a contrasting color.
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.?
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.
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.
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
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.
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.
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.
Fusion Beads has the same issue.
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.
Responsive content that “reflows” can also cause issues.?
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).
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.
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.
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.
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.
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.
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
Users don’t always “see” buttons
The safest bet is to place the shipping calculator inline where the customer reviews his order total.
Shipping estimator is a clear open field placed inline in the order total summary
Shipping estimate is placed within a customer’s order review eyeflow with no distracting content
Autoplicity uses a text link “Estimate Shipping” which the customer can click to reveal the calculator.?
This method reduces visual clutter without sacrificing the value add of the tool, revealing it only when the customer chooses to interact with it.
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!
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!”
Or, use a “ghost button” -- a white-on-white link that doesn’t draw much attention to itself.
Suggesting that only special customers 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.
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.
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.
To support research online-purchase offline and cross-device shopping, consider an email-your-cart function.
Old Navy has a prominent “Save my Bag” call-to-action:
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.
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.?
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:
When a cart falls short of your free shipping minimum, entice customers to keep spending with a colorful callout in the order total summary:
CVS and Toys R Us get more graphic, showing how close the customer is to free shipping visually:
If you can’t offer free shipping, consider another incentive like a free gift or free samples with minimum purchase.
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.
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.
Smaller sites may benefit from showing testimonials, such as from the TrustPilot plug-in.?
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 post, coming up soon!
To read more in this series, search #ecomillustrated in LinkedIn search box
Strategic Partnerships & Project Management | Growth Strategy Architect | OMS Consulting Specialist
3 年Great points and insightful post. One more point that we can consider here: brands should not redirect customers to the cart page immediately after they have added products to the cart. instead, let them know the product was added to the cart but let them continue to browse the site and add more products to their cart. By not redirecting customers to the cart, brands have seen average order value grow by 4%.
Responsable Export ???? ???? ???? ? élastiques Bandex pour l'Agriculture, l'Agroalimentaire et l'Industrie.
3 年I just wanted to comment that I always found your blog articles very interesting and useful. Great great job you did!