The Pros and Cons of One-Page Checkout

Shopping cart abandonment is an epidemic in online retailing, with some companies reporting that more than 60% of checkouts end without a conversion.

Preventing even a relatively small percentage of these abandoned carts would significantly improve revenues and profits.

While purchase price and shipping costs are the leading reported causes of shopping cart abandonment, ease of use is close behind.

Fighting Frustration

One increasingly popular method used to slash cart abandonment rates is to introduce single-page, Ajax-driven checkout forms that combine the convenience of a single page format with asynchronous form validation.

As we start this discussion of the pros and cons of single-page, Ajax checkouts, I need to describe why these two methods—one pagers and Ajax—are employed and what frustrating problems they seek to solve.

Single-Page Checkout is Faster, Easier to Understand

Single-page checkout is faster and easier so that more customers convert.

When you’re trying to decide if your checkout process should be a single page or several pages, consider the analogy of a supermarket. When grocery shopping, consumers always gravitate toward the shortest checkout lanes or fastest cashiers.  By definition, a single-page checkout is faster than a multi-page checkout if for no reason other than there are no additional pages to load.

Single-page checkout forms, particularly those that use JavaScript to march shoppers through the process, also provide better step-by-step visibility. Shoppers know what they must do and where they are in the process.

Single page checkout example from Old Navy

If you need more evidence, consider a simple A/B test conducted on the 2010 Vancouver Olympics online store earlier this year.

In the test, half of all potential customers were directed to a two-page checkout and half to a single-page checkout. Almost immediately, the single-page checkout proved to have a better conversion rate. In fact, the successful completion rate for the entire checkout process rose some 21.8% thanks to the single-page form.

2010 Olympics store checkout form

Ajax Validates Forms Before Users Submit

If you have ever filled out a long online form, clicked submit, and then had the form erase everything they input and return a message like “address not valid,” “passwords don’t match,” or “please answer question #2,” you will understand the value of Ajax.

Ajax stands for asynchronous JavaScript and XML, and it is a web development technique that uses several client-side languages and server calls to make web pages more interactive or better performing.

Ajax’s best trick, if you will, is getting data from the web server without reloading a page or doing server-like actions on the client side.  In a non-Ajax web form or checkout, the user fills out the entire form and submits it. The form data is sent to the web server, and a server-side scripting language validates the form to make sure that it is filled out properly and completely. If there are errors in the fields, like a missing “@” in an email address or a missing postal code, the web server sends an error message to the browser, which reloads the page for the user to fill out again.

In non-Ajax checkout forms, if the shopper is lucky, the web server may return the field data along with the error message for the browser to render, so that not everything will have to be filled out again. But the process still takes time and can be frustrating, especially if the user doesn’t completely understand what went wrong.

Ajax addresses this issue by validating the form while the shopper fills it out. Server calls—if needed—are made asynchronously without reloading the page or potentially erasing the form. Users get feedback as soon as a form field is complete (when the click into the next field), not once the form is submitted. In some cases, the JavaScript might be able to do the form validation without connecting to the server at all.

Example of inline form validation

The PROS of Using a Single Page, Ajax Checkout Process

Having explained what both single page checkouts and Ajax forms seek to accomplish, it is time to address the advantages these techniques provide.

  • More conversions As mentioned above, single-page checkouts may significantly improve sales conversions, boosting a merchant’s bottom line.
  • Better page performance While dozens of factors contribute to page load times, using a single, Ajax-powered checkout form should improve user experience. This is important since studies from Akamai, Shopzilla, Google, and Bing all suggest that consumers won’t tolerate slow loading pages.
  • Better customer satisfaction With better performance and no agitating form validation issues, customers should enjoy a better overall shopping experience.
  • Advanced Interactivity Once a merchant has decided to add Ajax, it’s possible to make the page more interactive, which again, may improve customer experience.

The PROS to using an Ajax, one-page checkout process tend to focus on customers and profits. By contrast, the CONS tend to be development related.

The CONS of Using a Single-Page, Ajax Checkout Process

While there is generally no reason to use a multi-page checkout, there are things to consider when using Ajax.

  • It won’t work without JavaScript Ajax depends on JavaScript, if a user has JavaScript disabled, the page will revert to server-side validation.
  • Some browser functions won’t necessarily behave as expected—Because Ajax does not reload a page to update content the browser’s back button will not bring the user back to an early step in the checkout as might be expected. There is a work around, but it requires more development time.
  • Ajax requires more upfront investment Because Ajax will increase development time, merchants may have to pay a little more or use more development hours.

Ajax on the Scale

If you’re trying to decide whether or not to employ Ajax in your company’s checkout process, weigh the potential benefits in customer satisfaction and more sales with the additional development costs. Even after you make your choice, continue to test your checkout process, since even a minor improvement can mean more revenue for your business.

This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.


Related Articles

12 Responses to “The Pros and Cons of One-Page Checkout”

  1. I think it’s not just dev costs that are the issue – you have to think about your audience and the cognitive processes they go through before opting.

    We’ve done studies of multipage vs single page checkouts before, and with my very elderly online audience, we found that they were reticent to press the final submit button, often they would leave their computer to go find details to check, which ended up increasing the abandonment rate. With my audience, fear of doing the wrong thing is high, and whilst we do in-form validation, the concept still isn’t widely understood.

    We found having a clearly defined multi-step checkout, where people know at each step where they are and what is coming next, reassured users – having this additional real estate also allows us to use cognitively nudging microcopy throughout – further increasing conversion.

    • Doug says:

      There is no reason that a single page checkout cannot provide in page confirmation of all the input steps prior to clicking the final submit button.

      A step by step confirmation approach does not require multiple pages.

  2. I don’t think that the other cons are an issue either. When Javascript is unavailable it turns to server side validation… why is that so bad? It might decrease your conversion ratio a little, but that’s your only option.
    And about the browser expectancies, that’s a case of proper UX-design. It should not be happening that users can’t go back easily. So it’s just a matter of choosing the right developer to make your investment worthwhile.

  3. Many people get scared with large one-page Checkout system, I think 2 clear and simple steps is better than one big step…

  4. raj says:

    I absolutely agree with the cons and i think its very near future this is going to be introduced in most of e-com sites we have now!

    People might be scared in the beginning but its just the shift in mindset. they might get confused with new page layout as from traditional checkout.

    coming to cons –
    i believe we could hardly find less than 0.3% of non-js users! we still can support them by server side validation.
    Some browser functions won’t necessarily behave as expected – the problem with back button has always been a challenge in checkout flow.
    Ajax requires more upfront investment – many IT typhoons are investing time on building api’s for ajax these days and also experienced developers could be found these days. Going forward this wont be a big deal for sure

  5. David says:

    You’ll want to consider many more A/B tests than a single one for a pop-up store. I’ve had two major, brand-name clients who also A/B tested single screen vs. multi-screen checkouts. The results were mixed: one was flat, the other converted worse on single-screen. We’ve not yet seen a good result.

  6. Jestep says:

    There’s a lot of factors to consider before implementing a 1 page or any checkout system. Depending on the complexity of the products being ordered it’s completely possible that a 1 page checkout is inappropriate for a particular industry. However, the majority of ecommerce sites will greatly benefit from a simple checkout process.

    As usual, I would highly recommend against using a Ajax or Javascript only checkout for any purpose. These can create some really undesired affects, and since javascript can usually be manipulated on the browser there’s no guarantee how the checkout will work for every user. Plugins, toolbars, security software, often modify the default behavior that javascript has which can completely break javascript checkouts.

    In our experience a hybrid 1 page checkout has the best conversion. This consists of a shopping cart page where the user can calculate tax and shipping (save the zip code to the users session so they don’t need to enter it again if they browse for more products), they select the shipping method and continue to the checkout page. The second and final page is the checkout page, where they fill out shipping, and optionally billing if it is different and the payment information. Once they click on place order on that page the transaction is completed. If you offer paypal or another 4rd party checkout system, offer it on the cart page, not after the user entered their information. You can get their shipping from paypal when the transaction is complete.

    Allowing shoppers to calculate shipping information on the shopping cart is absolutely essential. Additionally, we’ve found that the more complex shipping calculators are not good for conversions. Ask for a Zip and nothing more. You don’t need to know the city or state if you know the zip. Use some damn programming to figure these out for yourself.

    Last of all, which I still commonly see is requiring registration. If you do this before displaying shipping rates, I think it’s safe to say most sites will lose at least 50% of their customers.

  7. Ok it’s little bit complicated, we just need a simple step

  8. Derek says:

    Hey guys – I have a new project I’m working on. I NEED the most basic – super fat free one page check out I can get. All this talk – does anyone have a for real ecommerce cart that does one thing – check out a customer and get the order done in as few steps as humanly possible.

    I want this –

    Simple – throw a video up, some nice creative and I’m rockin a product or idea in minutes. I want a full ecommerce platform that has all the necessary features like a Zen or Magento – ick – but use it for one product or a very limited small group of products. I want a simple cc API like on the slap chop page while being able to run my CMS and backend just as you would for a site with a hundred or thousand products.

    I don’t want a relationship with a hosting company – or a 100 dollar per month provider – I want my own cart and full server control autonomously while being able to deal with my own self hosted videos in my own fully managed self worked CMS. Is there not a single person on this planet that has this? lol If anyone of you guys with whom I would think would know the answer to this, please throw me a bone man! Many thanks!

  9. We are trying to implement a similar system on my site, can the funnel tracking be effectively used with a single page checkout to track goals ?

    • I would recommend using event tracking on the page to measure how far the user completes, for example, the continue buttons between sections can be set up as “events”

      • Nei says:

        Very helpful post! About the tracking I usually use the analytics’s API to track each filled field using the trackPageView function. Using it you can force a page view customized and you are able to use funnil with these pages.

        I think using events isn’t the case, because it’s a proccess and not an event.

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS