The Most Important Considerations for eCommerce Checkout UX
Simplify the Checkout Process
11% of users abandon their cart because the checkout process is too long or complicated.
The eCommerce checkout flow involves many different steps. Making this process simple and digestible is key to ensuring that your customers stay motivated to follow through with their purchases. A typical checkout flow includes:
- An (optional) log-in or sign-up.
- Billing and shipping information.
- Shipping method.
- Order review.
- Payment confirmation.
Below, we will discuss two ways that you can present your checkout: the one-page and multi-page checkout.
The Multi-page Checkout vs. One-page Checkout
The multi-page checkout splits the checkout flow across several different pages, thus segmenting the process to make it more manageable for the user. Kevin Clark, Senior UX Manager at Shopify, had this to say about the approach:
“We learned that by grouping relevant information together in chunks, and putting it in a logical order, you allow the user to focus on one task at a time. There is, however, a limit. You don’t want to go too far, like having a ten-step checkout experience.”
In turn, overloading your customer with numerous rows of form fields on a single page is a surefire way to lose a sale. For this reason, traditional one-page checkouts – where all required elements and fields are on the same screen – are considered rather outdated.
However, the one-page checkout has been re-invented in recent times. If many people abandon the checkout process when it is too long or complicated, surely finding a way to effectively condense the information onto a single page is the answer? That is what the accordion-style checkout aims to do.
An accordion-style checkout uses expanding and collapsing sections on the page to display different checkout stages. This means that the relevant form fields of each stage only appear when necessary, thus overcoming much of the critique levelled at one-page checkouts.
It is telling that even Amazon has switched from a multi-page to an accordion-style checkout in recent times…
Under Armour Example
Under Armour is a great example of an accordion-style checkout. The checkout process is broken down into three sections: shipping, payment, and contact information, all of which appear on a single page.
The three sections are visible from the start of the process. Therefore, customers know exactly what they have to do to complete their purchase.
At the same time, they are only able to enter the information relevant to each section once they have completed the previous one.
This “allow[s] the user to focus on one task at a time”, just as a multi-page checkout would.