Case studies show that a one page checkout outperforms a multi-page checkout. Aside from its simplicity and the fact that it is quicker to accomplish, it provides a significant lift in conversions when done right.
While there is no single reason why shopping carts go abandoned 69% of the time half way through the checkout process, a popular solution to this is to make the checkout page design as short and straightforward as possible, removing unnecessary fields to reduce delays and friction.
Although it has many notable benefits, a onepage checkout design still has some challenges much like a multi-page checkout. Whether you are designing or re-designing, let our five secrets here guide you build a successful single page checkout for your site.
Keep form length at a minimum
Research shows that among the top 100 grossing ecommerce sites, 5.08 is the average number of steps in a checkout process, starting from the shopping cart page where the products are placed.
Additionally, based on a 2014 Form Conversion Report by Formstack, 19 is the average number of fields in an order or payment form.
Making the checkout page design concise is important because once shoppers are committed to buy your product; it is now your job to get them through the checkout as quickly as possible. How can you do that?
Ask only for the most basic and most essential details from your customers. Usually, those basic and essential information are the billing address, the shipping method, the payment method and the checkout review. Keeping the needed information to the most essential also allows you to stay within the desirable 5.08 steps.
As you can see in the single page checkout example, the field for ‘Additional Information’ can even be removed, making the length even more concise.
Pre-populate certain fields not only to minimize the form length, but also to make it easy for your customers to fill it up. Especially when it comes to shipping addresses, moving up the zip code field allows you to use information already available to you, minimizing customer input.
As for fields that are necessary, make sure that it is indicated with an asterisk.
If a particular field is optional, consider taking it out of the checkout page design. Especially if it won’t affect the overall success of one’s checkout, consider removing it from the form altogether. However, if you do need to keep ‘seemingly unnecessary’ information, explain why it needs to be there so customers will proceed filling it up without hesitation.
In a checkout usability research study by Baymard Institute, they found out that customers feel that their privacy is being invaded whenever they are asked ‘seemingly unnecessary’ information, such as when a phone number is still being asked despite an email address already been provided for as a means to be contacted.
Although customers feel suspicious providing a seemingly unnecessary information, they tend to be forgiving once there is an explanation for it. In the example below, a note ‘for shipping-related questions’ with an asterisk is shown on the phone number field.
When form lengths are kept short, it becomes less complicated, less confusing to fill up, and less distracting, which all in all leads to a successful and quick completion of the checkout forms.
Display progress on the checkout page
Although a single page checkout means accomplishing the entire checkout process in just one step, it is still important to show how much customers are progressing in terms of its completion.
Displaying the progress lets your customers know how far along they are towards the end of the checkout and this can have psychological rewards for the customer, increasing satisfaction and engagement.
Display progress by showing what goals in the checkout process need to be accomplished. These goals may be information for the billing address, shipping method, payment method, and so on.
Likewise, your progress indicator should show if certain goals have been accomplished already. For steps that are done, you can fade its tab color and for steps that’s currently being filled up, the tab color can be left in white.
Wamli, an online lifestyle store, displays a progress bar, which shows that there are only three simple steps in the entire checkout process. The tab or step currently being accomplished is indicated by a green color.
Color of call-to-action button
They say that the best color for that call-to-action button in your checkout page is the one that fits your site’s design best and drives your customers’ attention. While that is sound advice, studies have shown that using bright colors actually make ecommerce sites convert better. Red, according to a HubSpot 2011 study, can increase conversions by 21% over green.
Red may have a scientific basis, but do see to it to regularly test different color buttons for your call-to-action to know what color will indicate the next step in your checkout process more effectively. Below are examples of a single check out page that has a call-to-action button that stands out.
The minimalist and clean onepage checkout of Made allows the bright yellow color of its checkout button to stand out. Also in yellow is the order of the checkout step a customer is currently on.
You may also have noticed that Made has a countdown timer, adding the urgency component that helps in the immediate completion of the checkout process.
Bellroy also keeps a clean checkout page, allowing the call-to-action in bright orange to pop.
If your data shows low conversion rates on the checkout page, test its different elements. And just before you make a drastic redesign work; tweak your call-to-action button color first.
Have a staged or nested checkout
Staged and nested checkouts are checkout ecommerce designs that are essentially multi-page, but packaged like a one click checkout. Consider this option if you want your checkout process to be comprehensive minus the need to take the customer to different web pages.
See below onepage checkout examples for inspiration.
Sephora and UBuy Coffee offer a staged one page checkout design. Required fields need to be filled out first before a customer can click on ‘Continue’ to proceed to the next step.
On the other hand, Shade Station below is an example of a nested checkout page. When an option is selected, the checkout page naturally expands, revealing the next set of forms that need to be filled out.
Apart from these onepage checkout ecommerce secrets we’ve talked about so far, consider the following tips as well as you design your own one page checkout.
Make it easy to modify orders
Mistakes can happen. In the online shopping journey, there will always be customers who may accidentally put in the wrong items in their shopping cart or suddenly feel the need to shop less or increase the quantity of the products they are buying.
Like Wamli, customers can click on ‘Edit Cart’ on the checkout page and once they are taken back to their shopping cart; they can immediately modify their cart contents.
Do not frustrate your customers on the checkout page. Always make it easy for them to modify their final orders. Instead of prompting your customers to enter zero in the quantity field to indicate a cancellation of an order, provide them a ‘Remove’ link instead that will easily delete the product they no longer wish to buy.
Similarly, make it a breeze to update the quantity of the items they want to purchase by having plus or minus buttons or have a quantity field that can be edited with your customer’s desired value.
Another feature to take note of with the Wamli checkout page is that the ‘Review Order’ panel is locked, which means if the customer scrolls down the checkout page to complete the fields, the ‘Review Order’ panel stays in focus, reminding customers of what they are buying in every step of the checkout process.
Provide real time support
This is to easily resolve any concerns or doubts a customer may have while on a one click checkout. The checkout process largely requires customer’s input. Misunderstandings may arise and the available web-interface may not sufficiently provide the right answers.
For Ebags, not only is the live chat option available on the checkout page, but the other means to get in touch in real time are also listed down.
While having and directing customers to an FAQ page may have its merits, making support available in real time is still ideal because the FAQs may not exactly address your customer’s current issue. If the right answers or assistance are not provided, customers are likely to cancel the checkout process.
Keep the back button functional
The back button is one of the most used buttons in a web browser, so chances are your customers will use it if they want to modify their shopping cart contents. Some ecommerce sites disable this and display an error message instead, which can seriously affect your customers’ experience of your site. This can even lead to the abandonment of the checkout process, which hurt conversions.
Aside from allowing customers to go back to the earlier page without any problems, ensure that all previously entered data are saved well. It will be a cumbersome process if customers need to type in the same data all over again. Implement a session data storage system on your site for this purpose.
On the other hand, if you do not want your customers to use the actual back button on their browsers, indicate a clear ‘Back’ option that they can click on your checkout page, similar to the ‘Back to my Bag’ button on the Disney Store.
It is always a great relief for customers to know that they can go back to modify their orders or correct any mistakes in their shopping carts at any time during the checkout. This is also a boost to your site’s user experience.
Tell them what happens next
Now that your customers have successfully completed their order and clicked on the last button on the checkout page, finalize it with a ‘Thank You’ message to show appreciation for their purchase, similar to what Amazon does.
Aside from saying thanks, let your customers know what the next steps are in order to set the right expectations. Examples are informing them to check their email to see the confirmation of their order. Another way is to inform them they will receive another email, letting them know that their orders have been shipped and are in transit already.
Anything to clear any uncertainties about their purchase is good content for your final message.
As you design your one page checkout, keep these five success secrets in mind to ensure usability for your customers and a significant boost to your conversion rates.
Keep your required fields at a minimum, display your customer’s progress on the checkout page, and experiment on the color of the call-to-action button.
If you want to maintain the comprehensiveness of a multi-page checkout, consider doing a staged or nested checkout design that will still allow your customers to accomplish all fields in one page instead of taking them to a different web page for every new step.
And to keep up with the convenience of having a one page checkout, make sure that your customers can use the back button to modify their shopping carts, but that is of course if customers are unable to update their shopping carts on your actual checkout page. Make real-time support available and inform them of what will happen next after completing checkout.
What about you – any secrets for a successful one click checkout you’d like to share?