Provide Clear Cost Breakdown

Usability High Priority 70% Adoption 3 Seconds Saved

Motivate customers to finish the checkout by providing a clear purchase summary throughout the checkout.

When you’re checking out at the grocery store, you have your shopping cart in front of you the entire time, and at the end you watch your stuff scoot down the conveyer belt. It’s always nice to watch the freshly baked cake slide past the register – you don’t even think about paying for it, you just want that cake.

An online checkout can do the same by providing a clear and concise purchase summary throughout the checkout. Letting a user see their shopping cart follow them through the checkout helps keep their eyes on the prize – it’s the metaphorical carrot on a stick.

A cart breakdown should also include a full pricing breakdown, including taxes and shipping costs. People feel better paying when they know where the total cost comes from – even physical checkouts nowadays have a screen showing you the cost of each item, taxes, and the full total.

A cost breakdown should include all relevant information, including the per-item costs.

Usage

The best implementations include all the details – itemized cost breakdown, taxes, final total, and a summary of what’s being bought. You can even include pictures of each item. This is also a great opportunity to emphasize free or discounted items or shipping and increase the perceived value.

Some websites provide a cart summary, but don’t go far enough, only including the total or subtotal. This is obviously relevant information for the user, but it only reminds them how much they’re spending, not what they’re spending it on.

Some sites don’t even include a cart summary in parts or all of a checkout, and… “hmmm, why am I going through this checkout again?”

H&M clearly notes all components of the total cost, including individual items.

6pm shows a purchase summary but does not include individual item costs.

Rakuten does not show any purchase summary until the final review page.

List Products

Listing each product and price can encourage users to finish the checkout. It reminds them what awaits them at the end.

All the Information

Include all relevant information: Taxes, Shipping, Products, etc.

Emphasize Free Stuff

If shipping or anything else is discounted/free, highlight this in the cost breakdown to increase perceived value.

Live Updates

If changes are made to the purchase – shipping methods, quantities, etc. – update the cost breakdown immediately, don’t wait for them to hit “Continue.”