If your mobile cart abandonment rate is higher than desktop, don’t fret. It’s common for customers in research mode to use mobile carts simply to bookmark items they like, and it’s well known that smartphone conversion rates lag those of larger screens. You can’t convert a customer who’s not ready to buy, or who prefers completing their sale through another means with a cart’s design.
But mobile commerce is steadily growing, and the cart page is a critical touchpoint in the mobile journey. With less space to display necessary cart contents, it’s critical to support the customer from add-to-cart through to Checkout with touch-friendly configuration tools and minimal distractions.
Add to Cart
There are three common design patterns for confirming an item has been added to cart: inline feedback, the rolling “mini cart,” lightbox overlay and direct-to-cart. Alternatively, a customer can be taken directly to the cart summary page after each “Add to Cart,” but this behavior is rare amongst the Internet Retailer Top 1000.
Inline feedback keeps the customer on the product page, and is the most subtle approach.
Yoox (below, left) updates its Add to Cart button with the text “go to shopping bag.” The genius of this approach is the user is likely still watching that cart button – the message is front and center and hard to miss. (The negative is “go to shopping bag” doesn’t encourage continuing the shopping journey to discover more products).
ToolFetch (above, right) displays a very subtle banner indicating that the cart has been updated. Unfortunately its low-contrasting subtlety may not always be noticed.
Coleman’s inline notification banner (below) is more obvious, using a bright color against its clean, white theme. However, Coleman fails to update the cart quantity, a useful feature that helps customers keep track of their carts as they build them, and more importantly, reassures customers on returning visits that their cart contents remain.
The rolling mini cart expands to reveal the last added product with thumbnail image, quantity and pricing details, order total and a Checkout button, appearing for a few moments then rolling away. The mini cart serves as a shortcut to the Checkout process, allowing the customer to bypass the cart page.
The challenge with mini carts on mobile is they accommodate one to three products before they “break.” Most mobile commerce sites at this point present the last products added, but this can be problematic.
For example, the Godiva cart containing five items displays only two (below, right). A returning customer may not realize items were left from a previous visit, or may not understand why the cart is only showing two products (not noticing the cart icon displaying a quantity of five).
Many mini carts use Checkout buttons instead of View Cart (which may direct customers to either the cart or first step of Checkout). When more items exist in the cart than are displayed in the mini cart summary, it’s dangerous to bypass the cart review step – especially when the cart is used as a “bookmarking” tool for comparing several products before deciding on a final order (a very common customer behavior).
Our recommendation is to show a lightbox with two calls to action: continue shopping, and go to shopping cart. This provides clear feedback that the Add to Cart action was successful, and directs the customer to the cart to review their order, versus sending them directly to the checkout flow.
OrangeOnions (below, left) calls out the name of the product last added, which provides additional assurance, but places the call-to-action buttons a bit too close together. Ideally, buttons are spaced out to clearly appear as clickable buttons, like Ace Hardware’s (below, right).
Avoid using “Checkout Now” or “Checkout” labels, even if the buttons link to the cart review page. “View Cart,” “Go to Cart” and “Go to Shopping Cart” assure the customer they can review their order before committing to buy.
Cross-selling in the mini cart
Another advantage of the lightbox approach is the ability to include product recommendations within them, like Dillard’s.
Cart Review Page
Once your customer’s in the cart, it doesn’t mean the shopping journey’s over.
The cart is often used as a favorites list, and cart review pages must support editing and refinement. It’s the step of the journey where the customer decides if he’s ready to part with his money, and how much of it he’s willing to spend. The point when she ponders if she’s found everything she wants, or if she should find one more thing to qualify for free shipping. It’s your opportunity to cross-sell and upsell based on existing purchase intent.
And it’s all gotta look good for the small screen, and be finger-friendly.
Button and link styling
An optimized cart page prioritizes calls-to-action and styles them accordingly. Size, color, shape, placement and labels all reflect the relative importance of each button and link.
Avoid styling true calls-to-action (continue shopping and checkout) with utility links like “Remove,” “Update,” and “Clear Cart.” Your primary actions should be styled more prominently, and be visually distinct from secondary links.
In the examples below, primary and secondary links are styled the same, forcing the customer to read each label very carefully. It’s also critical to make the ultimate call-to-action — proceed to checkout — visually prominent, or sacrifice conversion rates and revenue.
It’s also important to consider which buttons should really be links. For example, many sites use a “Continue Shopping” text link instead of a button to make “Checkout” more prominent. Cart editing tools are better to show as text links than buttons, both for clarity and to reduce distraction from more important elements.
It’s also a better idea to place “Update Cart” and “Move to Wishlist” links closer to the products being edited, rather than after the Checkout button.
Be careful when presenting multiple Checkout options (like PayPal and Amazon’s bright, bold, yellow buttons shaped like buttons). These can visually compete with your default checkout button — especially if your button is black, rectangular and spans the width of the screen.
Checkout placement
Should you place the Checkout button at the top or bottom of the page?
This is a great case for A/B testing. Many mobile commerce sites offer both for good measure.
Other mobile sites leverage pinned buttons, keeping the primary call to action in top view no matter how long the cart page scrolls.
Be careful that pinned buttons look like buttons instead of page titles. The rectangular button above may be mistaken as a header for the checkout process.
Button and link labels
Labels can persuade or dissuade customers from taking the right action. ABC – Always Be Clear.
If you’re going to get creative and deviate from conventional labels, ensure you A/B test them, as our brains have been conditioned to scan for trigger words like “Checkout.”
Leverage cart carrots
Cart “carrots” tease shoppers about the perks they’re oh-so-close to.
HobbyTron (below, left) shows an inline callout with the amount needed to qualify for free ground shipping. Office Depot (below, right) uses a speech bubble.
Both sites could experiment with adding “Continue Shopping” links proximal to their cart carrots.
Product images
Because mobile shoppers often throw everything they’re considering into the cart (to be winnowed later), and mobile shopping journeys can span several visits, it’s important that the cart provides enough visual context for the customer to recall the item added to cart, and to evaluate it one final time before committing to buy.
Don’t force customers to rely on product names when reviewing their order.
Carts that shrink product images to icon proportions are only slightly better than no images at all.
There is a trade-off between super-sized images and cart usability — the bigger the images, the more scrolling the customer must do. Both LampsPlus (below, left) and Office Depot (below, right) display images that are appropriately sized for their purchase context.
For some industries like fashion and jewelry, even larger images will perform better due to pictures’ influence on purchase decisions (more initiated checkouts, fewer cart page exits).
Cart editing
Because accidental activation happens more often with touch interfaces, it’s important that cart editing links are properly spaced from each other. With vertical stacking (below, left) it’s easier to accidentally activate the wrong link, versus side-by-side placement (below, right).
Quantity edit controls have a few common usability issues. When presented as drop-down menus, they can be programmed to call up a spinner menu (below, left) or a keyboard (below, right).
When calling a keyboard, don’t pull up the alphabet (above, right)! Pull the proper numeric keyboard (below).
A second boo-boo that retailers commonly commit is with cursor position. Always ensure the cursor appears to the right of the number (above, right) rather than the left (above, left) which requires the customer to reposition the cursor to the right – a challenge on touch screens.
Even better, ditch the drop-downs and use inline adjustment. This pattern allows customers to configure quantity directly on the cart page with + and – controls.
Cross-device access
Old Navy uses a clever tactic to encourage mobile shoppers to save their bags to access on their desktop or tablets – a very strong call to action to Sign In and save the cart.
This allows Old Navy to send cart recovery reminders via email, and for the customer to easily accessed saved content on any of their devices. While anyone with an account on most ecommerce sites could achieve the same simply by logging in at any time during their visit, this call to action actually prompts the customer who may not think to do so. It also provides some assurance that cart contents will be accessible at a later time.
Coupon codes
The presence of a coupon code box in the cart can trigger a customer to look for a discount code on a coupon affiliate site. Not only does this eat into your margins, but you consequently end up paying a commission to an affiliate that didn’t refer the sale and train the customer to always use a coupon.
For mobile users, this is a more tedious process than for desktop users, but it’s still a negative call to action. You need to provide it for those that have promo codes to use, but you don’t want to call undue attention to it, as a successful action means less revenue for your business.
The way you style your coupon box or link matters. Open fields with juicy, candy-like buttons draw attention more than subtle links (below, left). Colored boxes around open promo code fields also draw more attention to the coupon box (below, right).
One way to make the coupon box less conspicuous is to fill it with text. It’s the empty fields that scream “stop and pay attention to me!”
Another tactic is to collapse the coupon box behind a text link.
PacSun shakes it up even further by putting the promo code link above cart contents. Customers are conditioned to find it below cart contents, so if you break convention be sure to A/B test your placement of the coupon link or box, with revenue per visitor as the key performance measure. (A more conspicuous box may increase conversion rate, but if customers are more likely to apply coupon codes and reduce cart totals, this can negatively impact revenue).
Some mobile commerce sites pre-fill promo codes, leaving it up to the customer to hit “Apply” (some won’t). While this is great for usability, offering every mobile customer a discount may not be the most profitable tactic. Use it wisely.
Shipping calculators
Offering pre-checkout shipping calculation helps customers understand their order before committing to checkout. But these calculators are often hidden below Checkout buttons and other content. Unless a customer scrolls all the way to the calculator, she’ll miss it.
Another hiccup with shipping calculators on mobile devices is keyboard invocation. Many sites pull the alphabetical keyboard (complete with autocorrection enabled) instead of the appropriate numeric version when the order is to be shipped to the United States.
The alphabetical keyboard is the right version for postal codes outside of the US, which typically begin with a letter. However, if a region like Puerto Rico has been selected in a previous step, the field should recognize this selection when calling the keyboard.
Alternative payment options
In addition to the checkout button, many mobile commerce sites display alternative payment options like PayPal and Pay with Amazon.
Don’t take for granted that customers can be misled by icons. Sears (below, left) shows Checkout with PayPal next to Checkout, but this can look like instructions rather than a button, and customers may erroneously assume they can only pay with PayPal.
Hot Topic (above, right) adds “or” to clarify any confusion.
When more than one option is available, things can get cluttered. Logos can draw the customer’s eyes away from the Checkout button (below, left) and create confusion if customers don’t understand how credit cards’ own express checkouts work.
Be aware that showing a “Pay with Amazon” option can be a call-to-action to shop on Amazon. If your products are (or the customer thinks they might be) available on Amazon, you may trigger abandonment and ultimate loss of your sale.
Cart page cross-sells
Cross-sells can boost the mobile basket, or be a big distraction.
It’s not a matter of having or not having cross-sells on your mobile cart page (though you can and should A/B test this), cross-sells convert based on their relevance and appeal to the customer. Keep in mind your cross-sell logic (merchandising rules). You know what’s in their cart – don’t be random!
REI labels “Items related to your cart” for persuasive clarity (below, left) and Amazon uses collaborative filtering to populate products frequently bought with items in one’s cart (below, right).
If you use cart page cross-sells, make sure you test their placement. Too far down the page, they’ll never be seen. Too high up, they compete with Checkout buttons and other important content. When appropriate, consider inline recommendations that appear within the order review content block.
Inline cross-sells and up-sells
REI sneaks in a “More from this category or brand” link inline in the cart summary.
LampsPlus suggests adding recommended bulbs inline.
Wine.com includes an inline upsell to its StewardShip program, with a juicy red Add to Cart button.
BestBuy squeezes a Mother’s Day gift card upsell that’s configurable without leaving the cart.
Newegg’s extended warranty and data recovery options appear inline, but slide towards a new screen. A more seamless approach is to use expand and collapse to keep the customer in the cart.
It’s also a great idea to support cross-sells’ quantity configuration right from the cart page. Rather than require customers to click through to a product page, allow them to add impulse items instantly to their cart.
Interstitials
The boldest way to present cross-sells is with an interstitial presented when the customer clicks “View Cart.”
3Balls.com presents its product recommendations as a bundle promotion.
Like pop-ups, interstitial offers can either convert like crazy or cause cart abandonment. Be sure to test this tactic before rolling it out to all visitors.
Keep cart contents in tact
Not all customers convert the same day they build their mobile basket. If they abandon their cart, don’t fret — they may be coming back to add even more items (and check out). The best way to convert a multi-visit shopper is to keep their cart contents live for a minimum of seven days — it’s even more important to mobile shoppers, as re-locating items through navigation and search are by nature more difficult on smartphones.
Need help with your mobile UX? Drop me a line.
Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.
The post Optimizing Mobile Cart Pages appeared first on Ecommerce Illustrated.
