Article overview

One Page Checkouts – the Holy Grail of Checkout Usability?

· By · 22 comments ·

Image by Michael Whay.

After having written an article on e-commerce checkout design for Smashing Magazine I got a question from Ryan asking about the “controversy of multi-step checkouts vs. one page checkouts”.

Are one page checkouts truly better?

There do exists some A/B cases where one page checkouts outperform multi-step checkouts significantly. These cases however often compare a non-optimized multi-step checkout with a new optimized one page checkout.

During the research for our checkout usability report we found that users in general had relatively few problems navigating between multiple steps (as long as a few simple guidelines are adhered to) – the usability issues were primarily caused by what the customer had to do at each step.

When A/B testing a non-optimized multi-step checkout (being A) against a one page checkout (B), I’d say if a C version were introduced that took precisely the same form fields as the one page, but split it across two pages (address on page one, credit card details on page two) – there wouldn’t be much, if any, difference in abandonment/completion rates between B and C.

Why one page checkouts is still a very important concept

There are however 2 very important reasons that one page checkouts are so ‘popular’ to discuss and strive for in e-commerce design.

1) It’s easy to talk about

It has a name, which makes it easy to talk about. This might sound obvious but it’s actually quite important because it gives people a concept to reference. A concept that conveys of simplicity and ease-of-use for the customer.

While it’s true that a one page checkout can be more complex than a 3-step checkout, it’s simply not as easy and persuasive to try and sell “a very lean and well thought out, 3 step checkout process” to management.

2) It makes tough decisions easier

Due to the nature of one page checkouts, it’s often easier to internally agree on limiting the features that go on the checkout page. This is especially important in larger organization where there’s often multiple agendas and friction between departments.

Making drastic decisions such as cutting away features and form fields from a current multi-page checkout can be very difficult. But if the organization’s goal is clear and ambitious: “cutting our 4 step checkout down to a single page” then the difficult decisions of removing features and form fields become much easier, as everyone can easily see how crammed and cluttered the one page would otherwise be.

Conclusion

While a one page checkout won’t necessarily perform better than a comparatively optimized multi-step checkout, one page checkouts are still important as they can make the checkout optimization project easier to discuss and implement.

Image by Michael Whay.

Misi April 27, 2011 Reply to this comment

Good post, I choose A/B test :-)

Robin April 27, 2011 Reply to this comment

One page checkouts are far more userfriendly (because your not leaving the page your on at that moment. However, they make it harder to monitor where your client drops out on the checkout process. (Which is pretty relevant for a shop to monitor)

Adam April 27, 2011 Reply to this comment

Brings up the point of what is a one page checkout? What about those checkout pages that have multiple steps “collapsed” but are still all on a single page and only when you complete one does the next step “open up”? Are those still classified as one page checkout processes? You can definitely remove the clutter by doing it that way, yet still allow your users to quickly and easily go back and edit previously entered information.

Admittedly, I haven’t done any testing like the author has, but from personal preference, my favorite checkout experience is one where no visible HTTP request (i.e. page refreshing) has to occur. Also, I’m a bigger fan of collapsible/hidden fieldsets than a single long complicated page.

So in order: Single Page (collapsed/hidden fieldsets) > Single Page (super long) >>> Multiple Page with visible HTTP requests.

Jamie, Baymard Institute April 27, 2011 Reply to this comment

Thanks for your comment Adam.

Collapsed steps or actual new HTTP requests – it’s a new step from the customer’s perspective, so it’s a multi step checkout.

Preloading all steps so you don’t need subsequent HTTP requests is a smart performance improvement that means the next step loads instantly (which is crucial to the checkout experience) but I’d consider it a multi step checkout nonetheless.

Adam April 27, 2011 Reply to this comment

Sorry to double-post like this. But @Robin, it’s easy to monitor the point of single page checkout dropouts (what a mouthful) by simply using AJAX – it’s dead simple by using custom events and Google Analytics – when your customer proceeds to the next collapsed/hidden fieldset, send a custom event to Google Analytics notifying where your customer is in the checkout process.

If you don’t want to keep your fieldsets hidden, then send an event once every block of fieldsets are filled out…..JS is your friend.

bayek April 27, 2011 Reply to this comment

Great article. Personally I also agree with Adam that whenever possible, the single page (collapsed/hidden fieldsets) check out seems the simplest and most user friendly option. However, as every product has different requirements, all the versions may either work well or not, depending on the final UX/UI design.

Todd Carter April 27, 2011 Reply to this comment

I agree that a one page checkout can simplify the checkout process and adding a multiple page check can, in some instances, complicate the time it takes for the customer to checkout. A thought that occurred to me, though, is the fact that splitting the one page into a two or three page process can be less overwhelming to a customer. In other words, a one page checkout with all of its fields, totals, and such could essentially cause clutter on the one page. Whereas splitting the process and relevant fields into seperate pages can spread things out on the pages, thus making the checkout process more readable.

Great article to reflect on!

Jamie, Baymard Institute April 27, 2011 Reply to this comment

Exactly.

One page checkouts are important mostly as a concept that instantly conveys a vision for your checkout process. (I think this was actually Christian’s point.)

That the most important thing during a checkout is really how well you implement the various form fields and features. If implemented properly, then it doesn’t really matter whether you use 1 or 3 steps. The crucial thing is the implementation of the actual elements, not how many steps they are spread across.

However, one may speculate that if you have 3 steps then the site owner is more prone to adding unnecessary features and clutter to the pages – you can imagine a conversation in the marketing department that goes along the lines of: “This page is pretty short, so let’s add this extra optional form field asking for the customer’s phone number?”

So if you have the discipline to keep things simple and clean, then a multi step checkout is not an issue because the implementation is good. But if you’re a big organization, then a one page checkout can be helpful because it forces everyone (every team and every department) to keep the checkout process simple.

Jelmer Snoeck April 27, 2011 Reply to this comment

Great post. Personally I prefer the C type. I’ve seen check out systems with around 5-6 pages, I usually get bored after 3. The one page checkout is nice aswell, though I like to separate the address information and the CC information.

Jon, EpicBagel.com April 27, 2011 Reply to this comment

Great post – we had to use one of these recently in a project (was one of the ‘requirements’).

To me, the focus on efficiency impacted the user experience negatively. Particularly over other critical considerations such as establishing trust and credibility.

Reminds me of using select fields for date inputs (e.g. date of birth). In usability testing, I’ve seen people take longer to fill them in comparison to normal text inputs. However, the constraint acts to reassure and as such, provides a better experience.

Guess I’m saying there’s more to the checkout than efficiency. Thanks for the post.

Ching April 30, 2011 Reply to this comment

What happens when there are quite a number of options to get through? Shipping address, Shipping method, etc etc, if you run the fields too long, won’t that get daunting? Or am I missing the point here? One page checkout can still be Magento basic – 5 step checkout on the same page?

Stomme poes April 30, 2011 Reply to this comment

I would be horribly curious to know if people, when confronted with one long (but not difficult or unexpected) form, do they tend to abandon? My bosses keep thinking so… so I’d tried out columns just so the long narrow form used a bit more screen real-estate, but multi-column forms just suck too badly, so back to 1col. While we’re tracking people’s errors they generate, we can’t see if someone stops halfway through, and if so, whether that’s from a particular question confusion or because they think the form is too long or what. Problem in user testing is, ask a user to try and they’re more likely to try to finish it (what else are they going to do?) while at home maybe they wouldn’t.

Brendan May 4, 2011 Reply to this comment

Great post,

I am in the process of redesigning our checkout for and this is steering me towards an ajax enhanced hidden field-set one page checkout.

vicente ocana June 16, 2011 Reply to this comment

I am for the C case; assuming proper field number, good copywriting and straight forward processes, I guess there is a step-by-step pattern in check-out buying that users are accustomed to. Making all the http calls and presenting them in 3 steps (2 for writing, 1 for confirming) without page reloading and in a slideshow way should be great in my opinion.

Samir Fors July 7, 2011 Reply to this comment

Nice article, but I think it sort of misses the point of a checkout, since the main goal is to increase conversion.

The reason for having a one-page-checkout is because it’s presumed to increase usability and reduce cart abandonment, which I guarantee it does in some cases. But other times having a two-(or three or more)-page-checkout might be much better. I don’t believe the actual navigation is the big issue in multi-step-checkouts, but rather the incentive for having to navigate, or what I expect I have to do in order to complete my purchase. If I am to buy a song from iTunes the multi-step checkout wouldn’t work so well, but if I’m buying a flight ticket it makes much more sense.

There are numerous cases where a one-page-checkout has proved to convert better than a multi-step-checkout and the other way around. That’s why testing is important and it can be very hard to accurately predict what converts better.

Christian, Baymard Institute August 24, 2012 Reply to this comment

Hi Samir, thank you for your comment. I do think we agree on most of it: One-page can in some cases be better. But so can multi-step. My primary point was to debunk the myth that one-page checkouts always are better than multi-step.

In regards to iTunes the post were mainly meant for “traditional” e-commerce websites as that was what we tested during the checkout usability study. A lot of “in-app” payments wouldn’t work well as a multi-step.

Linda Allen October 7, 2011 Reply to this comment

Personally I have had experience with both and in all of my testing, one page outperformed multi page (typically 3 pages plus a 4th confirmation page) by an average of 23%. This was all in one niche though so I can’t speak for other niches.

Thanks for the info. :)

- Linda
San Antonio, Texas

arrgh September 21, 2012 Reply to this comment

can somebody PLEASE go into the commenting system and escape the special character entities before outputting to the browser? It[']s really annoying and looks very unprofessional.

Christian, Baymard Institute October 3, 2012 Reply to this comment

Thanks for the reminder. We’re looking into it.

Jamie, Baymard Institute October 3, 2012 Reply to this comment

Fixed. Thanks for reporting it.

asimenia kosmimata September 4, 2013 Reply to this comment

I think the only disadvantage is how to register members

John Newman February 25, 2014 Reply to this comment

A German Blogger, his Name is Tobias Christian, copied your article in German language. http://forward-media.de/blog/one-page-checkout-der-heilige-gral-der-shop-usability

Post a comment!

Close overlay