10 Tips to Design Usable Shopping Carts


The everyday tasks in our lives are being revolutionized by technology. One task that technology is helping to simplify is shopping: the task of buying products in stores is just not as convenient as online shopping.

With that in mind, it is becoming more and more important to pay attention to the usability of e-commerce websites.

When customers want to buy a product, they want the process to be quick and easy, without any hassles.

Here are 10 tips to help you create usable e-commerce checkouts and shopping carts.

 

1. Full page and mini carts

Shopping carts often come in two forms, a fully functional cart that is contained within a page of its own and a “mini” shopping cart, usually located in the sidebar, or above the page fold. The best practice is to include both.

Mini shopping carts show information within a small area that doesn’t take away from the rest of the layout. Here is an excellent example of a usable mini shopping cart.

When a product is selected, the item is immediately shown in the mini cart. After you continue shopping, the details minimize and only the number of items and total price is shown. Also, there is a link from the mini cart to view the full page cart.

laskys


With the full page cart you can provide more information and more options than a mini cart.  For example, information  such as product details, remove/edit items, tax prices and shipping options can all be included in a full page cart. The full page cart example below also displays a mini cart in the upper right corner.

action2

 

2. Checkout: Step-by-step or one page

Using a step by step method makes the checkout process easy for the customer to follow. Take a look at the Apple.com checkout page below. The checkout procedure is performed in four different steps: Sign In, Billing & Shipping, Payment and finally Verify/Edit.

This is a well structured process and you should certainly consider using something similar to this when designing step-by-step checkouts.


apple_checkout1

Besides a step-by-step process, another option is to include the shopping cart, personal information and shipping/billing information on a single page.

This can work nicely if done with a good layout. The following site uses a good single page checkout process. There is a table at the top which contains the cart, with the purchase information forms below.

realmac_cart1

 

3. Link from mini cart to full cart with an icon

When building a shopping cart, there are subtle features that impact the customer’s experience. Clicking on the mini cart should link to the full cart and an icon should appear alongside the mini cart to draw the customer’s attention to the mini cart and this link.

The following website is a perfect example of this. These buttons are in a foreign language, but the shopping cart icon can easily be recognized by anyone.

iluminejp

 

4. Make checkout/add to cart buttons obvious

When designing an e-commerce checkout and shopping cart, it’s important to include easily accessible links to guide the customer through the checkout process. It’s best to use large obvious buttons. Make sure that the buttons contain clearly legible and understandable text, such as ‘Add To Cart’ or ‘Continue to checkout’.

The buttons below are well styled and well placed directly under the information of each product. If the customer can’t find the checkout button, they can’t buy your product!

bohemian

 

5. Use a readable table based layout

When designing a full shopping cart, it’s always best to use a table based structure. The layout should efficiently display the information without interruption. Use standard fonts and avoid using complex backgrounds.

Always be sure to use strong borders to separate cells, but don’t style the borders. Information in a shopping cart table should be easy to see without distraction from other elements, or complex styling.

This is a very clean cart. The table is easily readable and it contains all the necessary elements. More importantly, note the image. The image of the product gives the customer a good visual of what they are buying, which can help customers confirm that they are  indeed purchasing the product that they intended.

dbh1


 

6. “Continue Shopping” link

One more feature is a “Continue Shopping” link. When clicked, the link should bring the customer back to the store and catalog. This is generally placed under the table of the full shopping cart, where the customer can easily find it.

The example below shows the “Continue Shopping” and the “Go to Checkout” links. Notice how easy it is to find these.

threadless3

 

7. Avoid too many fields

There’s nothing more annoying to the average consumer than having to fill out an unnecessary amount of input fields in a form. You want the checkout process to be as easy as possible, because if the customer does not find it convenient, they will most likely not buy from the site again.

Keep the number of input fields to the minimum, place similar input fields into groups and provide headers for each section. An appropriate amount of white space will also help to make the form feel more organized.

The following form is minimal and contains a small number of input fields.

deckpeck

 

8. Provide plenty of help elements

There are many places that help elements should be included within the shopping cart and checkout process.

In the shopping cart, include quick tips on how to best use the cart’s features and explain the checkout process. Labels in the cart and on the checkout form can be explained using tooltips.

On the checkout page, you can include sample text as to what should be included in each input field as well as examples of specific billing information, such as an image showing where the CVD number on the back of a credit card is located.

In the form below, the input fields have explanatory sample text and the middle column includes additional helpful information.


threadless2

 

9. Give Visual Support

Visual support can be anything from diagrams to simple icons. An image showing the location of an account number on a credit card helps customers through the process of entering their billing information. Icons to support text are helpful to make the form easier to scan through.

The following image shows a very convenient click and drag cart. The image of the cart icon tells customers that they can drag items into the cart. The cart also has a label above it which says “Drag Stuff Here.”

nerve

 

10. Always Include a Verify Page

The most important feature of any checkout process is certainly a verify and edit page as the final step. Usually customers would like to confirm that they are buying the correct items. Every good checkout process has this feature as a last chance for the customer to review his or her order before they commits to it through the payment process.

On the verify page, you should include all the information about the product in a table, similar to the full page checkout. The customer should be able to cancel their order, or be able to use a  “Continue Shopping” link to add more items. Make the button to complete the process very evident, eliminating even the slightest confusion.

 

Showcase of Usable Carts and Checkouts

IconDock – This site has a very usable and convenient cart. All you have to do is click and drag an item into the panel. It automatically calculates the total and is a very quick shopping solution.

icondock


MediaTemple – Here is a very nice pricing table containing obvious checkout buttons with good placement.

mt2


Early Learning Centre – This site has an excellent full cart, a mini cart, and a step by step checkout procedure illustrated with a timeline.

earlylearning


Roxy – This is a simple cart, and it also has a helpful mini cart that shows the customer the running total.

roxy1


Mia & Maggie – This is a nicely styled cart that is easy to read and contains a large checkout button.

miamaggie



Mia & Maggie – Here is another example from Mia & Maggie, this one of the checkout page. This checkout uses a step by step process on a single page, which is a very clever and usable layout.

miamaggie22



Amazon – Amazon is yet another popular e-commerce site that uses a step-by-step process.

amazon1


Evel – This is a very usable and quick checkout without too many input fields on the form. Also notice that the shopping cart is located above the form, which can be very convenient to some customers.

evel


Design By Humans – Another example of a perfect single page checkout. This one contains an order summary, which can be very helpful. There are numerous help elements throughout the form too.

dbh2


Bridge55 – A nice shopping cart with an image of the product.

bridge55


Cosmic Soda – A good e-commerce website using both a mini cart and a full cart.

cosmic1


Incase – A well organized checkout with a minimal amount of fields.

incase


Shoon – A great mini cart that displays a popup window containing additional information when the “Add to Cart” button is clicked.

shoon


Wunderbloc – A lightbox shopping cart.

wunderbloc


Bored of Southsea – A good mini cart and organized full cart.

bored


Subnormals – Use of mini and full cart and a step-by-step checkout process.

subnormals


AlphaStore – A table structure and a mini cart with a recognizable shopping cart icon.

alphastore


Me & Mommy-to-be – A beautifully styled cart that isn’t over the top with decoration.

mommy


Written exclusively for WDD by Matt Cronin from Spoonfed Design.

Which tips are the most important when designing an online shopping cart? Please share your comments with us.

  • http://www.michaeldsavage.com Michael Savage

    Thank you! I have a big custom cart project coming up!

    Truly a great resource.

  • http://webdesigntuts.com Brian

    Icon Dock might very well be the sexiest and easiest shopping cart I’ve ever seen.

  • http://www.hamroawaaz.com Rahul

    Agreed with Michael here. Really a great resource for any designers to design usable shopping carts.

  • Bernard

    Very cool tips. Will spend tonite going through it!

  • http://creamycss.com/ Creamy CSS

    Nice showcase of carts and checkouts! :)

  • http://blog.insicdesigns.com insic

    nice tips, perfect timing coz im in my early stage of developing my shopping cart application.

    • http://www.RedesignYourBiz.com WebDesigner

      good luck insic :)

  • Niels

    Nice article, some really useful information regards how and where to put your shopping cart. This link might be useful to some, a css webshop gallery, http://www.csswebshopgallery.com

  • http://www.patternhead.com Patternhead

    Some nice clear examples here.

  • jisoo

    very nice tips. thanks!

  • http://www.webdesignerdepot.com Walter

    Thanks for the nice comments so far :) Feel free to add any tips that we may have missed.

  • http://www.sandersdesign.com Martin – Sanders Design

    Interesting to see the impact Magento is having, at least a couple of the listed sites used standard Magento functionality. FoxyCart also provides a nice option if your client requires a CMS focused site. FoxyCart would be ideal for MODx, Expression Engine or WordPress.

  • http://www.crearedesign.co.uk Adam – Creare Design

    Very good list or usability points for e-commerce shops. That cart where you can literally drag your products into the cart is a great step in the direction of good usability, further removing unfamiliar elements of the Internet HCI that might put some shoppers off.

    The one page checkout is something employed my Magneto and I think it works quite well, although I’m more comfortable with a step-by-step process so I know I’ve not missed anything.

  • http://usabilitythoughts.com usabitity trhoughts

    I was going to write an article on shopping carts. I have a draft and i’ll link it to your article. It pretty much covers all the issues.

    One major one: the lack of primary action buttons on shopping carts, you can see in some cases 4-6 buttons with the same weight. That’s not good.

  • http://usabilitythoughts.com usabitity trhoughts

    oh, and drag and drop carts are useless.

  • http://www.RedesignYourBiz.com WebDesigner

    wow, very nice designs.

    surely worth a bookmark.

  • richg

    One thing that always bothers me is to have to wait until the last page to find out how much a site is overcharging me for shipping and “handling”. Once I have all the items I want, let me quickly put in a zip code and tell me what the charges will be, I don’t want to have to fill in my name and address (or worse yet, create an account) until after I know what I am going to be charged.

  • http://www.marocplus.net Directory marocplus

    thanks

  • Wonder

    Way off subject but your RSS feed doesn’t work in outlook for me http://www.webdesignerdepot.com/rss.htm

  • http://www.rethinkseo.com Sean Hurley

    Hey,, A few tips not included might be:

    1. show product thumbs in cart so you can remind your customer visually what they are purchasing.

    2. Always show the related items or “featured products” under or around the shopping cart. Addons can be much more profitable then many business realize.

    3. Make it visible that you have a secure ecom module so users that are not familiar with online shopping can see they wont be defrauded. We have to realize even though we all now so much about online browsing and shopping most of the population are in the “baby boom” gen so knowledge levels are lower for most customers using your shopping cart.

    4. Having the ability to do “live chat” while shopping has always always been a great tool so you can confirm your shopping cart items right on the spot as opposed to sending an email or calling a long waited customer service agent. When you have to leave a site or wait for your items you just lost your customer.

    5. Wishlist is a great tool to learn more about your customer and what they are looking for so you can target your marketing efforts accordingly.

    …ps how do i get a thumb for my posts?

  • http://twittercounter.com Arjen Schat

    The designs look nice, but how do you actually know of these designs work the best? Are they multi variant tested for instance? Do you have benchmarks?

  • http://flexewebs.com/semantix Jason Grant

    Some of the key guidelines are:

    1. Keep it simple
    2. Present as few form fields as possible
    3. Make it quick
    4. Make sure it works under as many environments as possible
    5. User’s processes should be aided as much as possible (if user makes a mistake help them fix it quickly)
    6. Don’t try and cross-promote during checkout
    7. Make it visible
    8. Keep the design clean and logical

  • http://www.goodusability.co.uk David Hamill

    This is a nice article. Drag and drop shopping carts might provide the wow factor, but this is at the cost of usability.

    I’d recommend showing delivery costs as soon as possible. Also allow people to buy without creating an account, as shown in the Mia and Maggie example.

  • http://dezinerfolio.com Navdeep

    Nice tips…

    @3drockz

  • http://www.plasticprinters.com/plasticbusinesscards/ AnthonyProulxofPlasticPrinters

    Great thoughts very beneficial,

    Just wish I could build a shopping cart from the ground up instead of using someones else code or already build shopping cart.

    Still there tips even a non programmer can utilize!

    Thanks!

    Anthony Proulx

  • http://thedesignsuperhero.com aravind

    wow.. nice tips… :)

  • http://www.przyroda.org.pl Sklep Zoologiczny

    Really great tips, I’m going to set up some project and for sure I’ll use some of them.

  • http://www.bioinfiz.com bs kishore

    Plenty of practical and essential tips.Surely a must read.

  • http://creativeacclaim.com AlfredN

    Brilliant tips, I will definitely keep these in mind for the future.

  • http://www.2advanced.com Pardzee

    I have some other recommendations:

    use google or paypal or amazon shopping cart
    use oscommerce.com

    1. unless you are a programmer, how are you going to make your own shopping cart?
    2. unless you are a designer and a programmer, how are you going to successfully design a decent shopping cart experience?

    Tip: don’t make users create an account before they can checkout, just let ‘em checkout right away, not everyone wants an “account” at a million websites with a username/password to keep track of

  • http://www.bitwords.com web applications consultant

    i want to add this to design e commerce shopping cart to Supply the required information about your shopping cart plans to your website designer and/or shopping cart provider. Your website designer may need design guidelines for your website to meet a shopping cart specifications, while your shopping cart provider will need your selected payment gateway information and some sample data on your products for testing (most shopping cart providers will have a recommended format for you to deliver this information).

  • Sudhir

    Wow, some wonderful tips here since I am looking to set up something like an ecommerce site. All I need to do is to find a few dropshippers and then start out on my ecommerce life.
    I have dabbled with google adsense and do have a few site up but they are really on templates and an example of one of my sites is at http://jetvre.com but I am now looking into setting up an ecommerce shop once I can find some reliable dropshippers.
    So the ideas here seem to be great and has given me greta food for thought.
    Will keep coming back here to see if there are any more new ideas and suggestions.
    Great work.
    Sudhir

  • http://www.art2code.com art2code

    Nice tips! thx

  • http://randycaruso.com Randy Caruso

    Alright, this is all perfectly reasonable stuff, but what’s missing here is reference to some ideal carts that support these ideas…anybody want to push anything forward?

  • http://iwonderstudio.com Lana

    Nice post & very good overview. To people who like to keep it simple (kiss rule) I would like to recommend good book from 37 signals “Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points”.

  • http://www.pitstopmedia.com Rohit

    The continue shopping button is an important page element on shopping cart pages. Potentially, a good design can increase the average order value of websites (or decrease it J ). Therefore choosing the name of the button, the position and the selection of colors and size may affect the defined KPI of the page displaying it. We analyzed 102 continue shopping buttons from well know websites and we put the collection on our blog. Have a look and leave a comment.

  • http://www.ballardcreative.com James Ballard

    Very nice list. I am designing a shopping cart for a client right now and a few of these pointers will be very helpful.

  • http://www.pitstopmedia.com Traian

    Hi Matt,

    This is an useful article, but designing a nice performing (low abandonment rate) checkout process goes beyond the design it self. Your guidelines are good anyway.

    Keep in mind that each design element and position counts. Here’s a nice collection of shopping cart icons. Have a look!

  • Richard C Haven

    Have you considered a slide-out shopping cart (cf Navio/gBox – RIP) ?

  • Ido Schacham

    Great post. I’m working on a shopping cart design at the moment, this really helps me out to see what design options are out there.

  • http://herbalremedy.in Herbal Remedy

    Inspirational really.. I hope now valuable shopping cards move forward to next level and come out with something new.

  • http://filmizlex.org film izle

    Really nice designs, but give more information about these designs will be better I think though.

  • http://www.swamiwedesign.co.uk/avactis.php avactis.designs

    Nice post, I’m using avactis shopping cart for my designs.
    So it really useful article for me..

    thanx!

  • Sjors Pals

    Sometime ago i saw a really nice feature where it was possible to let someone other do the payment, this can be useful for company orders, or if kids want to order something on the net which have to be paid by their parents.

  • sadik

    thanks

  • http://www.webdesign-constanta.com web design constanta

    The design is one thing, and the programming is another. That’s why designers and coders should collaborate on such projects.

  • http://www.the-a-crew.com The A Crew

    Great set of guidelines! I have found that many users want to be able to verify their purchase and make last minute changes if necessary.

  • http://www.filmportali.com film izle

    This is an useful article, but designing a nice performing (low abandonment rate) checkout process goes beyond the design it self. Your guidelines are good anyway.

  • http://www.markrushworth.com mark rushworth

    the ‘continue shopping’ link is counter intuitive as it gives no clarification of where the shopper will go once the link is clicked.

    why do people seek to stop people from using the in-built browser buttons to navigate back and forth, instead of making people use on-page elements.

  • http://www.avaffiliate.com Virtue Affiliate

    Very good tips, especially this with avoiding too many fields since now shopping carts they have for example possibility of shopping as a guest, and in this way also the number of steps to finalize the order it will be less.

  • sc

    Interesting to see a couple using Magento in this list

  • http://www.bedavafilm.org Bedava film izle

    Nice tips

  • http://kampusteyiz.com film

    nice tips really helpful thanks for sharing

  • J

    Which free e-commerce system is recommended?

  • http://www.muratoloji.com programlama

    Nice tips

  • http://crazy-tips.blogspot.com/ Crazy Tips

    Excellent collection of great design. Thanks for the post, keep the good job

  • http://www.healthywizard.com/Yoga%7E41.htm Practice Yoga

    i love all of the examples on here, especially font case, what a great blogg, just happened to fall upon it whilst searching, will pass this on to a friend of mine who will be very interested, thanks

  • http://www.consumeradviceline.com/Consumers-Legal-Rights/Y2010-2-1.htm consumers legal

    Great guidelines and know how you have on here if i might say, like your help tips and information, i have saved you in my favourites, thanks for the inormation!

  • http://www.smoothboothdesign.com Josh

    Interesting article, useful tips.

  • http://aphrodite1994.com Aphrodite

    Good set of guides, we followed something similar, really helped us.

  • Estavan Martinez

    Great Article- Working on a project for a cart redesign and these are great things to keep in mind when doing so. Thank you!

  • http://www.denimgeek.com Denim Geek

    I think a weel designer cart and checkout is crucial on any site. I bet I’m not alone when I say I’ve had a few bad and slightly annoying experiences when buying online.

    :)

  • http://www.impactthreads.com Danman

    Nice work! Very practical tips

  • http://www.faebric.com Tobias

    Extremely helpful for my current project – thanks for the great article!

  • http://www.rocketheads.com Steve Miller

    Just cam across your site. This is something that we will bear in mind as we redesign our Magento website

  • http://flyertemplates.prowebmedia.net flyer templates

    Some of the things apply not only to shopping carts, but to web applications in general.

  • http://www.impulsis.com magento designer

    Cool story, love it. btw, Mia & Magie store was developed by our company ^-^

  • http://precisionweb.net Josh

    Great suggestions. Maybe an easier way is to use Precision Web. http://www.precisionweb.net has an easy to use shopping cart that let’s you import your web design into the shopping cart. Ideal for web designers.