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.

Users prefer to know shipping and tax costs before filling out final payment information

Users prefer to know shipping and tax costs before filling out final payment information.

Conclusion

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
buying. Studies show that 51% of online shoppers state that they shop
online and purchase offline (NPD Group, 2001). In this article we
identify ten mistakes in shopping cart design, which we have seen,
impact a user’s willingness to purchase. While these design flaws are
not the sole reason why users leave their carts abandoned, fixing them
can only improve a users’ willingness to stay online to purchase.

References

  1. Gordon, Seth (2000). Shoppers of the Web Unite: User Experience and Ecommerce, March 3, 2000 (Online)
    http://www.zdnet.com/devhead/stories/articles/0,4413,2448211,00.html
  2. Thumlert, Kurt (2001). Abandoned Shopping Carts: Enigma or Sloppy E-Commerce? June 27, 2001 (Online)
    http://ecommerce.internet.com/news/insights/trends/article/0,3371,10417_792581,00.html
  3. NPD Group, Inc. (2001). NPD e-visory report shows Offline sales benefit from online browsing. bLINK Magazine.