Shopping baskets are a key part of the design of an e-commerce site, forming a stepping stone between finding products and entering the checkout process.

They also provide a useful way to review the products selected for purchasing, and offer site owners a chance to reassure customers about security and payment options.

Let’s look at some examples of basket design used by popular online retailers, to see what works, and what doesn’t…

By the time a customer is ready to hit the ‘proceed to checkout’ button, they need to have a clear understanding of the following:

  • The products they are buying.
  • How much they will cost.
  • How and when they will be delivered.
  • Payment methods and security.
  • Terms and conditions.

Ideally, a shopping basket should give customers all of this information, making it easy to access and review their order.

Other desirable features include:

  • A mini-basket on every page so customers can easily see what they have added.
  • Clear controls to update the contents of the basket.
  • Clear navigation away from the basket (continue shopping / go to checkout). 

So, how many of these major retailers include these features in their shopping baskets?

Amazon does some of this well, providing a clear summary of product and price, links to information about delivery options pricing and T&Cs, as well as clear tools to edit and update the basket:

Amazon shopping basket

However, it doesn’t provide a mini basketfor quick reference, and to navigate away from the basket you need to click on another section of the site as there is no ‘continue shopping’ link.

What Amazon does well is to provide a nice clear checkout button, and saves the contents of the basket for 90 days so customers can return later and pick up where they left off.

Next’s shopping basket is more basic. It does the job of showing products and prices, as well as providing a ‘shop more’ link, but it fails on the other points:

Next shopping basket

While the delivery charges are stated, there is no information on times and dates, payment methods or other T&Cs like privacy and returns policies.

Navigation away from the basket can be confusing as well, despite the ‘shop more’ link. For example, if I have added items to the basket and select ‘flowers and wine’ from the navigation bar, I get this message:

Next abandon order

HMV provides a better example of how it should be done. Once you have added items, you are then shown a mini basket on each page of the site, which links to the full size one:

The main shopping basket page contains most of the elements listed above; payment methods, T&Cs, navigation away from the basket and controls to update the contents are all there:

HMV shopping basket

There are also some tips on how to use the shopping basket for the uninitiated, though one important omission is information on delivery dates and times, for which you need to enter the checkout.

For a successful online retailer, Tesco’s shopping basket is pretty sparse, and lacks information that would be useful to shoppers.

Tesco shopping basket

Tesco has only listed the products and price; for delivery charges you need to enter the checkout, though there is a small link at the bottom of the page. 

Can you point us at any other retailers that have perfected the art of basket design? Which ones are innovating in this space? Please leave your suggestions below…

Related research:

Online Retail 2007: Checkout Special

User Experience Roundtable Briefing – May 2008

Related stories:

Warning: I can’t find your checkout!

How to plug leaks in your shopping basket