What are your eCommerce Shopping Cart best practices and notable UI examples? [closed]

Question

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.

Answer 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.

Answer 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.

Answer 3

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

Answer 4

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...

Answer 5

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/