Shopping Carts and Madness

I stumbled across a really useful article by Barbara Chaparro covering the ‘Top Ten Mistakes of Shopping Cart Design‘ this morning.

The article was published more than three years ago, but I think it’s still very much ‘on the money’.

I recommend reading the whole article, but to paraphrase her, the 10 biggest mistakes are:

  • Calling a Shopping Cart anything but a Shopping Cart.
  • Requiring users to click a “BUY” button to add an item to the shopping cart.
  • Giving little to no visual feedback that an item has been added to the cart.
  • Forcing the user to view the Shopping Cart every time an item is placed there.
  • Asking the user to buy other related items before adding an item to the cart.
  • Requiring a user to REGISTER before adding an item to the cart.
  • Requiring a user to change the quantity to zero to remove an item from the cart.
  • Requiring written instructions to update the items in the cart.
  • Requiring a user to scroll to find an Update cart button.
  • Requiring a user to enter shipping, billing, and all personal information before knowing the final costs including shipping and tax.

Anyone familiar with Steve Krug‘s work should certainly recognize some common themes there.

So, when shortly afterwards you visit a site that not only chooses to ignore some of the rules, but literally pokes it’s tongue out and then laugh heartily in face of them, you have to chuckle.

Crumpler are a small company that make funky, but very ruggedly constructed bags, and they sell and support their products through a very playful and quite idiosyncratic website.

So, what would they call their ‘Purchase’ button?

Perhaps ‘Place my Order‘ like Amazon?

Maybe ‘Submit Final Order‘ like ThinkGeek?

Buy‘?

I give you … ‘The Button of Madness!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Steve Lawrence

    I have to disagree with number 1: “Calling a Shopping Cart anything but a Shopping Cart.”

    Shopping cart is an American term, I’m in the UK and I find it looks unprofessional on a UK site (or American site that sells to the UK) to use a term that has no place within the local vernacular. It would be better to use something that is common to all English speaking countries.

  • http://www.hotgazpacho.com hotgazpacho

    I take issue with #10 above. Unless you offer flat rate shipping, it is not possible to state the shipping costs BEFORE a customer has enterred their shipping information. Likewise with tax calculation. You cannot compare it exactly to a brick-and-mortar store, either, because often, you don’t have to worry about shipping, and the tax rate is the same for everyone who purchases at your store.

  • http://www.nasi.com trigger

    you’ve obviously researched this better than me, do you have any examples of particularily well-designed shopping cart apps?

  • tonyd

    I agree with hotgazpacho about #10, I also have problems with 1 and 2.
    1. I can think of one good reason for not calling a shopping cart a shopping cart – we’re not all American!
    2. I can’t see Barbara Chaparro’s point about “buy” buttons – when I put something in a shopping trolley at a supermarket, I do it because I want to buy it, not because I want to take it for a walk round the shop and put it back later.

    The worst thing for me is #6 – “Welcome guest – would you like to login or open an account” – aaargh! Back Button!

  • Unit7285

    re Item 1: Don’t Call a Shopping Cart anything but a Shopping Cart.

    Shopping Cart is a purely American-English term. It sounds horrible in English-English. Very unappealing. We have ‘shopping trolleys’ and ‘shopping baskets’ in supermarkets instead, so that’s why you won’t always find Cart. Don’t know what they use in Australia/NZ/South Africa. Anyone?

    Personally I don’t think it’s important what you call it nowadays. This whole metaphor of supermarket shopping is unnecessary now – it was introduced in the mid 90’s to explain a completely new concept – online shopping. Well, it’s not new now, it’s a way of life and doesn’t need explaining any more.

    And before anyone starts whimpering about ‘new users’, they’ll have figured it out in 10 minutes on someone else’s site before they ever look at yours, so there’s nothing to worry about!

    Plain old ‘Shop’ seems fine to me, and if you must use the dated Cart/Basket metaphor then do it in the colloquial language of your biggest market.

  • cholmon

    I have to agree with not using “buy” buttons just to place an item in the cart. I often add/remove many items to my cart, especially when buying computer parts; I estimate prices for complete systems alot more than I actually buy them.

  • http://www.sitepoint.com AlexW

    Although, as an Australian, I’d always use a ‘trolley’ rather than a ‘cart’ at the supermarket, I tend to think the concept of an ‘online shopping cart’ is pretty well-established, and now stands apart from the bricks and mortar equivalent.

    I know you don’t always have to be entirely literal, but I know johnlewis.com call their shopping cart a ‘basket’, and the idea of adding a 4 foot wide LCD TV to a ‘basket’ seems kinda flimsy to me. “I’m spending two grand on a TV and you’re making me carry it in a basket?!

    So for the same reason I wouldn’t label a search button with ‘Find’ or ‘Where is it?’, I’d agree with Barbara and always call a cart a cart.

    I’d also agree with cholmon. People use shopping carts for lots of reasons other than directly buying items. I know I sometimes use them as a calculator to tote up how much item A, B and C would be if I decided to by them.

    Sometimes I might plug in a random product to just get a feel for potential shipping charges. For instance, if the shipping is over ‘$x’ I might rules out the purchase completely.

    Other times I might simply use the cart as a bookmark system. The thinking goes something like:

    This t-shirt store is great… I’m going to pick out three to order …. so far, these are the three coolest t-shirts I’ve seen… but if I find a better one, I’ll ditch one of my current choices.

    If, as a shopper, I believe that pressing ‘Buy’ possibly means they are going to immediately ask me for my credit card, I’m probably going to be reticent to use the cart that way.

    And if I have a competitor’s t-shirt site on another tab that is making it easy for me play with a list of potential purchases, I’m a big step closer to completing the purchase.

    As far as examples go, Amazon spend thousands of hours testing and tweaking their cart system, so you can learn a lot from them.

  • tidalx

    I never notice the following before this blog, amazon.co.uk uses ‘view basket’ while amazon.com uses ‘view cart’. Looks like they did their research.

  • ivanv

    Very good article. Here are my opinions on a couple of reader comments above:

    Buttons shouldn’t be called “Buy” because it feels a bit more committing, IMHO.

    And you can show shipping and tax information without asking the user to enter all his information. Just look at PriceGrabber.com

    Bonus: I *guess* shopping carts are ought to be named that way because almost everybody online is used to that term (in the english world anyway).

  • http://www.tiptoptemplates.com ntg

    I saw a site using an “Add to favorites” button and a “Buy Now” button with each article. And inside their Favorites section, there was the “Buy now” again to start the actual buying proces of all things kept in there. I think that was neat, because most people will understand the concept of adding to favorites. Maybe “Bookmark this item” would be even better.

  • Ren

    #11. Requiring javascript for people to shop / add to cart.

  • http://www.hotgazpacho.com hotgazpacho

    ivanv – you can’t always show shipping and tax information without asking the user to enter at least their shipping address. I have a client who uses a table rate to the contiguous US and Hawaii, and a flat rate for everywhere else. Also, for collecting sales tax. Depending on where you have physical locations, if someone is purchasing from the same city or state as one of your locations, you MUST collect tax. The user has to at least specify [I]SOME[/I] personal information to calculate this information!

  • PAIDINC

    Alot goes into the useability and design of a shopping cart. Each business model is slightly different and each requires a unique feature. I agree with the points that are listed, trying to keep your cart/checkout process simple and clean is key.

    In reference to point #10 You can show shipping charges early, and you will see more and more companies moving in that direction, shoppers want to know the total of their order before they enter their info. If not they bail. The problem has been technology and money. Here is an example of one found here http://www.auctioninc.com/info/page/shopping_cart

    as long as the solution is affordable more sites will soon be able to provide accurate real time calculations early in the checkout.

  • Ladislav Martincik

    Hi, I’m not natural English speaker so for me is much better to have one term for “Schopping cart” and I think it has to be a “Shopping cart”, because I know that term well from the Internet. Ok if you have a UK store so should be a UK term, but for the rest of the world is better to have a American English terms, because people know them. I’m not saing it’s a good for everyone, but it’s a optimal for me. Hope you’ll understand me.

  • Bartek Muracki

    #6 – keeping in mind the rising percentage of “abandoned” shopping carts, I’m not sure if we should always skip the registration part.

    If one is forced to register before adding anything to the cart, and one actually does it – there is a great chance he won’t leave the cart and complete the order.

    Any comments are more than welcome.

  • http://www.myhattiesburg.com n3wb

    i am one that wants the shipping put on before i enter info

    i bail out of many sites if i have to go through a 10 minute process of entering my info just to end up probably not wanting it anyway because of the shipping cost

    why go through all that.. next site please

  • Dorsey

    As an American, I can instantly tell when I’m reading something written in vernacular of other English-speaking countries. Frankly, I find it interesting, not offensive. I love to see “tire” vs. “tyre”, “center” vs. “centre”, “football” meaning “soccer”, “wing valence” meaning “fender”, “boot lid” meaning “trunk”, etc. People’s height and weight in Meters and Stones is another one I enjoy. It’s like speaking a foreign language you can easily understand.

    Honestly, what’s the big deal here? I consider these things part of the appeal and interest of different cultures, and if someone is offended by “shopping cart” – go somewhere else, I’m not going to change. For those of you using non-American English, please continue to do so, we’re much richer for it.

  • http://www.sitepoint.com AlexW

    Bartek, I think designing a shopping cart system is about moving people through 5 or 6 steps. In reality if 100 people start the process, we have to accept that we’ll probably lose some of them at each step – sometimes for reasons we can’t control.

    There are probably two driving reasons that a person may commit to a shopping process.

    1) Excitement about the product/service they’re looking to purchase.
    2) The time/effort they’ve already invested in the shopping process till now (browsing, comparing prices and specs, etc). If you’ve spent 20 minutes finding exactly the right items, starting that process again at a different site isn’t an atractive option.

    If we ask for a big commitment from each shopper (give us all your details or you can’t continue) before they’ve made any real time/effort investment, they’ve got very little to lose, so cutting their loses and going to the next site that sells ‘item A’ is no big deal.

    That kind of behavior in your shoppers could quite conceivably cut your 100 shoppers to 12 shoppers at ‘step 1′. That doesn’t leave much margin for error on the remaining 4-5 steps.

    I agree that the people who do register from the start are very likely to purchase. But those guys are strongly commited, so you’ll probably get them anyway.

    The key is, since you’re not paying hourly rates to humans to handle the transactions, there’s no advantage to culling out the ‘maybes’ and the ‘tyre kickers’ from your 100 starters so early in the process (unless you had insane amounts of traffic that were bringing down your server). If you walk them along in easy little steps, they might even surprise themselves and finish the purchase that they were lukewarm about to start with.

    I’ve always liked Steve Krug’s idea that it doesn’t really matter how many clicks a process takes, as long as each one of those clicks is a ‘no-brainer’.

  • John

    Dorsey said “Honestly, what’s the big deal here?”

    It’s because Americans are stereotyped as being brash and insensitive to local cultural behaviors. Also, many countries feel that the U.S. is trying to impose its own view of the world on others.

    (Just take the term Americans for example. It technically should include Canadians, Mexicans, Brazilians, etc… but we have taken that word to just mean U.S.)

    It’s hard for us to understand why others would feel this way because no other nation is trying to impose their view on us.

  • http://www.stillthinkinghq.com CubitGuy

    ROFL How are people supposed to know what “The Button of Madness” does?!

  • Chris

    #4: Forcing the user to view the Shopping Cart every time an item is placed there.

    I have to disagree. Viewing the shopping cart every time, but providing a clearly labeled button to “continue shopping” (returning them to their last location) works much better than updating some little counter on the screen that they may not notice. It also gives them the ability to delete an item, if they found a different item they’d rather have instead (example: I’d rather buy “Book B”, than “Book A”, so I’m quite happy returning to the entire shopping cart list where I can see all the information I need).

  • Chris

    Overall I think these are good words to live by. but…

    #1 – I called it a ‘Purchase Order’, but mine is a wholesale site… I thought cart didnt sound professional enough for wholesale… but I think it would intimidate retail shoppers

    #2 – ‘Add to PO’… though ‘Add to Order’ works in all versions of English, including English as a 2nd language.

    #3 & 4 ‘ I disagree… showing them the cart/order is the BEST visual feedback… What do you expect some java crapplet that makes the item fly across your browser and land on the little cart icon?

    #5 ‘ Yes this pisses people off, however it makes lots of money… just ask AOL, the pioneer of this tactic… or godaddy (the ‘No thanks’ button is nearly invisible)… personally, I don’t do it, I think its cheap and demeaning.

    #6 ‘ I go else where if I have to register first… I don’t want you to have my marketing info (which, lets face it, is like me giving you cash for absolutely nothing except the privilege of doing business with you) That said, you have to register to even browse the site I built… the owners are very paranoid about competition… foolish in my opinion, but you code what your paid for. (at least they don’t #5

    #7 ‘ I use both a remove button, and a 0 out, to catch whatever people are looking for… why? See #8

    #8 ‘ If you have to explain it, its too freaking complicated… newspapers write on a 6th grade level for a reason…

    #9 ‘ I wouldn’t go so far as to put it on every line… or even every n lines… I think top and bottom of the list are plenty… if your buying a lot, you know you’ll have to scroll to see the end of the list.

    #10 ‘ It would be a perfect world if every site would just let you type your zip code to see how much it’s going to cost you… but most don’t, and most customers expect this…

  • Dean

    I totally agree with all of the points in the article. Some individual points:

    2. Until I’ve actually paid for an item, I haven’t bought it. “add to cart” is the best text for buttons IMO.

    3. Some kind of small text at the top of a page that says “you have x items in your cart” is the best way to do this. You don’t need anything to “fly across the screen” as someone else put it.

    10. Nothing pisses me off more than having to go through all of the steps to buy a $5 item just to find out I’m going to get charged $12 for shipping. You don’t have to give the person an exact shipping rate up-front, but at least give them some kind of estimate. All of the e-commerce sites I do have a simple “order info” page which either has a chart for fixed shipping rates, or very plainly says “shipping charges are based on actual UPS costs”.

    Make no mistake folks, people usually buy from the site that sells something for the lowest price INCLUDING shipping. If you don’t show them that info up front, they may go elsewhere.

  • Parratjie

    John said “It’s because Americans are stereotyped as being brash and insensitive to local cultural behaviors.”.

    As a French-born Canadian I can assure you that French people are FAR less accepting of other cultures, languages and behaviours, than Americans. This is true of many European countries.