Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

12 Tips For Designing an Excellent Checkout Process

Shopping online can be a great experience. You don’t have to leave the comfort of your home and you can quickly compare and read about all the competing products in order to pick the best one for you. But it can also be a little frustrating if the process isn’t designed correctly.

Looking around for that checkout link, having to fill out registration forms and then being told the product is out of stock isn’t going to make your day. Spend a little bit of time fine tuning your checkout process and polishing off the user experience and you’ll be rewarded with happier customers and more sales. Here are 12 useful tips to help you do just that.

You may be interested in the following related posts:

1. Don’t require registration to shop Link

Your customers are here to shop, not fill out forms. Make sure that the registration is done during the checkout process and not before — and certainly not before a visitor places goods into their shopping basket. Sign-up forms are barriers because they take effort and time to fill in.


Target6 requires an account, but it’s only prompted after you’re ready to check out.

By moving these barriers further down the line you increase the chance of your visitors becoming paying customers. This is because they’ve already spent time shopping so they’re less likely to stop now and waste that initial involvement. If that barrier is placed right at the beginning however, they might just walk away. Think of it as holding the door to your store open for your customers to come in.

2. Inform customers if the item is available Link

Be clear about the availability of the items and inform your customers about the stock levels. If an item isn’t available, don’t take your potential customer through several steps just for them to discover that they can’t actually buy it right away. Don’t just display stock levels on product pages either, show them right on the search results page.


Overclockers8 provides detailed stock information right from the product listing pages.

Additionally, if an item is out of stock right but will be available at a later date, offer a pre-order option so those people who aren’t worried about getting it right away can still make the purchase.

3. Allow your customers to easily modify the order Link

Everyone makes mistakes. People put the wrong goods into their shopping basket or change their mind. Make sure you don’t frustrate your potential customers during the checkout process by making things easy to modify.


IconDock10 makes sure to provide simple controls to change the quantity of an item or remove it.

If someone wants to remove an item or items from their cart, don’t force them to enter the zero amount; instead, provide a “remove” link that will delete a product from the cart and ensure order modification is quick and easy.

4. Provide users with real-time-support Link

Since the checkout process requires user’s input, it is very likely to assume that many users might experience problems – caused by any misunderstandings or some particular needs or interests that can not be easily defined using the available web-interface. In these situations it may be crucial to provide users with professional, personal assistance instead of sending them to large help- or FAQ-pages that may not have the solution to user’s problem. And, of course, if users don’t get the help they need and have doubts about the whole thing, they are very likely to cancel the checkout process.


The Dell Store provides its users with telephone- and chat-assistants. If a user has problems during the checkout process, she can immediately require assistance and get support in a couple of minutes. That’s user-friendly, helpful and may increase your conversion rates.

Therefore it’s a good idea to add a chat- or telephone-assistance for the checkout process. Not every company can afford it, but middle and larger companies may want to consider this option, particularly if the checkout process is more involved.

5. Keep the ‘Back’ button fully functional Link

The back button is one of the most used buttons in a web browser, so you can be sure some people are going to employ it during the checkout process on your site. Some sites disable the functionality of the Back button through automatic redirects or error messages, which is sure to negatively effect the visitor’s experience.


Ticketmaster gets confused when you try to go back.

Not only should the back button lead to the previous page without encountering any errors, you should also save the user’s data so that it is displayed again if it’s a form. This allows people to make adjustments and carry on without having to re-fill the whole form. Yes, sometimes it’s too late to go back, like after clicking that last ‘Complete order’ button, but by ensuring that all the other pages get along with the Back button you can deliver a better user experience to your customers by saving them time and frustration.

Your customers will need to review their basket before clicking that final button that will complete their order to ensure they’ve actually got what they came here for. Item titles alone aren’t the best method for helping your visitors to quickly scan over the basket, so make sure to add pictures and product specifications — e.g. size, color, hardback or paperback.


Amazon211911 specifies colors and details, e.g. paperback/hardback, links back to the product but fails to provide thumbnail images.

Oxfam13 shows thumbnail images of each product for easier scanning.

Additionally, you should link these items to their product pages just in case the customer wants to verify that it is indeed the right item.

7. Provide a progress indicator Link

Checking out is usually a multi-step process. This means the customer will have to navigate several pages before the order is complete. To make this process usable be sure to add a progress indicator that says exactly at what stage of the checkout process the customer is right now and how long there is left to go — i.e. list all the steps.


Apple1714 shows an elegant progress indicator on their checkout pages.

Knowing where you are in the topography of the site or process will give your users a sense of control, which is important from a usability perspective. Also, knowing what stages are yet to come will eliminate any confusion — i.e. they will know when they get to the last step. This will makes it easier to click through as you know you can still modify or cancel the order at any of the stages before that.

8. Keep the checkout interface simple Link

The checkout process is different to the rest of the browsing experience on your site. During this process your customers aren’t shopping — they’re making the purchase. This means all the browsing controls are redundant here and would only distract your customers from the task at hand. Eliminate these unnecessary elements — e.g. product category links, top products, latest offers, and so on — to keep the interface simple.


Dell’s15 checkout pages lose the product navigation and focus solely on the checkout process.

Provide a “return to shopping” link in case the customer wants to go back and buy something else. Additionally, ensure all the buttons that point to the next step in the process are large and prominent so they’re not missed.

9. Don’t take the user out of the checkout process Link

It’s essential that the checkout process isn’t disrupted, for example, but taking the customer to a different page. Taking the user out of the process can cause two problems: 1) they might get confused about where they are and even lose the checkout page by closing the tab or window. 2) they may get distracted and fail to complete the process.


Laskys show help tips when hovering over certain elements to clarify their function.

To remedy this, we really need to find a way to show all of the necessary information on the checkout pages themselves. If you need to provide some help or information that doesn’t fit on the current page, use floating windows or, as a last resort, a pop-up window to display this. This allows you to present new material to the user without taking them out of the checkout process.

10. Inform the users about delivery times Link

Shopping online has one big disadvantage to shopping in your standard ‘brick and mortar’ store: you have to wait to get your stuff. To address this be sure to tell your customers when they can expect to receive their products.

Amazon thank you16

The Apple17 Store adjusts shipping estimates with AJAX as you customize your order.

This is essential for a couple of reasons. Firstly, your customers may need to make sure there is somebody at home to receive the delivery; and secondly, you’ll set an expectation so they won’t need to keep guessing. Make sure these dates are shown as early as possible, preferably on the product pages themselves, so that your potential customers can judge whether or not they’ll get the item fast enough for their needs.

11. Tell the customers what happens next Link

Okay, your customers have completed the order and clicked that last button — so what happens next? Finalize the order with a “Thank you” note. This is just being polite and your customers are sure to appreciate the kind words.

Amazon thank you18

Amazon2119 thanks you for placing your order and informs you about next actions.

Also, make sure to tell your customers what will happen next — i.e. a message informing them that they’ll receive a confirmation email when the goods are shipped. This will clear up any uncertainties about their order and set the right expectations.

12. Send out a confirmation email Link

Your customer may have checked out and placed their order, but the process isn’t yet complete. Send out a confirmation email with the details of their order and a delivery estimate. The order details will be helpful as they’ll allow your customers to verify that they’ve ordered the right things.

Amazon email confirmation20

Amazon2119 sends you an email after you’ve checked out to confirm the details and also explain how you can modify it before it’s shipped.

If there’s a mistake, they should be able to log back in and modify their order before it has been shipped. Simple mistakes like choosing the wrong size or color will happen, so make the shopping experience easy and supportive for your customers.


Shopcomposition23 uses an elegant and minimalist checkout design.

Inkd’s25 checkout pages are clean and simple.

The beautiful checkout page at Atebits.

Threadless26 makes everything clear by providing plenty of information.

Swarovski28 clearly shows what stage of the process you’re at with a large progress bar at the top.

Openmoko’s30 simple 2 page checkout.

Sofa’s32 one page checkout.
Panic Coda33

Panic’s34 beautiful single page checkout page for their Coda editor.

To Conclude… Link

Building a good checkout experience is about several things. It’s about eliminating distractions to help the user focus at the task at hand. It’s about providing all the necessary information and help so that the customer understands all the stages of the process. Most important, it’s about making it easy, because after all, the quicker a customer can check out, the happier they will be and the quicker you’ll close the sale.

You may be interested in the following related posts:

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40

↑ Back to top Tweet itShare on Facebook

Dmitry Fadeyev is the creator of Usaura, a micro usability testing service, and the founder of UsabilityPost, a blog about good design and user experience. Additionally, you can read his thoughts on design, art and practical philosophy over at his personal blog.

  1. 1

    Love these tips and how you’ve provided examples. Setting expectations is always an important thing to do in processes like these.

  2. 2

    UX Associates

    May 28, 2009 8:07 am

    Great article – notably missing from this are a few key principals:

    (1) Reinforce privacy and security – the idea is to continually build user confidence until the order is complete.

    (2) Be very careful how coupon codes redemption controls are presented. Over promoting them basically tell users that someone else is getting a better deal. Even worse, is that users leave the site to search for codes only to find a better deal at a competitor or abandon completely

    (3) Be sure to provide alternative payment methods (e.g. PayPal, Google Checkout, BillMeLater). Once someone has decided to give you their money, make it easy as possible and get out of the way

    (4) Be careful about how many steps to require and how much info you need to collect. Don’t overwhelm users with massive forms to fill out (break it up with logical steps), only require what you need to fulfill the order, don’t ask for info if you already have it (pre-populate – or ability to copy shipping info to billing), perform inline validation of info to prevent error looping and clearing of information.

    • 3

      To be honest, point one might be a bit moot, since “reinforcing privacy and security” might backfire. If someone you just met would tell you “Hi, I’m Bob and I’m not a compulsive liar…” – would you feel like he’s not a compulsive liar?

      Funny, because you kind of make that point at the “coupon code” thing, in a way: the opposite of your intention might happen!

      I like your points about payment options, never short your users on that field. And point four is like anything in life: don’t put unnecessary hurdles in front of your clients :)


  3. 4

    Gerd Wippich

    May 28, 2009 6:56 am

    Another very useful article. Thank you very much!

  4. 5

    great stuff

    typo in the second header baythewaj

  5. 6

    Wow! Thank you!

  6. 7

    Quakeulf >:3

    May 28, 2009 7:31 am

    No. 1 = YES YES YES!!!!!! Making shopping as easy as possible. I fucking hate all the login shit that many online stores have.

    Nice article, I hope the culprits will look at this and feel despair. >:3

  7. 8

    John Hoff - WpBlogHost

    May 28, 2009 7:41 am

    All great points. I’d like to add that during the checkout process, it’s often times good to change up your menu some so as to not leak out external links. Maybe the header can link to your home page, but that’s it.

    If you’re running a blog, don’t show your sidebar with a ton of blog articles, banners, etc.

    Keep it simple.stupid.

    (There’s a typo in this article. Might want to revisit the title in #2)

    • 9

      I agree with what you said about not having additional links. I would also note: Website checkout should be tracked with Google Analytics code to see what your ROI will be on keywords you are using on search engine optimization or PPC.

  8. 10

    The 1st one is so basic I don’t know how some sites don’t get it right.
    Having to register is like asking for the passport at a shop’s door. You really need all that info about me so I can take a look, see what you sell and maybe compare prices? No thanks, I’ll look somewhere else.

  9. 11

    On point number 2, could you explain why it’s necessarily better to provide customers with exact stock levels as opposed to simply saying “In Stock”? I’m not so sure that you’d want your customers to have specific inventory level information.

  10. 12

    Thank you! Its very helpful info.

  11. 13

    The sceenshot of Openmoko’s checkout page is actually Shopify’s ( checkout system.

  12. 14

    Don’t points 9 and 6 contradict each other? Giving the user the opportunity to link elsewhere will take them away from the buying process.

  13. 15

    Great read man, loved it a lot, but quick question. At times what if shipping is not as fast as your like.. do you recommend still showing it?

    • 16

      Consider the results:

      – Would you like to take someone’s money and have them feel good about it?
      (consequence: the user will think of you again when next needing your product/service)
      – Or would you just take that money and be done with it?
      (consequence: the user will not buy from you again, but you’ve got what you needed anyway)

      As you can see, it might deter people from buying from you if they know it’s going to take long… but next time, they might plan ahead and take the time it takes to ship into account!

      If you don’t, they’ll buy once, and be disappointed with your service!

  14. 17

    Alpesh Darji

    May 28, 2009 9:27 am

    Really Inspiring …

  15. 18

    Dennis Gearon

    May 28, 2009 9:46 am

    One H**L of a good article. If someone wanted to make some good money, and do the world and the Internet some good. A book explaining such simple but profound ideas about all business models on the net would make Millions.

  16. 19

    Have a look at, a small indepenent manufacturer – fantastic shopping basket and single page checkout. It really puts most major sites to shame.

  17. 20

    Good tips. I’ll be able to put some of these to use on my company’s store

  18. 21

    Nice article i just designed a site with a check out nice check list ;)
    Thank god i did every thing right.

  19. 22

    Leonid Lezner

    May 28, 2009 10:54 am

    And if you design the form for the checkout process you shoud read the book “Web Form Design” by Luke Wroblewski. It’s really helpful.

    I think it is a good idea to tell the user on every page of the multipage checkout what he is buying. When I am ready to submit the order or I am selecting the payment method, I always want to know what I am paying for and how much.

  20. 23

    Very helpful list. Thanks for gathering this.

    Also, I don’t know if anyone else noticed this, but Coda is on sale for 50% OFF, at $49. I saw that on the screen shot and thought, “That can’t be right.” I did some investigating and Panic is doing a sale on all of their software. The sale ends tomorrow, May 29th.

  21. 24

    Brian Temecula

    May 28, 2009 11:44 am

    I like’s checkout process the best. It has everything a checkout needs.

  22. 25

    Dean Higginbotham

    May 28, 2009 12:25 pm

    I’m starting to see a bit of a new trend when it comes to checkout systems. A lot of my boutique clients (, not itrackmine) are asking for checkout without registration. ie. no accounts, no log in, no “my account”. Just: add item(s) to cart, fill in checkout form, done. The company handles all the “my account” functions via emails and phone calls.

    It seems to really make their customers very happy, and close more sales. For a couple reasons I can see: SUPER easy checkout. No worries about yet another login/pw to remember. And, when they have a problem, they get to communicate with a real person.

  23. 26

    Thanks for the comments everyone.

    Cory: Good question. Providing stock levels could help you sell the item due to scarcity — i.e. if the customer sees there’s only 5 items left in stock as opposed to “in stock”, there’s a higher chance they’ll buy the item because if they don’t they may lose their opportunity. It also shows what items are in demand, which helps promote those products.

    UX Associates: Great points! Thanks for contributing these. Definitely agree with all you’ve said.

    Muhammad: Yep :) I wasn’t sure at first what to put for the label. The screenshot is of the Openmoko store so I reasoned that should be the label and link, but the backend is indeed provided by Shopify ( if anyone is interested.

    Khaled: Depends what you want to achieve. If you don’t show the shipping times you might close more sales, but at the cost of unhappier customers who had to wait longer than expected. Showing the times would set the right expectation but may put off some potential customers. I would lean towards setting the right expectations :)

  24. 27

    13) Inform the shopper of the shipping options available. If there is only one, tell them early on, before entering all the payment information.

    Where I live UPS is a real pain to deal with. FedEx is a lot easier. USPS is even better. I hate having to go through all the checkout process of a new store, enter in all my information to only, at the very end of the process, learn they only ship UPS.

  25. 28

    indeed this article is very useful, but it would be better if you have link for each explanation to the tutorial about how to make that.

  26. 29

    Fantastic! Thanks a million… I will definitely use these tips the next time I build a shopping cart.

  27. 30

    A very good compilation of good checkout tricks.

    But I really think that removing the “back” button from the Amazon webpage where your credit card was requested was a really success.

    It really created some confusion at first. But then, the shiny “continue” buttons and the soothing “don’t worry: you can modify your order later” really do the trick.

    Yes, you end up giving away your credit card number and purchasing. You were there because you wanted to buy. And there was no way back ;-)

    • 31

      On the contrary, I found it terrible.
      Who would want to give a credit card BEFORE seeing the final price, including shipment, taxes, fees if any?!
      Not for me, thank you very much.

  28. 32

    Marianna Samara

    May 29, 2009 1:15 am

    Nice article,
    A few months ago I had an e-commerce project myself that I blogged about it have a look:
    Muhimbi e-commerce site
    I agree too that points 6 & 9 are a bit controversial!

  29. 33

    Smashing Magazine rocks!

  30. 34

    Im doing a e-commerce project. It is just the info I need thanks!!

  31. 35


    I would like to add a very important point : a summary of the shipping address before the payment … because when you move, you not always think to change your new address in all your shopping account.

  32. 36


    lol I guess your are right, being up front with the customer will not only avoid problems with customers it will save you a headache. lol.

    What I might try to do is put the shipping estimate but maybe cut it a few days quick. See how that works ;).

  33. 37


    Stock levels are helpful when inventory is running low. For ex: if a vendor has only 3 units of a particular product remaining, then it’s helpful for the customer to decide whether s/he wants to buy it now or research the product further. Customers who are shopping with an intent of “definitely” buying, stock level probably wouldn’t make much of a different, simply saying “In stock” would suffice. However, to target the fence sitters, who need to persuaded to “buy it now”, if the web site has real time information of inventory, and the product is actually going to be out of stock soon, then it could influence the customer to go through with the purchase.

  34. 38

    I have another addition: require the user to enter his personal info as late in the checkout process as possible. There has been research in The Netherlands to why people leave checkout flows without completing them. It turns out those people just want to know the actual amount of money to pay. Usually the total doesn’t include shipping cost in the basket, but only near the end of the checkout flow.

    In large countries and international shops, this poses a problem, because the user’s country (and sometimes state as well) needs to be known to calculate shipping cost…

  35. 39

    Dr. Girlfriend

    May 29, 2009 3:20 pm

    Another excellent article from Dmitry! When I see his name on a piece at Smashing Magazine, I know it will always be a worthwhile read — full of concise tips and helpful examples. Kudos, Dmitry!

    @UX Associates – I could not agree with you more on these points, especially regarding security. Many times I’ll see better prices on things I want to buy at various online retailers, but time and again I return to Amazon because I trust them to safeguard my information.

    @Dean Higginbotham – That’s interesting! I’m not sure how I feel about that trend though: on the one hand, I love the idea of an easy checkout process, but on the other, since I’m always busy, I don’t want someone calling me after my purchase (unless there’s a problem). That’s part of the appeal of shopping online — you get what you want and get out — without having to waste time dealing with people.

    One important point that I feel was omitted from this article: Followup! Many online retailers drop the ball after the sale is made. Dell is notorious for their horrendous customer service, just ask anyone who has ever bought a Dell product.

    BestBuy is another one – offers the option of fast, in-store pickup, but the few times I’ve used it, I was made to wait in excess of 30 minutes while the employees stumbled around trying to find my product. If you try to grab the item off the shelf and tell them to cancel your order, they refuse and say you must cancel it online. Stupid! (I no longer shop there due to this and other customer disservice policies).

    Make Returns and exchanges easy – Bloomingdale’s bad. Zappos good. Bloomingdale’s prices are very high, yet if there’s a problem with your purchase, YOU, the customer must pay for return shipping. I don’t appreciate that if I’m already spending ridiculous amounts of money at your store. Returns should be efficient, no hassle, and free like they are at Zappos. Zappos is the only store I buy shoes from because they treat the customer like gold from beginning to end. Stellar customer service like that will always win my undying loyalty, even if I have to pay a bit more.

    In summary: The most awesome website in the world won’t make the customer return if you alienate them with bad after-sale service.

  36. 40

    Rodrigo Muniz

    May 29, 2009 6:30 pm

    Godaddy should learn something from this post :)

  37. 41

    Dmitry, you have hit it on the head. These 12 tips are very important especially from the customers standpoint. I’m the admin for We offer services as opposed to products, but your tips are followed in our checkout process just as well. Setting delivery expectations up-front, giving customers the opportunity to modify their cart and letting them continue shopping prior to checkout all help us service our customers.

  38. 42

    The Brisbane Line

    June 2, 2009 12:36 am

    some good common sense design points there.

  39. 43

    Great Stuff and Timing article for Me.

  40. 44

    Jason Grant

    June 2, 2009 1:08 pm

    One could argue that some of these user interface good practices are somewhat to do with what we are already used to, rather than common sense design.

    Most of us shop on Amazon, so we like it for a big part because we are used to it.

    It can also be argued that e-commerce systems are just one big pattern collection and that’s how it should be, but that will likely annoy those who are pro ‘innovation’, which can often mean just adding unnecessary bells and whistles.

  41. 45

    June 2, 2009 10:29 am

    Magento has a lot of these features built into its framework.

  42. 46

    Patrik Krupar

    June 3, 2009 1:50 am

    Great stuff! Thank you. ;-)

  43. 47

    Jakub Florczyk

    June 3, 2009 11:45 am

    Great tutorial!

  44. 48

    Point 5) is obviously written by a designer. keep the back button functional always? Even in the middle of a transaction that is running, even when you are passing someone back and forward from a 3rd party site? Seriously 1998 this advice.

    We instead chose to give clear visual clues on how a person can navigate forward and backward – this is confirmed by reviews of click hotspots that show use of such navigation aids. If your user has to go to the menu to use your website, it’s badly designed. Once again this comes down to user experience testing techniques and usability. If you don’t have a clear back button (widget,etc) on every page of your website in some form, then it’s bad design.

    Why would you send them to an error page during checkout ever? you always send them back to the cart, or back to the products when a catastrophic error occurs and then pop in the message at the top.

  45. 49

    Great Stuff, it will definitely help to improve my future design process.
    Thanks a lot.

  46. 50

    extensive research and analysis. clear instructions and time-saving tips… Thanks a ton!!!

  47. 51

    Great tips. So many ecommerce sites ruin the customer experience by having an unwieldy or unfriendly checkout process. No more abandoned shopping carts!

  48. 52

    Keep the browser back button fully functional is just one of those things lots of people miss.

  49. 53

    Great article. In addition to these suggestions I’d like to add a short pop up alert survey when customers start to leave the site. We’d have difficulty implementing based on the various browsers and security settings. Any suggestions for getting feedback?

  50. 54

    Jay Philips

    July 19, 2010 6:33 pm

    Great tips. I think all ecommerce sites, current & future, should read this post.

  51. 55

    excellent article,i can’t wait to design my checkout process.And if you have time ,you can visit my website.

  52. 56

    In the complicated world we live in, it’s good to find simple soliuntos.

  53. 57

    Thanks, I wish everyone could read this. Tweeting…

  54. 58

    Where is Amazon checkout template in your list? That’s the # 1 checkout experience. I don’t like some of them you listed here.


  55. 59

    I just wish to say thanks, i havent posted on your blog but i have been an avid reader for really some time now.

  56. 60

    What should be the ui of Merchant … and services provided by a company to merchant … me new at graphics field … it really horrible for someone like me to judge … PLZ help :(

  57. 61

    William Entriken

    March 28, 2013 7:01 am

    Dmitry, this is a great find. Do you have recommendations on who can implement a great cart like this for me?


↑ Back to top