Last week in Checkout Optimization: Are You Testing The Wrong Thing?, we looked at the top reasons customers report why they abandoned their last shopping cart. You'll recall the top reasons had nothing to do with web usability and design, but the customer's willingness to complete the purchase at that given time - including "sticker shock," a desire to comparison shop, or they simply were not ready to purchase yet. We discussed ways each FUD (fear, uncertainty and doubt) could be addressed on your shopping cart page, with a promise to cover the design and usability goodies as a follow up (i.e. this post!)
While there's no recipe for an "ideal" shopping cart page, there are elements I look for when reviewing a site - both "must haves" and "nice-to-haves."
Must Have Shopping Cart Page Features
1. Provide large, clear thumbnail images
The cart summary is the customer's last review before initiating checkout. The customer *should* review the cart for accuracy, however some will only scan (I'm guilty of the lazy review and that's how I ended up with a used copy of Barbara Walters' memoirs)!
Believe me, customers will blame you for an error before considering they may have made the mistake. I wrote Alibris about the "error" before realizing I was the dunce. But this could have been avoided if the cart summary showed boldly each product thumbnail and description in my cart. For some e-shops, color will also be important in the review. For software that often has several SKUs with the same thumbnail image, it's important to clearly highlight the differentiating attribute (e.g. 1 year subscription vs. 3 year, student edition, etc.)
This cart is difficult to review without clicking on individual products:
The Apple Store shows a thumbnail, but does not indicate what color iPod I'm ordering.
Eddie Bauer shows clear and large images (you can even zoom!)
2. Include product link, price and quantity selected
Don't laugh. These are important!
3. Show stock availability
You may think this is unnecessary, especially if you disable cart buttons for out-of-stock products. But we know a portion of your customers will "save" items in cart and return at a later time. It's important to assure customers the item is still available, and notify when items are unavailable.
Etsy makes it clear when items from its marketplace are no longer available, with options to move to favorites (wish list), remove or contact the seller. Similarly, an ecommerce site could add a "notify me when back in stock" link in lieu of contact seller.
Staples includes cross-sells below unavailable products. (This should be tested, as it may also reduce conversion):
4. Provide clear editing tools (update quantity and remove)
It's not enough to have editing tools, they must be intuitive and "easy to spot."
Avoid little icons that are difficult to interpret, like circular arrows to "recalculate" or refresh. Text links "Remove" and "Update" are more clear.
Avoid placing editing buttons out of the content space where the editing occurs:
5. Provide a visible telephone number
Always provide a second option if there's trouble with Web checkout. Worried about attribution? Some sites use vanity toll-free numbers to track conversions referred from paid search, direct type-ins, affiliates, etc.
6. Offer clear, non-competing calls to action
Avoid styling your "Proceed to Checkout" and "Continue Shopping" links the same way. Prioritize your calls to action with "Proceed to Checkout" more prominent.
7. Show calls to action above the fold
The more items in the cart, the lower down your Checkout button sinks. Including calls to action above and below the order details ensures it's noticed. It doesn't hurt to duplicate them. (See Walmart example above).
I also recommend keeping the Checkout button in the "content area" or white space of the order review. Many large sites including Apple push it off to the right hand side with a mini-cart, which may not be where customers expect it.
8. Include point of action assurances
Point of action assurances (PAAs) should appear proximal to the call to action - not way up in the header or down in the footer.
Beyond the security seal, other PAAs include privacy links, return policies, "shop with confidence" boxes, or taglines below the Checkout button like Amazon's "you can always remove it later" (which, has apparently since been removed).
9. Minimize your coupon code box
Showing a coupon box is an invitation for the customer to go deal hunting. This not only eats at your margin by discounting the cart, but you will also be shelling out commissions to affiliates who did not refer the sale.
There are a few ways to handle this issue:
1. Suppress the coupon box unless the customer has been referred by an email or affiliate campaign with a coupon code. You have the choice to auto-apply the promo or show the box.
2. Link to your own coupons page
3. Re-label the field as "Voucher" or "Gift Certificate"
4. Create an inconvenient hurdle to use the code, such as log in.
10. Pre-checkout tax and shipping calculation
A OneUpWeb survey found that 95.5% of customers expected to have price and shipping clearly stated, and 59% expect a "total cost" (tax + shipping + anything else) on an ecommerce site. We can safely assume this means pre-checkout, as nobody wants to get through a sign in page and shipping/billing form before he/she can judge whether a price is acceptable.
An interesting observation is the 10 highest converting ecommerce sites, for the most part, do not provide pre-checkout tax and shipping estimate. My opinion is to err on the side of meeting customer expectations. There are many reasons why these sites have astronomical conversion rates (exclusive/niche product, strong catalog history, distributor network, etc) which afford them strong conversion - it doesn't come down to a common variable. (What do you think? Share in the comments).
Nice-to-Have Shopping Cart Page Features
11. Live chat
If you have a telephone number, a customer in distress will reach out. But having a live chat link or pro-active prompt is great, too. Today's email/texting culture may prefer this method.
12. Move to wishlist
For customers who encounter "sticker shock," or a total that's above what they can afford, whittling down items in the cart is a common behavior. Make this easy by allowing customers to move items to a wishlist. Amazon keeps items moved from cart to wishlist appended to the cart summary, so customers are reminded the next time they're ready to purchase.
13. Display payment options
Some folks only want to shop with PayPal, Google Checkout, Amex, etc. Showing icons can provide reassurance to these customers, but they can also compete as calls-to-action (depending on how they are displayed). One way to handle a large number of acceptable payment types is to provide a link that expands with a click or mouseover to show alternatives for those it's important to, and suppressing it for folks who don't care.
14. Quick Look cart editing
Extending the Quick Look feature to the cart can help a customer re-configure their selection without leaving the cart.
For complex sales that require configuration (mobile phone plus package and accessories, for example) in-line editing ability (expand and collapse details with an AJAX plus-box) is a nice feature.
Reminding customers that they are $X away from (free shipping, free gift, etc) could improve your items per order and average order value.
While not essential to conversion (and some may argue, may lower conversion), cross-sells and upsells in the cart can improve your IPO and AOV also. (This is a major opportunity for ongoing testing - testing the number of recommendations, the type of associations, price points, placements, interstitials etc).
When I review a site, I look for areas where the cross-sell/upsell experience can be improved - not just a tick mark for "has/does not have."
16. Gift options
Not only a nice upsell, but great customer service if you offer it.
17. Print/save cart
Certain purchase contexts make sense to print or save carts. For example, a large B2B purchase, or a cross-channel research online, purchase offline sale like a home improvement project.
Testing your cart
The presence of these elements are not the end of shopping cart optimization. It's also key how they are presented, and how your cart page works as a whole. This list is a guideline to show you what you may be missing, but ongoing testing is the best way to continue to learn what works best for you.
Looking for help with A/B and multivariate testing? Contact the Elastic Path consulting team at firstname.lastname@example.org to learn how our conversion optimization services can improve your business results.