Experience Design Multi-step vs One-Step Checkouts: Which one is better for your business, and how to implement them correctly Last updated on October 3rd, 2022 As a merchant, you need to decide whether you present your checkout asa multi-step flow, or compress it onto one step with a one-step checkout. With our Magento design services, we design checkouts for retailers selling anythingfrom bushes to doughnuts. If there is something we’ve learned, is that each checkoutis a little unique, even when they have loads of common ground. In this article, we look at the two main different types of checkouts, discuss the benefits of each, and give you a few tips on how to implement them correctly. Types of checkout flows: Multi-step vs One-step checkouts. When we talk about “types of checkouts”, we typically refer to the style of their flow. This is, how the checkout navigates the users through all the bits they need to do. The most common classification is multi-step vs one-step (or more precisely, one-page) What is a Multi-step checkout? A multi-step checkout divides the checkout process into distinct and separate steps and pages. The user needs to submit information to move to the next step, usually done with a button at the bottom, the top, or both. Most multi-steps break down the process into three steps, although some websites will use four or five steps. And some websites will group the steps slightly differently. A common multi-step checkout might include the following steps: User information and deliveryPayment Review and place order Customers have to go through all the pages, one by one, in order to complete their purchase. The most distinctive element of multi-step checkouts is the “process steps”. Dunelm makes use of a traditional multi-step with three steps clearly signposted and interactive. Simple but excellent design. Checkout process steps are little icons at the top of the checkout page that show you the steps required, as well as their names. It is best practice to show the user which step they are in, by highlighting the relevant process step and greying out the others. Our checkout benchmark found that 98% of the top British 100 retailers use process steps. This is to say, exceptions do exist. It’s also important to make the steps clickable so that users can go back and change their minds or amend a mistake. What is a One-step checkout? One-step checkout (or one-page checkout) brings the entire checkout flow into a single form, on one page. H&M uses a one-step checkout, nicely implemented with editable sections and auto-scroll to guide users toward the Place Order button One-step checkouts can come in a variety of sub-formats, although these days the most common by far is an accordion-style one-step checkout, where information is divided into expandable sections. The main benefit of using accordion on one-step checkout is that it organises the information neatly, and more importantly, hides fields from the user view until the user reaches the relevant section. This keeps the user focused on a section at a time, and avoids stressing the user by showing loads of empty field boxes. Other one-step checkouts use a “dashboard approach”. With this approach, users have the entire checkout in one page, but separate sections open up for users to complete, before coming back to the one-page checkout, where each section completed will show a summary. This is not very common, because it can be greatly confusing to users and pretty much defeat the purpose of bringing the checkout to one page. It’s rare to see these days a one-step checkout without an accordion, as showing all the fields is known to cause drop-off (and a lot of huffing and puffing). How many retailers use Multi-step vs One-step checkouts? When reviewing the top hundred retailers we confirmed our suspicions: the traditional multi-step checkout is still favoured by a majority of ecommerce businesses. Multi-step checkouts are still very popular. In our analysis of the top 100 British retailers (ref: RX), 68% are using multi-step checkouts and 32% are using one-step checkouts, with the majority of these being accordion-style one-page checkouts. This shows that one-step checkouts are not the newer, better version of ecommerce checkouts, just an alternative way of designing them. Multi-step vs One-step checkouts. Which one is better? There are plenty of opinions online about which one is better, usually plumping for the one-step checkout as the winner. But here’s the thing: it’s not which one you use, but how you use it. In other words, neither multi-step nor one-step checkouts are inherently better than one another. The only clear exception to this is virtual products and downloadables. Since there is no shipping info required, these sites can achieve the fastest checkout in one step. Beyond these, neither checkout flow consistently outperforms another one according to the Baymard Institute. In other words, either checkout, when correctly implemented, has a similar chance of delivering a great customer experience. However, since they are different, they have different guidelines for correct implementation, as well as different risks and risks to be aware of. What are the pros of Multi-step checkouts? There are various advantages to multi-step checkouts. They are more familiar to users. Multi-step checkouts have been around for longer and are more common, so they feel more familiar and therefore easier to complete for many users. Of course, this could change over time if one-step checkouts grow in popularity (which they are doing). They give a clear overview of the steps. When correctly implemented, users can get a sense of how far they have to go, which steps they’re missing and how to navigate between them. Process steps are always clear and in view, which is an advantage to one-step checkouts where usually the information left to submit sits below the fold. How to implement a multi-step checkout The checkout we designed for Mayborn is built using the GENE Master Checkout. Icons at the top show the steps in the process, use styling to show progress and allow users to navigate between steps Besides following best practices in ecommerce checkout design, a multi-step checkout has a few specific design requirements that can really improve its performance. Include process steps. Without process steps, multi-step checkouts can be very confusing. The user has no idea how many steps are left, nor can they get a sense of how much have they already done. Nor do they know how to navigate back to change any details. Given how important this is, we have found only two of the top 100 UK retailers do not include process steps on a multi-step checkout. Make process steps navigational Besides including process steps, it’s also important to let users change any already submitted data Have you ever sent a parcel to a previous address you no longer live in? Exactly. To achieve this, you need to achieve two separate tasks. First, each step has to be clickable and take the user back to that step, where the submitted information becomes editable again. Secondly, the process steps overview has to indicate at what step the user is. They usually do this by highlighting the current step and showing the previous steps as done. It’s a simple feature but can make or break your multi-step checkout. How to implement a One-step checkout One-step checkouts have a few specific implementations to make them as efficient as possible. Use accordion functionality to section the form One-step checkouts show all the required information on one page. Whilst this can be a good way to show the user the entire process, it can also feel demotivating to see all the information (and many, many empty fields) in one go. Accordion-style one-step checkouts can help achieve the best balance between showing all the information for transparency and hiding empty fields to decrease the cognitive load. When reviewing the top British 100 retailers, all one-step checkouts (except one) are making use of accordion to make the checkout more user-friendly Accordions should be collapsed (except the first one on the page) and extended as the previous section has been filled. Make transitions very clear. Because accordion-style one-step checkouts are still a relatively new beast, users need to become familiar with how they work. Therefore, it’s important to help users understand the basic functionality of accordions as they use them for the first time. To this effect, using micro animations and auto-scroll to the next section will make transitions clear and provide a reassuring a-ha moment for users. Allowing easy review of the information The most fundamental issue with one-step checkouts is offering the ability to users to review and edit the information from previous sections. To do this, the best practice is to show a short summary of the information submitted, next to a clickable “edit” button or icon. This edit button should re-expand the section with editable fields. Consider the behaviour of the back button Lastly, you need to bear in mind that the back button is still the favourite button for most users! When a user decides to “go back” to review or edit previously submitted information, the back button should not take them out of the checkout. Instead, it should take them to the previous section filled.
