As online shoppers, we’re all guilty of the behavior that retailers dread: as we shop, we add items to our cart, and then remove anything we decide is unnecessary or less desirable at the last second before checkout (or worse, we’re comparison shopping in another browser tab, and abandon our session to complete our transaction elsewhere). Usually, this last-second down-sizing of our purchase is to keep our checkout total price within an amount we deemed acceptable prior to beginning our shopping session. The mini-cart has become the best practice in shopping to allow the user to keep track of what they’re buying, and how much they’re spending.The mini-cart or mini-bag in any online shopping experience serves three critical purposes:
- Provides an itemized total of prices to the customer
- Provides visual reminders to the customer of the items they’ve added
- Serves as the gateway to checkout
Let’s take a look at a few different mini-carts to examine the variety of tactics being used in them.
Home Depot, considered by many UX professionals to be experts in online conversion, serves up similar products through a recommendation engine (Certona, in case you’re wondering) within their mini-cart. While this tactic might confuse or annoy shoppers on an apparel or beauty site, as Home Depot’s customers shop for high-priced appliances, a glimpse at what other like-minded shoppers also considered might inspire them to purchase a slightly more expensive model, as well as accessories they might not have otherwise considered. When spending a lot of money, users want to be sure they’re making the right choice, so this tactic is a wise one. Some sites like the one shown below use the mini-cart to remind the user of how much more they need to spend to qualify for a reward, like free shipping.
While it’s standard for the mini-cart to appear in the top right corner of the user’s screen and expand for approximately 3 seconds whenever a new item is added, some sites, like Bloomingdales,’ visually inform the user in the product detail area that they have successfully added the product to their bag.
Please take a moment and look at the top two examples shown above. While this is obvious, it’s important enough to point out: the user is given two clear button options to either continue shopping or checkout. The buttons should always be visually distinct, with prominence given to the CHECKOUT button. In some instances, your designer may decide to treat one call-to-action or both as links instead of buttons. In my opinion, this is a little risky because not all browsers underline links these days, and not all developers remember to force the underline in the style sheet. I know it’s not 1999 anymore, but users, especially those shopping on tablets, still value quick shopping experiences, and not having to hunt for what’s clickable, expedites the experience.
When a user on Bloomingdales‘ hovers over the brown bag icon to revisit what they’ve added so far, the mini-cart boldly informs the customer that they have qualified for free shipping.
What I think are the strongest examples of mini-carts, those most likely to drive conversion through a clean experience, are those such as this sample from Nordstrom. The image thumbnail is large enough to continue to encourage the user to move ahead with the purchase. The size, quantity, and color are shown, and the pricing is aligned in a column. We learn to do simple addition in columns when we’re children, and that’s how we continue to do math in our heads as adults. Whenever prices can be aligned in shopping experiences to appear as they would on a receipt, that’s the best practice for displaying them. Free shipping is prominently displayed, and there are two buttons for checkout. The only thing about this cart I would suggest you consider with caution is the option to remove directly from the mini-cart. If your site shows high conversion from cross-sell suggestions in the full shopping cart view, then it might be worthwhile to force users to that next step where they’ll see recommended items before allowing them to edit the products in their cart. Some sites, such as Amazon’s sites Wag, Soap, and YoYo indicate the addition of products to the cart using a mini-cart interface, but force the user to view their full shopping cart to edit probably for this very reason.
Another usability factor to consider in revealing the mini-cart whenever a product is added is that if your user has scrolled down the page before clicking on the “add to bag” button, your developer may need to auto-scroll the user back up to the top of the page to indicate the mini-cart’s location as it expands. This has become a common practice. As an alternative, you can consider the solution used on Bloomingdales as shown above in the second screen shot, where the notification that the product has been added is served in a mid-page modal so that it’s not overlooked.
Language is also critical when urging users to checkout. No matter how luxury or premium your shopping experience may aspire to be, keep the calls-to-action for checkout simple. “Pay Now” or “Checkout” work just fine. There’s no need to get fancy with “Advance to Purchase” or “Proceed with Transaction” and run the risk of confusing your shoppers.
What are sites have you shopped on, that have an innovative method for advancing you to the checkout process? Have you had any bad experiences with mini-carts showing you misleading price totals?