By S. Naidu and B. S. Chaparro
Summary: A list of common mistakes with e-commerce shopping cart design were identified in a previous issue of Usability News. This article revisits that list and reviews how 500 of the top Internet retail sites of today implemented their shopping cart design.
Designers of e-commerce websites know that the user interaction with a site before a purchase is more critical to a site’s success than the purchase itself. Users frustrated with the online shopping process seldom get to the point of actual buying. Five years ago, we discussed the "Top Ten Mistakes of Shopping Cart Design" (Chaparro, 2002, Usability News 4.2). Since this time, we have evaluated many e-commerce websites and have observed many users as they shop online. We thought it would be interesting to review whether our Top Ten still hold true.
Abandoning a shopping cart before purchase is still a common occurrence in online shopping. MarketingSherpa’s study in 2007 (as cited by Baker, 2007) found that, out of a survey of 1,923 online users, there was an average shopping cart abandonment rate of 52.1%. In another report, Goldwyn (2003) reported an abandonment rate before checkout of 75%. Primary reasons for abandonment include high shipping charges, high cost of items, price comparison with other sites, saving items for purchase later, and cumbersome checkout processes that required too much personal information.
In this study, we evaluated the shopping carts of top e-commerce sites. We chose the websites from Internet Retailer’s Top 500 Guide for the year 2006. Their top 500 sites were based on web traffic and web sales and accounted for approximately 61% of total online retail sales (Brohan, 2007). From this list of 500 sites, 454 of the sites were included in the analysis. Fourty-six sites were excluded because they represented parent companies (e.g., Limited Brands is the parent of Express Fashion, Victoria’s Secret, Bath & Body Works, and The White Barn Candle Company) or because they used online order forms rather than a shopping cart and an online checkout system.
The following discusses each of the 2002 Top Ten Mistakes (in italics) and the 2007 comparison results.
Top Ten Mistakes of Shopping Cart Design
1. (2002) 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.
(2007) Our international friends have reminded us that this guideline really applies to the U.S. and other countries that actually use the term shopping ‘cart’ to describe the physical cart used at a store. This guideline should be rephrased to state that the Shopping Cart should be called whatever is appropriate for the target users of that site’s location. In the United States, this is a shopping cart. In the UK, it may be a shopping basket or trolley. Regardless, users are typically accustomed to one term. Any other term will result in longer search times and potential confusion. We still maintain that an internationally accepted graphic helps (Figure 1). In our review of the top e-commerce sites, we found that 62% of the sites used the term "shopping cart". The remaining sites used terms like shopping basket, basket, My Account, shopping bag, and My Gear (Figure 2).
Figure 1. Example of an Add to Cart link.
Figure 2. Terminology used to describe the shopping cart on the websites analyzed. Other terms used included shopping basket, My Account, shopping bag, and My Gear.
2. (2002) 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.
(2007) While not as prevalent, we still found a few sites (6%) that require clicking a “Buy” button to add an item to the cart (Figure 3). While the savvy users no longer hesitate to do this, less experienced users still balk at this stage if they simply want to put an item aside for future consideration. Some sites now offer an Add to Wish List or Add to Shopping List button for shoppers. These terms suggest less commitment from the user. Other terminology used includes "Order", "Add to Order", "Purchase", and "Place Order".
Figure 3. Examples of various types of Buy Now buttons used on sites.
3. (2002) 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.
(2007) Shopping Cart content status has improved significantly on most sites. Approximately 65% of sites now take the user to the shopping cart page when an item is added (Figure 4). Some sites also provide both options when adding an item to the cart, e.g., the user may both add an item to the shopping cart and view it, or they may simply add the item and continue shopping (Figure 5). Others still leave the user in the dark as to their running total or number of items currently in the cart.
Figure 4. Feedback provided by site on addition of item to shopping cart.
Figure 5. Example of options for viewing shopping cart after adding an item.
4. (2002) 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).
(2007) The key design issue here is providing adequate feedback of the cart content and total cost. If this information is provided (and is noticeable) on the product pages as items are added (e.g., Amazon.com), then it is not necessary to take the user to a separate Shopping Cart page. If this information is not clearly provided, then the user should be taken to a Shopping Cart page so they can confirm the item was added, view shipping charges and availability. Providing the cart status information on the site at all times is the most efficient method (Figure 6).
Figure 6. Example of site which shows the cart status, including total cost and an estimated ship date.
5. (2002) 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.
(2007) Improvements in technology have allowed website designers to become more intelligent in their solicitation efforts. However, the more successful sites allow users to place items in the shopping cart before they suggest other products. Users appreciate being reminded of critical accessories that accompany a product (such as batteries) but do not like being interrupted before they can confirm that the item they really want is actually in the cart. Suggestions for related products are also helpful as long as the user can control whether they want to see them or not. From the sites evaluated, it was apparent that there were two major ways of addressing this issue: (1) do not offer any suggestions of additional items and accessories or (2) show users what other customers bought when purchasing the selected item. We have observed in our usability studies that forcing the user down a path of viewing related products is perceived very negatively.
6. (2002) 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.
(2007) Users still encounter this and hate it! In a recent SURL usability study of a high tech corporate website, users complained bitterly of having to register on the site before they could read a company white paper. Most said they would rather search the web for another way to access the same information rather than register with their personal information. Even requesting an email address (and not personal address info) is a deterrent. Users are afraid of getting on a list and receiving more junk email. Fortunately, the number of such sites was small (2%) in this study. These sites were predominantly sites that sold their merchandise through online downloads (e.g., online games, movies, software). Other such sites were ones that offered home deliveries (i.e., online grocery stores).
7. (2002) 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 (Figure 7). Use of a Remove or Delete button next to an item is a far more intuitive way to achieve this.
(2007) Sites today offer several ways to update the Shopping Cart content. The two most popular methods are a "Remove/Delete" link (42%) under or next to the item on the shopping cart or a "Remove/Delete" button (33%) next to the items (Figure 7 and 8). Unfortunately, 15% of our sample still required the user to manually change the quantity to zero (Figure 9). Other sites display a graphical icon such as a trash can or an "X" icon to delete the item. These icons work well when the symbol is easily recognized but can be confusing when it is more obscure (see Figure 10).
Figure 7. The four major ways of updating shopping cart content.
Figure 8. Terminology used to remove an item from the shopping cart.
Figure 9. Example of a shopping cart that requires users to change the quantity to zero to delete.
Figure 10. Unique graphical symbols used to remove an item from the shopping cart. The minus sign (cdw.com), the "X" symbol (simondelivers.com), and the trash can (solidsignal.com).
8. (2002) Including 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.
(2007) We surveyed some sites that still provide lengthy instructions (16%) on how to use the shopping cart. Users generally ignore this text even when having difficulty on the site. The instructions tended to be in plain text and in full sentences. This gives the user the impression that the information is simply "fine print" and not very important.
9. (2002) 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.
(2007) With screen resolutions increasing over the past 5 years, users are typically able to see more on a web page than they used to. However, many sites still position the Update Cart button exclusively below the list of items. If users can add multiple items to the cart they have to scroll to see the Update Cart button. Providing this button above and below the cart allows users to quickly edit their cart without scrolling. We found some sites displayed an image of the item along with the shopping cart detail, thus making the page longer. We found only 6% of sites in our evaluation had the Update button both above and below the shopping cart. Most sites still follow the traditional method of placing the Update button at the bottom of the shopping cart, along with the Checkout button. Eighteen percent of the sites used a link or button other than Update Cart or offered no update capability at all (Figure 11).
Figure 11. Placement of Update Cart link in relation to the list of items.
10. (2002) 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 (Figure 12).
Figure 12. Users prefer to know shipping and tax costs before filling out final payment information.
(2007) Online shoppers today look for the words "Free Shipping". Many sites offer this during peak buying season or for certain dollar amounts. Shipping costs are still one of the major deterrents of shopping online, especially for large or heavy items. Knowing these costs before a user enters his/her personal address and billing information is a must. More sites are now offering the option of opening a separate window that contains information on shipping costs. Unfortunately, too many sites still require a customer’s personal information (44%) before showing the final total after shipping and tax (Figure 13).
Figure 13. Percent of sites requiring personal information before revealing shipping charges.
What’s New in 2007?
In addition to the issues above, we observed two other important aspects of shopping cart design.
1. Security, security, security.
- There is a fine line between a good CAPTCHA and a poor CAPTCHA. One that is very easy to read satisfies the user but defeats its real purpose as it can also be read electronically. One that is truly secure is often so unreadable, users make errors when trying to decipher it. We have observed some users spend more time figuring out the CAPTCHA than they do checking out.
- There are still some users who are unfamiliar with CAPTCHAs and consequently ignore them on the page. This results in a page error which, if not explained properly, leads the user to believe that they entered something in the shipping or billing information incorrectly rather than the CAPTCHA. Even if users are familiar with a CAPTCHA, many do not know that it is called this.
- CAPTCHAs are often not accessible to screen readers.
Figure 14. Sample of a CAPTCHA used on a website. Note that this CAPTCHA is accessible by screen readers (through the speaker icon).
Security certificates from third party companies are also another means of ensuring that potential online customers are not anxious when it comes to entering their credit card and personal information during checkout (Figure 15). Companies like VeriSign and ControlScan offer (for a fee) software packages to websites ensuring that they are secure. Secure Sockets Layer (SSL) technology is another way of protecting personal information in online stores. SSL technology encrypts sensitive and personal information for transfer across networks thereby "hiding" the information from public view.
Figure 15. Security logos typically found on the bottom of the screen ensuring customers of the trustworthiness of the site.
2. Out of Stock Items.
We have observed that many sites do not let users know if an item is in stock until they reach the checkout stage. We’ve also seen some confusion as to whether backordered items were included in the total cost. Users should be notified an item is out of stock on the main product page and asked if they still want to include backordered items in their order.
If an e-commerce site is to succeed, designers must consider the usability of the entire shopping experience for its users. Probably the most critical part of this process is the shopping – finding items, adding them to the cart, understanding total costs – and not the final purchasing. In this article we reviewed our 2002 list of mistakes in shopping cart design and surveyed how 500 top e-commerce sites designed their shopping cart. We found that all of the 2002 issues remain usability concerns in today’s websites. Proper attention to these issues can only improve usability and, in turn, users’ willingness to stay online to purchase.
Baker, C. (2007). Shopping cart abandonment benchmarks. February 26, 2007. Retrieved 6/7/07:
Chaparro, B. (2002). Top ten mistakes of shopping cart design, July, 2002. Retrieved 7//7/07: http://psychology.wichita.edu/surl/usabilitynews/42/shoppingcart.asp
Goldwyn, C. (2003). The art of the cart: Why people abandon shopping carts.
Brohan, J. (2007). The Top 500 Guide. June, 2007. Retrieved 6/7/07: