Why Most Online Shoppers Don’t Make it Past the First Step of Checkout

The first step of your checkout sets the tone for the entire checkout experience. It’s when you’re supposed to put your best foot forward. Yet this is where we see the largest drop-off of customers in the checkout funnel. No matter the size of the store. No matter the price of the product.

conversion funnel before

Funnel based on a 3-month average at CleanProgram.com (Nov-Dec 2012). Data normalized to 1000 customers.

The best e-commerce websites create an online experience that makes visitors fall in love with their products. The shopping experiences are emotional, guided, and clearly encourage visitors to add a product to their cart.

But once they get to the checkout, something just doesn’t feel right. There’s a break in the experience from cart to checkout, and it causes a disconnect for the customer. It’s this disconnect that leads to the highest level of cart abandonment at the very first step of the checkout. We’re not the only ones who notice it.

We’ve identified four UX (user experience) fixes that will reduce the number of visitors who abandon their cart before they really even get started. We’ve seen improvements of up to 5% in overall conversion rates as a result.

conversion funnel after

Funnel based on a 3-month average at CleanProgram.com (Jan-Mar 2013). Data normalized to 1000 customers.

1. Tear down the “sign-in” barrier

Most checkouts start with a potentially jarring question: Are you new here or a returning customer? Don’t remember? Follow this hyperlink.

If your user is a returning customer, you’re asking them to remember which email they registered with and the corresponding password. If your user is a new customer, you’re asking them to decide whether they want to register (i.e., go through a set of additional steps) or checkout as a guest. Each option creates an unnecessary disconnect between the user and their goal – buying the product.

But even the best are guilty of this:

rayban checkout first step

theory ecommerce checkout

zappos first step

toms shoes online store

newegg checkout process

With a few programming tricks, some stores figure out who the customer is based on their email address. They recognize a returning customer from the email address registered in their system.

Then, they offer the user a way to login if it helps them checkout faster. Or, they offer a way for returning customers to login, while allowing the rest to continue into the checkout. This does not interrupt the shopping process and asks less of customers.

already a customer

threadless

lulumon

Checkout usability expert Christian Holst found 30% of users abandoned their cart (scroll to point 10) when asked to register upfront.

2. Provide a progress indicator

Checkouts come in all shapes and sizes. Some have one step, some have three, and some go up to six steps. Customers want to know how many steps it will take to get to the finish line. In many checkouts, there’s absolutely no indication at all when the customer gets started.

Again, even some of the best don’t use progress bars:

toms lack of progress bar

zappos

theory

An uber-simple solution is to take the unused space on the page and put in a progress bar. As a step gets completed, it is clearly shown, and there’s a way to go back to edit it in case of a mistake.

zipbuds

3. Match the checkout with your site’s look and feel

When there’s a visual disconnect between the checkout experience and the rest of your site, it can contribute to abandonment at the first step. A slightly different background color, a varied font type or size, or even a new “next” button can throw off the experience.

louboutin

A sharp change in page contrast can alarm the customer.

asos

Even changing the font can throw a customer off.

The transition from My Cart or Product page into the Checkout has to be seamless. By maintaining exact styles and keeping an identical look and feel, your site can prevent visitors from feeling visually alarmed. So, they will continue on as if everything is a part of one experience.

4. Don’t get ahead of yourself

A majority of e-commerce checkouts jump the gun by asking customers to fill in their billing information first, even before they are asked for their shipping information or preferred shipping method.

best buy ordering process

Best Buy puts billing before shipping…

clubwear

And so does Amiclubwear. This screams at the customer: “We want the money NOW”.

Though billing information is most important to retailers for collecting payment, shipping information and method are more important to customers. Customers care about when and where they will be receiving their product and want to know those details before providing payment details. By aligning with your customers’ priorities, you can make them feel their needs are the most important.

These retailers do it right:

warby parker

bonobos

threadless

target

How to Test

Testing is easy when utilizing either KISSmetrics or Google Analytics. With KISSmetrics, all you have to do is create unique events at the start of each checkout step. If you’re using Magento, this guide provides step-by-step instruction on getting started.

If you’re using another e-commerce platform and are more comfortable utilizing Google Analytics, we suggest you follow this tutorial.

Both tools provide reports that identify how many users abandon and at exactly which step.

Too Big to Ignore

When the abandonment rate at the first step of checkout is the #1 drop-off point, it’s an important user experience to tunnel in on. When done right, conversions can increase anywhere from 2-3% all the way up to 5%.

What is your most frustrating checkout experience?

About the Author: Nirav Sheth is the creator of Awesome Checkout, a Magento checkout extension that guarantees higher checkout conversion rates. He also is the founder of Anatta Design, a Magento and WordPress development shop that builds online businesses.

  1. Great article! These are all really solid points, but I can’t get past the fact that website speed and availability isn’t on here as a consideration! 46% of visitors who abandon a shopping cart cite slow page speed as the reason – and this ends up costing almost $3,000,000,000 annually (based on research recently done by StrangeLoop).

    User experience and the check-out process definitely need to be defined by easy steps and smart requirements, but website performance is always a factor that goes hand-in-hand.

    I recently wrote a blog post on the eCommerce industry and it’s website performance bottlenecks – it’s even got some tips and next steps to consider if you’re looking for quick wins to speed up your site and get better conversions. You can read it here: http://www.yottaa.com/blog/bid/286821/eCommerce-and-Website-Performance-A-Look-Into-the-Industry

    Thanks again for a great article – I hope website performance is something you’ll consider next time :)

    • this is so true, sometimes i cancel my order and lose interest in purchasing the products because of the site speed and also because they ask for too much information , I would rather actually go to the store and purchase it, why cant they just ask you for your payment method, place order and thats it done, Great article btw thanks for sharing :)

  2. Hi Bryn,

    Thanks for the feedback. I am in agreement with you. Performance is def a big reason why customers abandon their carts.

    Speed is more of an overall improvement that absolutely should be worked on. But this article is focused on that very first step and where improvements can be made there.

  3. the google analytics tutorial link didnt work

  4. Speed is the number one cited reason for abandoned carts! Most ecommerce shops have ridiculous amounts of chaff still on the websites from the times of trying to be brochures vs trying to complete sales transactions. Not to mention terribly coded sites.

    If you can’t complete a transaction page in under 4 seconds you should consider firing everyone involved.

    • Hey Steve – speed is super important. 4 seconds might be a stretch but I get what you mean. I really believe that it’s the “guided” part that gets missing from checkouts. If checkouts were very instructional, required less input, and figured certain things out for you – it would make for a much nicer experience. This creates less confusion, less errors, and therefore inherently is faster.

      Also by reducing all the chaff you spoke of, the page load time would increase too. So that makes it faster.

  5. I think the newish Woot site is the worst I’ve seen–the products are all in different stores on the stie, and it’s a nightmare with confusing pop-up. Products actually get deleted from your cart! The cutesiness adds to the irritating quality. They tell you you can un-order but two seconds later you can’t. Was in beta so maybe has been changed.

    Restaurant.com does a lot of business with coupon codes for its certificates, but the box to type in the code is well-nigh impossible to find. You have to actually click EDIT once you have put in your order–you’re supposed to know that clairvoyantly. I thought EDIT meant “change what you are buying.”

    I hate sites where it’s not clear that you are paying. “Next” or even “complete order” are ambiguous. It should let you see the cart, the shipping, and the tax, and give you a chance to change your order and also a choice to keep shopping without losing your cart contents. The payment step should say “pay now” or “make payment” or “pay.” It should also confirm you have paid and send you an email (incredibly, some sites do not send a confirmation email). Amazon is pretty good, maybe that’s why they sell so well.

    I have also gotten stuck in Paypal loops that are confusing.

    And I don’t like sites that only let you do Paypal, because of the extra 3% Paypal charge, and the sites never remind you that there is that charge.

    I don’t like when the search is bad and you have to go through page after page unless you know the proper name such as “San Diego Tray.” (had that issue on a fruit and nut site). Categories didn’t mean much.

    It is possible to be computer-literate and still have problems with these sites. When it’s easy it’s such a breeze.

    • You’re so right and I love the line “when it’s easy, it’s such a breeze”! The easy part comes in when the store and the checkout create a guided experience. When the customer is actually thought about instead of just the business needs.

      So many stores are so concerned with adding more functionality and features that they forget the human element of shopping. Customers want to be guided and supported as they move along. And they want real human talk. Like you said “next” or “continue” are too ambiguous and not relational to what your’e doing.

      Many sites feel like it’s too hard to setup something that’s not Paypal. It would be nicer if the process of setting up a good payment gateway were easier. I had a pain myself getting it setup. Close to 2 weeks of back and forth verifications, checks, etc

  6. You know what ?

    This post really reminds me when I was a salesman in the field.

    So many salesmen, like so many e-merchants always make the same mistake.

    Ounce you’ve got a customer to by a product, please, pretty please, just stop trying to show them your whole catalogue hoping they will buy more, because they won’t.

    Most likely they will think it over, stop the purchase process, and maybe come back again…

    You just lost a sale !

  7. Wat is the option for sign-in barrier??

    • Hey Aditya – the options for sign-in barrier include detecting whether the customer is already a customer directly from their email address alone. Like by asking for email address upfront and based on what they entered, show them password form to login or just have them continue through checkout if they’re not in the system.

      Or just presenting users a login link above like Skull Candy and Lululemon do.

  8. I gotta admit that I get kinda distracted and have left a lot of items in carts over the years that I’ve never gone back to buy! If it was a simple, quick process I wouldn’t have time to change my mind before I click checkout!!!

    • A quick and simple process goes in line with a well designed, less entry, guided checkout process. Which checkouts have you liked the most in your online shopping experience?

  9. Hi,
    Excellent post. This is true that most of the users will leave the website when they are asked for registration. Most of the people do not like to get register on the website. They thinks that this is really awkward work to do. We should use Paypal to make it easier.
    Also there should be an option to get register using Facebook so that it can save time.

    Thanks

    • Totally James. People just don’t like to create an account while all they want to do is buy their product. Getting offered to signup after the checkout is done or just auto-enrolling with permission is a way better experience.

      Offering multiple ways to register is always helpful. Anything to reduce the amount of data entry one has to do.

  10. Great post!

  11. Testing online forms is essential to any e-commerce site, but an instant way to improve user experience is, as you showed, putting a progress bars. For me personally the biggest online form pet peeve is “alternative e-mail” field. My, do i hate these.

    • Coupled with the “alternate email address” nuisance I also hate the need to retype my email address! OK, I know it is important but so too is my credit card number, yet no-one ever asks me to re-enter that, for obvious reasons (i.e. it would drive most sane people away).
      So, I usually type my email address, ctrl+a (select all), ctrl+c (copy), tab, ctrl+v (paste). What a pain, but my muscle memory is now good enough that it comes as second nature. What really annoys me are those (marginally) smarter coders who have disabled the paste feature in the second email field, so I really do have to type my email address again (scope for human error at best, and enough to force me to give up at worst).

  12. Liezl Hesketh Jun 02, 2013 at 1:29 pm

    As a shopper, I am guilty of this, but often because you can’t compare or access sites’ delivery costs until you go to checkout.
    Drives me nuts.
    If a £10 item is cheaper on a site, but adds a £5 delivery charge… It’s become more expensive! I would rather pay more with free delivery, because when I return it, i only get back the item price, not the delivery cost… Even better if the have free returns too.

    Take that into consideration too – there are savvy shoppers out there…

  13. Some very good points and well made. Well done.
    You’re absolutely right to focus on the key needs of the consumer in priority to the needs of the client – better to complete sales than to try and glean that extra little bit of possibly-useful information at the risk of losing sales and alienating customers.
    It’s not hard either, we’re all customers these days and know which sites we like using and which we don’t. It’s just incredible that many sites don’t ever appear to have been UX tested!

  14. I quite agree Liezl, delivery is a key part of any shopping process (even for downloadable purchases – you always want to know what happens after you’ve parted with your hard-earned cash).

    Delivery is a complex part to administer, but that’s for the business to decide and the developer to implement. The end result for the consumer should be clear and simple. Many is the time I’ve left a site because I can’t find delivery details until too late in the process (so I haven’t even gone that far in the process).

    Costs really need to be clearly shown early on in the process and the delivery options need to be visible and easily changeable. Any site that doesn’t do this is going to lose customers, without a doubt.

  15. A comprehensive and thought provoking article for the ecommerce store owners. If you are running an online store, put emphasis on checkout process. I found this post particularly helpful as part of my research on the online checkout process and standard.

  16. This is my first time pay a quick visit at here and
    i am actually pleassant to read all at single place.

  17. Has anyone outside the US tried shopping online with Threadless? It’s a NIGHTMARE! Try getting an email gift certificate sent – it’s like a tutorial in how not to build a shopping cart. C’mon guys…great product, international reach. Why wouldn’t you spend the money on some environment user testing – you’d be guaranteed to make back your ROI in a month if you could make the shopping experience less hellish for us overseas customers.

  18. Any nice ways to messure speed from foreign countries?
    As i multi language/geo site, it can not help to just messure from my own ip adress.

    Regards

35 comments

Please use your real name and a corresponding social media profile when commenting. Otherwise, your comment may be deleted.

← Previous ArticleNext Article →