5

What are the best shopping carts you know in terms of visual design and usability.

In addition, provide best practice tips when designing a shopping cart as @scunliffe did.

2
  • List questions should be community wiki. :-)
    – Rahul
    Sep 5, 2010 at 11:17
  • Changed to community wiki. "Best" is also subjective, so consider revising it. Thanks :)
    – Dan Barak
    Sep 5, 2010 at 11:52

5 Answers 5

12

I'm not sure I know of the best UI's but I know the ones that frustrate the heck out of me ;-) Logic would suggest that the opposite features are the ones that make it better.

  • I hate not being able to see my total. As soon as I am "in" my cart, I always want to be able to see my total price.
  • I live in Canada - depending on the site/product, Shipping Costs range from acceptable to astronomical. Please provide the shipping costs before I have to enter my credit card details (or at least an estimate or a link to a chart of costs)
  • Many users will enter the cart/checkout to get a final price as part of comparison shopping. If you block them from getting that final price with signup, credit card entry etc. you may lose a customer that would have bought from you had they been able to see the price.
  • If possible, be sure to visually inform the user when they can continue without being charged. E.g. a "continue" button is fine to move farther along, but the actual purchase action should be clearly labeled. E.g. "Confirm Purchase" or something. I was on a site once where pressing "Continue" charged my credit card (I was not impressed!)
  • Include information or at least a clearly labeled link to the return policy, and the expected delivery timeline (e.g. next day?, 3 days?, 6-8 weeks)
  • Provide stocking information (availability) as early as possible, no later than on the cart overview
  • Make it easy for me to change the quantity of an item in my cart... or remove it completely
  • Provide a link from each item in the cart back to the information page for this particular item
  • Consider the option for me to "save" the cart state, to return later.
  • Clearly identify the payment options up front. I often prefer to pay by PayPal for example.
  • Provide a phone # or link for customer support...
0
4

I'd do some research over at Design Meltdown. He's collected lots of eCommerce sites, and I'll bet the do alot of different cart designs. Experience them, see which ones works best.

http://2010.designmeltdown.com/category/site-types/e-commerce/

2

Given that most of your users would have used Amazon, I would tend to just copy what Amazon does. I think in the case of a shopping cart:

Best == It works, and I don’t need to think about how to use it

3
  • LOL! But right on the money. Copying the competition is an excellent business strategy. <rant> That said, nobody's perfect, including Amazon. I know of two things Amazon fails at. One is adding a book from your shopping cart to an existing order (to combine shipping costs). Another is when you cancel an order (in order to combine it with the stuff that's currently in your shopping cart), all your books are gone from any kind of temporary but accessible place. You get to shop all over again. Or yu can phone Amazon and they'll tell you what books you had in the cancelled order. </rant>
    – JeromeR
    Sep 6, 2010 at 17:59
  • Amazon offer a huge number of products and their UI is geared for that. I have a feeling that many of their design decisions may not be optimal for smaller stores.
    – idophir
    Sep 7, 2010 at 7:39
  • Found someone who agrees with what I wrote above... uxmyths.com/post/718217318/…
    – idophir
    Sep 7, 2010 at 15:41
2
  • Use high quality (but optimized) images of products. Link to other (large) images on product page.
  • Make sure the "add to cart" and "checkout" buttons obvious, and big enough to touch on mobile devices.
  • Avoid large, slow-loading flash elements.
  • Use a mega-dropdown, instead of nested drop-downs (this is a bit subjective, I know, but I think it's one of the better UI patterns for e-commerce).
  • Make the checkout process as easy and deliberate as possible. Ensure the user knows where he/she is at in the process and how many steps are left.
1
  • Be aware of business goals vs. usability goals. For instance some stores create a "funnel", where once you are on the checkout pages there is no more nav for the rest of the site. The idea is to not distract you from the buying process so you finish. This is a business goal, and as a user I find it frustrating. What if I forgot something and want to go try to find it to add it to my cart? Sometimes I have to actually hack the URL to get back to the main site again.

  • If using a multi-step wizard, make it easy to go back and change information that you entered earlier that you now realize is wrong once you get to the confirm page. Do not make the user click Back, Back, Back and then Next, Next, Next. If possible, create a one-page checkout, or let the user edit any information on the last page on the fly.

  • Do not require a lot of info from the user to create an account just to save their shopping cart or wishlist.

Not the answer you're looking for? Browse other questions tagged or ask your own question.