One Page Checkouts – the Holy Grail of Checkout Usability?
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?
A/B studies do exist where one page checkouts outperform multi-step checkouts significantly. However, these cases 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 are 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
User experience research, delivered twice a month
Join 25,000+ readers and get Baymard’s research articles by RSS feed or e-mail:
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Related Articles
More E-Commerce Research
Free Research Content:
- Popular Articles · a listing of our most popular research-based articles on e-commerce UX
- UX Benchmark · benchmark with case studies of 123 major e-commerce sites ranked by e-commerce UX performance
- Page Designs · navigate 9,200+ manually annotated full-page screenshots categorized by page type
Products & Services:
- Baymard Premium · full access to all 618 research-based design guidelines, UX case studies, page designs, and review tool ($720-$3,000 / year, based on plan)
- UX Audit · get an in-depth analysis of your site’s UX, conducted by a Baymard researcher ($1,900-$9,700 based on scope)
Comments
Premium Research
Get full access to Baymard’s 78,000+ hours of research and empower your UX team and decisions.
Audit Service
Get Baymard to audit your site’s UX performance, compare it to competitors, and identify 40 areas of improvements.
MisiApril 27, 2011
Good post, I choose A/B test :-)
RobinApril 27, 2011
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)
AdamApril 27, 2011
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 InstituteApril 27, 2011
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.
AdamApril 27, 2011
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.
bayekApril 27, 2011
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 CarterApril 27, 2011
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 InstituteApril 27, 2011
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 SnoeckApril 27, 2011
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.comApril 27, 2011
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.
ChingApril 30, 2011
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 poesApril 30, 2011
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.
BrendanMay 4, 2011
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 ocanaJune 16, 2011
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 ForsJuly 7, 2011
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 InstituteAugust 24, 2012
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 AllenOctober 7, 2011
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
arrghSeptember 20, 2012
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 InstituteOctober 3, 2012
Thanks for the reminder. We’re looking into it.
Jamie, Baymard InstituteOctober 3, 2012
Fixed. Thanks for reporting it.
asimenia kosmimataSeptember 4, 2013
I think the only disadvantage is how to register members
John NewmanFebruary 25, 2014
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