Once a customer reaches your checkout page — that's a good sign. Your product or service has been evaluated as one worthy of attention. Your job now is to make the last part of the purchase trip as comfortable as possible. A well-optimized checkout process decreases the cart abandonment rate that directly affects your revenue. That is why it is extremely important to give sufficient consideration to the checkout page structure. Let's move forward and choose a layout that would serve your store flawlessly.
Multi-page vs One-page
The most obvious difference between these two variants is not even hidden in their names — it lies on the surface. One-page checkout represents a single web page full of forms your client should fill in order to complete the purchase. A multi-page structure is a step by step process of filling out those forms on separate pages grouped by a certain benchmark. Is there such a big difference, does it affect anything at all? Let's figure it out.
We've picked six criteria for evaluation. There might be more, but we feel like these are the most important ones.
Criteria;One-page checkout;Multi-page checkout
Checkout process speed link=#checkout-process-speed;High;Low
Navigation link=#navigation;On the Spot;Back and Forth
Analytics link=#analytics;Low Detailed;Highly Detailed
Upselling link=#upselling;Post-purchase;Post-purchase & Pre-purchase
01 Checkout Process Speed
We all live in a busy world and would prefer to spend as little time on a routine as possible. One-page checkout allows clients to finish the purchase with no additional clicks and loading screens. As a result, it saves time and makes customers more satisfied while decreasing the cart abandonment rate.
What is clear and what is not? Here is the question. One-page checkout puts all the forms and boxes to fill on a single web page. It's great to be able to see the finish line, however, the whole page may look a bit clunky and confuse customers sometimes. Multi-page checkout, on the other hand, has a clean interface that gently guides you through the long journey to the uncharted ending. As long as one-page checkout is built with the use of best UX/UI practices and multi-page one keeps the number of steps fairly low — both are pretty acceptable in terms of clarity. One more thing to point out when it comes to multi-page checkout is possible extra fees and hidden information. Just imagine yourself spending even a few minutes on filling forms and passing multiple steps to receive unpleasant news at the very end — the price is $20 higher due to the shipping fees.
We all make mistakes and we all change our minds sometimes. It is rather more difficult to make adjustments on the multi-page checkout as it requires customers to go back and forth looking for the page needed. Moreover, for example, stores built on Shopify (ones with default checkout) do not save the input information when the user goes to a previous page. Might be an issue for someone who is not really into internet shopping or interested in a particular purchase.
Being able to track customer's activities on your website and collect extra data is great. Multi-page checkout allows you to do so. With the use of Google Analytics or other similar tools, you can check at which step a customer has left the purchase journey. Furthermore, you can grab the customer's email address during the first steps for further follow-ups.
05 Cross-selling and upselling
Having an additional spot to offer your customer more or something superior isn't bad at all. The multi-page checkout process enables you to make several cross- and upselling offers before your client completes the purchase. This layout provides more space where you can present a discount or a buy-one-get-one promotion, etc.
It may seem that it takes more time to load one page full of data than loading several smaller pages one by one, however, that is not correct. One-page checkouts load all the fields at once as those fields are empty. No info is being transferred until the customer submits the purchase. On the contrary, multi-page checkouts, oriented on data gathering, for example, email collection, are sending data after each page submission. This results in a lot of network requests meaning more loading time. Multi-paged forms can also be set up to send data only after a purchase is submitted, yet this leads to losing one of the key benefits — pre-purchase data collection.
Let's review some real-life examples so you can base your decision on practical experience. Both types of checkout are widely spread and used by many successful online stores. Some big players on the market such as Best Buy and Macy's prefer to use multi-page checkouts, others like Ali Express and Foeger go with the one-page option. Here are a few more ideas for inspiration:
Zappos.com has a one-page multi-step checkout. All the information is easily visible and accessible. After each step, there is a quick verification process that ensures the data provided is valid. Though the validation process does take a few seconds, it still is a much faster process than loading a whole page and the customer can instantly see if there are any mistakes and correct them.
All fields are displayed at once so users can see them straight away as well as correct something if there is a mistake.
Lowe's has a similar checkout layout, however, it is more concentrated on minimalism and style. Thus the fields of the inactive tabs are hidden, you can still see the steps though, and get back fast to edit something if needed.
The disadvantage here may be that the user cannot see the order total before proceeding to the shipping stage.
Bellroy provides a one-step checkout, which makes the process as quick and easy as possible. As we already know, one-page checkout pages tend to have higher conversions compared to a multi-page checkout, since results in fewer customers' confusion and a smaller number of abandoned carts.
Here users are only required to provide the information necessary for shipping, no extra fields. The page is designed to show all the components at once, without going back and forth to review inputted data.
An obvious advantage of this checkout design is customers' saved time and effort when making a purchase. It will be especially useful for stores that deal with mildly motivated customers or one-time-purchase products.
ZARA has a three-step checkout process that is displayed at the progress bar on top of the page. It is important for the user to see the full journey so they know at which stage they are. Overall the checkout design here is minimalistic and stylish, with no extra information or bright decoration that may distract the user. Black and white style, lots of free space, no order details, or pushy banners. Minimalism at its best.
Jysk is using many long fields that require lots of screen space and look a little old-fashioned. It has a four-step checkout, not so good in terms of the completion speed. To mitigate this, they've added static motivators under the little order summary bloc.
Might be a right decision as they sell long-term use goods, thus customers are ready to dedicate some extra time to make the purchase and have to be sure they've filled every field correctly.
To purchase on iHerb, you need to create an account first. That is why it is not really justified for them to use a multi-page checkout. They don't need to collect user's email as they already have it. The checkout also has a lot of free space that could be used, for example, to show order details or some motivators. It requires going back to the cart to check, which items are being ordered — not a very efficient way.
On the bright side — a nice idea to show customer's savings and discount summary. It helps to build long-term relationships and motivates user to keep up with available promotions and special offers. This type of checkout is more likely oriented toward regular customers, who are already loyal to the brand and will complete the purchase even if it takes a little effort.
Each of the checkout types described above has its pros and cons, and both are widely spread. One-page checkout is a perfect solution for those who value easiness and speed of the process. Whereas multi-page one could be a suitable solution for well-established brands with a loyal customer base.
However, do not forget — there shouldn't be any blind choices when it comes to business decisions. If you are still unsure what checkout type to choose — consider performing an A/B testing and check which fits your needs best.