Today’s digital consumer is connected like never before. For retailers, this presents both an opportunity and challenge. Below are some usability and design tips for the mini cart and full cart shopping experience.
1. Locating the shopping cart
Customers should be able to spot the cart icon. The standard is to place the cart icon in the top right corner of an e-commerce site but avoid placing cart icon in dark bars in the top navigation bar.
Our brains scan light space (white) looking for site functions, and dark skinny bars can be very easily missed.
2. Show number of items
Display the number of items in the cart, even if it’s zero. This lets the user know they have to add items to their cart.
3. Remind users to add products to the shopping cart
When the shopping cart is empty, remind your users that the cart is empty and they should add products. You can provide shopping instructions, a call to action or product recommendations that tempts users to add to their cart.
4. Mini shopping cart
Provide a mini shopping cart to allow customers to keep track of how much they spend and what they buy. Your mini cart should provide:
- A link to view the full page cart instead of taking the user directly to checkout. Such as “view cart” or “view bag”.
2. Your users should be able to edit and remove items within the mini . shopping cart.
3. If a user decides to remove an item within the mini cart provide some sort of validation that the item has been removed.
5. Notify user when item is added to shopping cart
When a customer adds an item to their cart provide a confirmation message that the item has been added to cart. Users don’t want to search the page to find out if an item was added, and you surely don’t want them leaving the shopping process to find out if an item has been added to the shopping cart or not.
Feedback can be accomplished in a variety of ways, best practices include an overlay or modal. Try and avoid subtle design changes such as adding a single line of text to a page, or updating the quantity of items listed near a shopping cart. These changes are often too subtle and users end up adding more items to their cart which causes frustration during the checkout process. Below are three great examples that let users know an item has been added to their cart.
Full cart page
Users make their final purchase decisions when they are viewing the full cart page. There they review and compare the items they have chosen, check whether the total is within their budget or whether they get free shipping etc. So, design your full cart page in such a way that it assists your shoppers in their buying decision.
1. Identify how many items are in the cart
Like in the mini-cart you want to identify how many items are in the cart on the full cart page. This lets the user know how many items they have added to their cart.
2. List product image and details
The final purchase decision is made on the full cart page, so its important that this page clearly summarizes the items. The cart, should include product image and details (size, color, price) enabling the user to differentiate an item from other similar items that they may be considering.
The product image is essential for users who are comparison shopping and to assist users who aren’t comparison shopping, by providing a quick visual summary of what’s in their cart. The image should be large enough for the user to identify the item and needs to reflect the users selection. This entails showing the item in the correct color or with the correct option so the user doesn’t doubt the selection.
3. Link cart items to full product details
Its important that your site provides users with easy access from the cart to the product detail page. Some users need additional information to make a purchase decision, they want to return to the product page in order to read more information or review product details. It’s important to link both the product image and product name to see more information. You should avoid hover states to indicate the product can be clicked on, because it entails a user to guess that the item is clickable.
4. Allow users to edit item in cart
Allow your users to easily edit the product on the cart page itself without having to navigate to the product page. There are variety of ways this can be achieved the two most common are inline editing and a pop-up screen. With either option make sure that the product image and details are updated once the user edits the item.
5. Allow users to remove item in cart
Provide a clear text link, delete icon or button to remove an item from cart and name it remove instead of delete. The link or button should look clickable, but don’t rely on color alone. Surprisingly a large number of users suffer from different forms of color blindness and have difficulty interpreting colors. Instead focus on the position of the remove link, icon or button. Most importantly, once a user clicks the remove link, instead of removing the item immediately ask if the click was intentional.
6. Pre-check out tax and shipping estimates
Many e-commerce sites lose users at the cart page because they can’t preview their final charges before initiating checkout. In a recent study by UPS and ComScore, 37% reported they abandon carts when this information is presented too late in the checkout process. To solve for this cart abandonment offer a pre-checkout shipping feature thats located in the users eye path.
7. Allow users to calculate shipping in the cart page
Allow your user to calculate shipping in the cart page if your shipping charges vary for different locations. If the user is logged in then fill the shipping location based on the default delivery address.
8. Highlighting the order summary box
Users will want to know how much they’re spending, highlighting the summary box differentiates itself from the rest of the elements on the page, making it easy for users to see. Ensure that the elements in the summery box are aligned, good alignment bridges the visual gap between every element in your design, helping users process the information faster.
9. Coupon fields
Coupon code fields are useful for giving customers special discounts. However, putting a coupon code field at the beginning of your form without promo codes available on that page can hurt your conversion rate. The coupon code box acts as a trigger that prompts users to search for a coupon if they don’t have one. Once the user leaves the checkout process to find a coupon it can lead them to find a better deal on a competitors site and it also trains them to expect some sort of discount each time they visit your site.
Rather than having your user abandon the cart to find a coupon through Google or search your site, provide coupon codes next to the promo code box.
Another option is to minimize the visibility of the coupon field. The users who already have a coupon code will be looking for it and will find the location without too much additional effort.
10. Gift Options
Add a gift wrapping option to purchases that allows users to add a personal note to their gifts. This very simple add-on service which is easy to implement, has shown to increase average order value and makes users lives painless and easier during the holiday season. Studies show that users buy more items when you offer a gift option service and retailers make money by the margins that gift-wrapping allows. On average, gift-wrapping has a 50% profit margin per item.
Also, if the user is sending this gift to someone, you should let the user choose whether or not to include the price information in the invoice during delivery.
11. Checkout button
This is the most important button on the full cart page. Your button should be highlighted and placed in the users path (above the fold). Keep relevant text on the checkout button. The label should indicate the function of the button, with a clear message of what happens after the user clicks on the button. Avoid contextual labels like “continue” for the checkout button, instead use “pay now” or “proceed to checkout”.
12. Display payment options
Showing a wide range of payment options and methods on the cart page will increase the chances of your users proceeding to the checkout page. However, you want to present this information in close proximity so the user can see all the available payment options and methods in a single view. This allows the user to view them as a collection mutually exclusive of choices and can compare the options.
1. Create urgency & scarcity
You can reduce cart abandonment by creating urgency and scarcity. Users tend to act quickly when an issue is important. Users tend to buy products when something is scarce. These two techniques change the consumer’s behavior toward supply and demand.
Urgency is when a user feels like they need to act quickly. Urgency can be created with the effects of a ticking clock. Having a limited amount of time to do something forces users to take action. Groupon, Asos, Adidas and other e-commerce sites all use this technique to drive up their conversions.
If you sell products, you have stock to deal with. This is a legitimate source of scarcity. Scarcity is the feeling that a product or service is in short supply and about to run out. Specifying the number of items still available in stock if there are only few left creates a level of scarcity and leads to an increase in sale.
2. Add to wishlist or save for later
The average abandoned cart rate for e-commerce is between 60%-80%. With numbers so high, many sites are implementing the “save for later” button, which is could also be called a “wish list”. Users don’t only add items to their cart to purchase right away. Users add items to:
- Adjust their cart to fit a certain budget
- Make product comparisons
- Add and remove products to qualify for certain discounts
Having a wishlist or save for later button allow users the time to consider their purchases and make for easy return purchases. Furthermore, this design pattern works well for cross platform selling.
3. Cross-sell or up-sell
Back in 2006, Amazon reported that 35% of its revenue was direct results from up-sell and cross-sell efforts. Since then, many e-commerce sites are reporting similar results. On average, product recommendations are responsible for an average of 10–30% of eCommerce site revenues. You can maximize the shopping cart page by recommending personalized products, or showing what customers who bought this also bought, top selling items, or complete the look with these products.
4. Persuade shoppers with offers
When users are on the cart page you can persuade them to add more products to the cart by offering something. The most common is offering free shipping on orders of a certain amount.
Every aspect of a site’s shopping cart interface (full cart page and mini cart) is important to the overall user experience and success of the site. Applying these and other usability/design tips can help increase your e-commerce sales and traffic.