Cart summary page. Image by Nick Babich

With more and more people shopping on smartphones, its important to design smooth checkout experience. We’ve already discussed how to design a product details page. In this article, I want to share eight practical recommendations for the cart summary page.

1. Total number of items in cart

Display the total number of items in the cart at the top of the page. This information becomes valuable when users have 5+ different products in a cart and need to scroll to see the entire list. ‘X items in cart’ at the top of the page will immediately inform users of what they have in their cart.

2. Show essential information about the item

• Product name. Try not to cut the product name.
• Product number or product ID (when relevant)
• Product price.

3. Provide contextual actions

Make it easy for users to update the contents of their shopping cart. Allow users to change the number of items (i.e., add more items) or remove a product from a cart. Note that the user might accidentally remove the item from a cart, so it’s worth providing an Undo option for this case.

Undo the action on the product cart screen

Don’t: use an Update button to make cart changes become effective. When users change the quantity of an item in the cart, the chances should be introduced immediately.

4. Shipping information

• Show ‘Delivery/pickup’ segmented control when users can choose how they want to receive an item.
• Show delivery address when the user selected the ‘Delivery’ option. The address should contain a full address for shipping.
• Show delivery options. When multiple options are available, you should pre-select the best possible option for your user. Try to provide the expected delivery date.

5. Promo code

If your service offers promo codes, you can introduce the input field ‘Redeem promo code before the payment summary. Note that when users see the option ‘Redeem promo code, they might leave your app in the attempt to find an active promo code on the internet, and some users might never return. Thus, it’s safer to offer the promo code right inside the app (for example, on the home page or a special section called Promos).

Also, when users apply promo codes, you need to provide discount info in the payment summary section. This information will reassure users of how much money they’ve saved and give them another reason to complete the order.

Discount info

6. Payment summary

You need to provide:

• Subtotal. the cost of all items in a cart
• Cost of shipping
• Estimated tax. You can use the user’s current location to determine sales tax.
• Total. Subtotal + cost of shipping + estimated tax.

7. Place order CTA

The label of the CTA button should say how much money the user is going to pay. ‘Pay $100’ is more evident than ‘Place order.’

8. ‘Add new card’ scenario

Optimize the ‘Add new credit card’ scenario. Entering credit card details on mobile is not the most enjoyable experience. That’s why you need to allow users to take photos of their credit cards to populate information.

See more

Want To Learn UX?

Try Interaction Design Foundation. It offers online design courses that cover the entire spectrum of UX design, from foundational to advanced level. As a UX Planet reader, you get 25% off your first year of membership with the IxDF.