A good shopping cart experience makes a good shopping experience, both online and offline. Just as a bad cart with a loose wheel can ruin one’s day at the grocery store, a bad shopping cart on an e-commerce platform can wreck a shopping experience just as easily.
When designing a shopping cart page, the ultimate goal should be to encourage checkouts. All components of your shopping cart design should aim to help users complete their order, and this involves ensuring an accessible, intuitive, informative and engaging user experience.
Here are 7 great features that make the best shopping cart experiences.
1. Intuitive Shopping Cart Button
Rule number one: Place the shopping cart button where it’s easy to find. Most e-commerce sites put it on the top right corner of their homepage. Following this convention can make navigating through your platform a more intuitive, muscle memory friendly experience for your users. Here are some examples from major e-commerce sites like Shopee, Lazada, Aliexpress and Watsons.
An eye-catching design helps in drawing attention, but you might want to stay within the bounds of universally recognizable shopping cart or shopping bag icons. This helps with usability and international recognition.
As you can see in the examples above — shopping cart icons are commonly right-facing and two-dimensional, while shopping bag icons are often in the shape of a simple, standard tote bag. Notice too that none of these buttons have text labels. With these icons being universally familiar, even without a word, users will be able to instinctively tell where they need to click in order to access their shopping cart. (That is, unless it is the user’s first time on an e-commerce site.)
Now, out of the four examples above, if you were to pick the shopping cart icons that stand out the most, chances are you would pick the two on the bottom row. It’s easy to tell why. Enabling an item count badge in a contrasting colour on your icon can be a great help in drawing the eyes. In an article published by the New York Times Magazine, John Herrman described badges as something that “imbue(s) whatever they touch with a spirit of urgency, reminding us that behind each otherwise static icon is unfinished business”. Bottom line is, they’re addictive, and it’s best to take advantage of that.
2. Accentuated CTA Buttons
Imagine entering your shopping cart and seeing a big flashy button that says ‘Empty Cart’, and you look for the checkout button only to find a tiny link hidden at the bottom of the page, blending in with the other text. It would feel as though the site is inviting you to remove all items from your cart.
This is why hierarchy matters.
The secret to high-converting CTA buttons — Larger, bolder and higher contrast objects draw the eyes and invite clicks. It’s important to sort action buttons by their level of emphasis and design them accordingly. Making high-importance action buttons like ‘Add to Cart’ and ‘Buy’ stand out, and keeping low-importance buttons like ‘Delete’ and ‘Return policy’ muted can steer your users in the right direction.
Here are some great examples from Aliexpress, Zalora and Shopee.
The contrast between the white backgrounds and the color filled buttons makes it clear that the checkout button is the main emphasis on this page. The buttons also take up the entire width of the sidebar to outshine any competing elements (like the ‘Apply’ button in the third example).
3. Detailed Order Summary
After clicking ‘Checkout’, users should have access to an order summary for confirmation before proceeding to payment. If a user needs to backtrack from the order summary to look for basic information about their cart items, your summary isn’t informative enough.
What should a good order summary include? Some examples of necessary details are:
- Full product title
- Brand or shop name
- Quantity
- Unit prices and subtotal price
- Variations (Size, color, etc.)
- Shipping information (Duration and fees)
- Applied coupons
Keep in mind that a good order summary gives users conviction and confidence that they’ve got their order right, and that it’s safe to proceed to payment.
4. Interactive UI Feedback
Scenario: You press a big red button and you observe no feedback whatsoever — would you doubt that the button even works? On user interfaces, this is what feedback is for.
Microinteractions help boost engagement by communicating non-textual cues. For example, the countdown of remaining characters on Twitter communicates how much more a user can fit in a tweet as they’re typing, and the shaking icons on a iOS user’s home page communicate that they can start moving apps around. What are the best ways you can utilize this on your shopping cart?
Here are some popular tricks:
- Updating the amount saved or discounted with each item added or removed. (Communicates that they save more when they buy more)
- Adding a number badge on the cart icon that changes when a user adds items to their cart.
- Making the cart icon vibrate when users add an item to their cart.
- Showing an animation of the product image ‘dropping’ into the cart icon.
- Displaying a tooltip or toast saying ‘Added to cart’ when a user adds something to their cart.
5. Mini-Cart
A mini cart allows the user to view their shopping cart without leaving the page they’re browsing. They, in essence, narrow down the full cart and show only the topmost important details like product titles, prices and the total number of products. Of course, to give users the option to look at their cart items in detail, there should be a ‘View cart’ button that leads to the full page cart.
Some e-commerce platforms enable removing items or changing variations within the mini-cart itself. This is a great way to allow users to multitask without disrupting their browsing session.
6. Multi-Currency Converter
If you’re already operating internationally, or looking to scale up and expand, a currency converter may be a necessary tool for your shopping platform.
Especially when presented with a foreign currency in the shopping cart, users are bound to feel more detached from the products and even the platform itself. The hassle of having to manually convert prices to their preferred currency, or having to estimate a rough figure from the conversion may also deter them from proceeding beyond the shopping cart. Worse yet, they abandon the cart entirely.
Enabling a multi-currency converter solves this by giving international users a localized experience on your platform. Customers are more likely to complete a sale if they see prices and fees in a currency they use. This is one of the ways to achieve e-commerce localization — by building a native shopping experience with personalization.
7. One-Click Purchase
The one-click purchase was started by Amazon back in 2000. Today, it is known as a standard e-commerce shopping convenience.
Basically, the one-click purchase allows users to set a default shipping address and payment method for their orders, after which they can make instant purchases. This skips the shopping cart process entirely and brings users straight to an automatic checkout. Sites that enable this feature also consolidate one-click orders to the same address in order to reduce shipping costs.
Why is this useful? Having this feature on your platform can make shopping a breeze. It prevents users from overthinking the items in their shopping cart and brings them directly to their goal with the least amount of effort, and the shortest amount of time. Without a doubt, the one-click purchase feature is capable of driving huge lifts in engagement and conversion.
Before going through with a one-click system, however, it is necessary to be sure of a few things:
- Are your products suitable for one-click purchases?
- How can you generate trust through one-click purchases?
As amazing as it sounds, the one-click wonder does come with its own set of risks. Shoppers may click the button by accident, and end up extremely unhappy if they have no way to amend the mistake. In situations like this, a conditional exit door acts as a safety net. Protect your customers by giving them a set amount of time to change their order after making a one-click purchase.
Let Us Help You
Paying attention to your users’ needs and caring about making their journey obstacle-free and smooth-sailing can be a huge boost to customer loyalty and conversions.
Here at Snappymob, we care about user experience. Snappymob is a team of experienced individuals who care about making web and mobile products that delight.
Need help optimizing your shopping cart experience? Let’s explore the possibilities together.