shopping cart

Top Ten Mistakes of Shopping Cart Design
Barbara S. Chaparro , barbara.chaparro@wichita.edu
Software Usability Research Lab,

Ahhh, shopping. Imagine strolling down the aisle of your local store with your shopping cart. You find an item that you want but before you can put it in your cart you have to give your name and other personal information to a store employee! Then, you want to put an item back on the shelf but every time you try, it appears back in your cart! Then you realize that to really get rid of it you have to state "OK, I want zero of this item!"

Chances are if any of these things happened to you in an actual store you would quickly leave your cart behind. However, these are only a few of the things shoppers must face to purchase online. Maybe we shouldn't be surprised that 60 - 75% of shopping carts are abandoned in e-commerce sites (Thumlert, 2001; Gordon, 2000). Have web designers forgotten that the purpose of using the terminology 'shopping cart' is so that users assimilate the behavior of a 'real' shopping cart to a 'virtual' one?

In our Software Usability Research Lab ( www.usabilitynews.org), we have examined the usability of many shopping web sites and are always surprised by the inconvenience of 'convenient' shopping. Typically when people shop in a store, they are rarely aware of our shopping cart, unless it has a squeaky wheel or is hard to steer. If this happens, at least they can trade it in for one that runs smoothly. Online users, unfortunately, do not have that choice.
The Shopping Process

Table 1 shows the process you may encounter shopping for two items in a brick-and-mortar store versus a typical e-commerce site.
Table 1. A Comparison of Traditional and Online Shopping
Traditional Shopping
Online Shopping

1. Find Item #1
2. Place Item #1 in shopping cart
3. Find Item #2
4. Place Item #2 in shopping cart
5. Check-out
6. Pay with cash or credit
7. Leave store



1. Find Item #1
2. Add Item #1 to Shopping Cart
3. View Shopping Cart
4. Find Item #2
5. Add Item #2 to Shopping Cart
6. View Shopping Cart
7. Check-out
8. Create an account. Enter name, email
9. Enter Shipping Address
10. Enter Billing Address
11. Choose Shipping Method
12. Enter credit card info
13. Review order & final price

It is not surprising, given the nature of online shopping, that extra steps may be necessary at the payment process (Of course, adding the use of a gift certificate, special offer, or shipping to multiple addresses only complicates the online experience even more.) After all, the convenience of not having to get into the car and drive to a store is worth a few extra clicks and keystrokes, right? Popular dot-com companies (i.e., amazon.com) are continuously trying to streamline the buying process by offering predefined accounts and one-click buying.

However, the process before buying - shopping, browsing, and working with the shopping cart - is in many ways more critical to a site's success. Users frustrated with the online shopping will never even get to the point of online buying. In our usability studies, we have observed many shopping features that impact user performance and satisfaction. The following is a list of Top Ten Mistakes of Shopping Cart Design that we have compiled.
Top Ten Mistakes of Shopping Cart Design
1. Calling a Shopping Cart anything but a Shopping Cart.

Calling a shopping cart anything other than a shopping cart only causes confusion. Users are accustomed to the cart terminology and while certain domains may find it 'cute' to use a term specific to their product line (i.e., bookbag, order, basket) it is best to maintain consistency and stick with the 'cart.' Adding a graphic of a shopping cart also helps quick access.

Add to Cart
2. Requiring users to click a "BUY" button to add an item to the shopping cart.

Adding Items to the shopping cart should be effortless and noncommittal. After all, the user is putting items into the cart for possible future purchase. When users are required to click a BUY button to add an item to the cart it is often unsettling since they are not necessarily ready to buy the item at this point - they just want to place it in the shopping cart. Buying is the final step in the shopping experience and it should not be presumed that adding an item to the cart is a commitment to buy. Users in our studies are very hesitant to click the BUY button and search for an Add to Cart button on the page instead.

What if a user is not yet ready to buy an item - how does he simply add it to the cart?

What if a user is not yet ready to buy an item - how does he simply add it to the cart?
3. Giving little to no visual feedback that an item has been added to the cart.

Some sites do not automatically take users to the shopping cart page when an item is added. This allows them to continue shopping without interruption. Generally, these sites have a shopping cart indicator somewhere on each page that updates and summarizes the cart content. A problem with this method, however, occurs when the visual feedback of the change to the cart's content is too subtle or nonexistent, or is not in the users' current browser view. In all cases, users do not believe anything has been added to the cart. As a result, they click on the Add to Cart button again and add the item a second time (and maybe again for a third time). Users end up having to go to the shopping cart page anyway just to see if the item has been added. Often times, they are surprised with multiple quantities of the same item.
4. Forcing the user to view the Shopping Cart every time an item is placed there.

As long as there is adequate visual feedback of the cart's content, there is really no need to take the user to the shopping cart page every time an item is added. In fact, it is disruptive for multi-item shoppers, requires extra mouse clicks to continue shopping, and potentially limits how many items a person buys (they may be more inclined to checkout if they are already at the shopping cart page).

Visual feedback is very important when adding an item to the cart

Visual feedback is very important when adding an item to the cart.
5. Asking the user to buy other related items before adding an item to the cart.

This is the online equivalent to "do you want fries with your order?" and is not only irritating to users but also disorienting. After clicking a button or link to add an item to the cart, users are ready for some kind of feedback that the item has been added. Asking them to make a decision about other items makes them second-guess whether they actually pressed the correct button or link to add the desired item, or it aggravates them by soliciting items they do not want. A better approach is to place related items (i.e., batteries) on the item page or on the shopping cart page so they have the option to purchase them before checkout. Placing the control on the users makes them more willing to purchase.

Users are forced to accept or reject 'related' items before adding a desired item to the shopping cart

Users are forced to accept or reject 'related' items before adding a desired item to the shopping cart.
6. Requiring a user to REGISTER before adding an item to the cart.

Some sites we have tested require a user to register with personal information before an item can even be placed into the cart! This is a turn-off to users who may be browsing or comparison-shopping. They may or may not purchase the items, but they definitely do not want to commit personal information just to fill the shopping cart and will leave the site because of it.
7. Requiring a user to change the quantity to zero to remove an item from the cart.

Updating the shopping cart's content can be tricky to program but should be seamless to the user. Many sites still require a user to enter '0' in the quantity field and click an Update button or link to delete the item. Use of a Remove or Delete button next to an item is a far more intuitive way to achieve this.

To remove or delete items, change the quantity to zero. Huh? Why not just delete it

"To remove or delete items, change the quantity to zero." Huh? Why not just delete it?
8. Requiring written instructions to update the items in the cart.

Requiring users to read instructions on how to update the shopping cart is, in itself, a sign of poor design. First of all, users do not read such instructions. Second, if instructions are required, then the shopping cart interface design must not be intuitive. Users should be able to figure out how to remove or change the number of items desired from viewing the cart itself.
9. Requiring a user to scroll to find an Update cart button.

Most carts offer an Update button or link to update changes made to the shopping cart (such as quantity). This function should be located such that it is always visible and clearly distinct from the rest of the shopping cart, regardless of the number of items in the cart.

The Update Cart link (left) may be less evident than the Update Quantities button (right).

The Update Cart link (left) may be less evident than the Update Quantities button (right).
10. Requiring a user to enter shipping, billing, and all personal information before knowing the final costs including shipping and tax.

Shipping costs and taxes (if applicable) are a big factor in whether or not users complete their online orders. Users cannot access whether their purchase is truly a 'deal' or not until they have the final cost. Many sites require users to enter all shipping, billing, and credit card information before a final cost is provided. Access to shipping rates and tax from the shopping cart or item pages (before the user ventures down the purchasing path) is critical.