By default, checkout demands more cognitive load than any other step in a customer journey: filling out forms, thoroughly checking the data, and making a final purchasing decision. If a store pays too little attention to the checkout UX/UI, the situation exacerbates. Many prospects end up leaving a store, raising the cart and checkout abandonment rate.
Which checkout layout is handier? How is it better to display guest checkout? How will you optimize the form-filling? In this guide, we’ll discuss eCommerce checkout best (and worst) practices from various perspectives: smartphones and PCs, B2C and B2B stores, small and large ones.
Table of Content
1. Why Might Checkout Ruin a Shopping Experience?
At checkout, leads come to the sales funnel climax: a conversion. They’ve already decided on products and agreed with the prices. What remains is completing the order: opting for a shipping method, mentioning an address, applying a discount, and paying.
The main fear for an online merchant here is that shoppers will change their minds and won’t close the deal. And this fear is reasonable since the average cart abandonment rate for eCommerce is about 69%, with minor fluctuations year in and year out.
Complications at the checkout stage significantly contribute to such a striking percentage. Multiple surveys detected the primary weak spots in the checkout flow in UX terms, including the , which is often the first point of friction:
- The absence of a guest checkout option, which cuts the fastest way to buy;
- An inconvenient and lengthy checkout process, especially endless form-filling;
- Lack of some payment methods that are suitable, customary, or convenient for users;
- Hidden extra costs: people are likely to get upset if they see additional taxes or shipping fees only at the bottom of the checkout page.
Don’t know what prevents people from purchasing in your case? Uncover potential pain points in your checkout process by working with a like Onilab. We’re able to reduce friction during the checkout process as well as mitigate time- and cost-related concerns. To begin with, let’s examine the existing checkout designs and estimate their pros and cons.
Get a Free UX Audit Example
Read our demo UX report exploring the online store’s checkout issues.
2. The Main Checkout Types
There is a handful of widespread eCommerce checkout page designs, and each has its usability advantages and shortcomings. That’s how we at Onilab categorize them (you may come across different names in other sources):
- One-page checkouts: an expanded variant or opening in pop-ups/accordions;
- Multipage checkout.
Let’s see how they behave, the pitfalls, and which are better fits for smartphone and desktop versions of different stores.
2.1 One-Page Checkouts
As the name suggests, a one-page or one-step checkout contains all forms on a single page. However, we can organize these forms in several ways, considerably changing the checkout process UX.
a) Accordions
This type of one-page checkout is quite popular in eCommerce now (see our guide on ). While being on one page, all fields are hidden, forming a sort of menu. When a prospect lands at the checkout, they either see only titles or the first step already opened, like on Sambonet.
After finishing the form, a person taps a CTA and jumps to the next step. The previous one collapses, but the main info outputs under the corresponding label. The opening-closing mechanics may vary, but what is inevitable is layout shifts and scrolling. Since it’s harder to focus on the fields due to all these little shifts, a customer experience turns out to be spoiled to a certain extent.
This particular layout very inefficiently uses space: the whole process stretches for seven mobile/four desktop screens with CTAs located somewhere outside the viewport.
b) Pop-ups
We’d say this variant ensures the best mobile checkout UX. It eliminates the issues outlined above: a jumping layout and excessive scrolling. We at Onilab choose exactly this checkout type for all our current clients when conducting . Let’s see how it works. Let’s see how it works, featuring , our client's website, as a case study.
Firstly, a user sees a login pop-up. If to swipe it down, they can observe the checkout flow, grasp how many steps it implies, and check a preliminary order summary. When they enter an email and log in/register/continue as guests, the next pop-up appears automatically. After the buyer fills out the form and taps on a CTA, the following form pops up.
Why do we advocate pop-ups? Just because of a great convenience:
- They don’t affect the checkout layout: after closing a pop-up, customers find themselves almost in the same place on the page;
- They effectively use the screen space. Pop-ups open over the page, covering a header and sticky bar (if a store has it). Thus, all fields can fit.
- They keep people focused on the current step since other content is temporarily invisible and unavailable.
Info that customers have already provided is showcased on the main checkout screen. It’s particularly beneficial for returning customers: they see all the info straight away. On the desktop, checkout looks and behaves pretty much the same way.
In our examples, the entire checkout form has a length of two mobile screens, and on the desktop, everything fits above the fold.
c) Expanded one-step checkout
This type looks utterly different on PCs and smartphones. A desktop version tries to display all steps in an expanded position above the fold. Some fields don’t fit there, but the overall checkout flow is always visible to a user.
This take is a bit controversial as the amount of data on the screen may seem overwhelming. Besides this, reading fields from top to bottom is easier than from left to right. That’s why it can’t guarantee the best checkout UX.
If the desktop version is more or less handy, the expanded single-page checkout on mobile is far from perfection in usability terms. Obviously, you can’t show all fields at once. Instead, you place them successively, creating a page of an indefinite length, urging prospects to scroll on and on. For instance, we took four screenshots on Everlast before reaching the end.
Ok, we all know in general how many steps the checkout basically takes and what they are. But online store owners should also bear in mind customer behavior patterns, a short attention span on the Internet, and the significance of mobile-friendliness. The simpler the checkout looks and feels, the more odds a user will complete it.
Another popular problem is the order summary placed only at the checkout bottom, while it’s smarter to showcase an overview at the top as well. All in all, users reasonably perceive such a checkout as a messy, cluttered page that tires them from the very start.
2.2 Multipage Checkout
The other large subset of checkout designs implies displaying steps on separate pages. There can be 2 to 5 pages, sometimes with a cart becoming the first step. The idea behind the solution is to improve a checkout form UX by dividing it into more digestible chunks.
On the other hand, this splitting has a huge drawback: the need to load the next pages. If a store is poorly optimized, it’ll cause more friction on a customer journey; users will spend more time at checkout. This issue we’ve faced on Dr. Martens, for instance.
The must-have for any multipage checkout is a progress bar that keeps customers informed about how many steps remain. But sometimes stores miss this feature, leaving shoppers in ignorance.
It’s also essential to reflect data from the previous steps on the current one and allow to edit those blocks.
There are also hybrid checkout solutions where some steps open in pop-ups, others in accordions, or are expanded by default. It might make sense as the form lengths in different stores vary. If a merchant offers a dozen shipment or payment options, it’s better to implement the pop-ups. On the contrary, it might be unnecessary to hide methods if it’s only a couple of them.
2.3 What is the Best Ecommerce Checkout Design?
Certainly, no design is unambiguously perfect for any industry and vendor. The only versatile advice we could give is “Simplify the checkout as much as you can”. In other words, address what scares away most leads: a large and tangled checkout process.
For most eCommerce players, it means moving to a one-page checkout organized in pop-ups. This solution ensures a seamless user experience, especially on smartphones.
But B2B stores more oriented to laptops and selling complex goods may find the multipage checkout more appropriate to fit all the fields. The same goes for marketplaces that may process orders with items from several merchants who will deliver parcels separately.
3. Designing Essential Checkout Elements
Now that we’ve explored the main checkout types let’s move on to the checkout UX best practices regarding the placing, design, and behavior of separate elements. The recommendations are more or less applicable to any sort of checkout.
3.1 Organizing the Checkout Entry
When people tap on the checkout button, they traditionally have to log in, register (if they didn’t do so earlier), or choose guest checkout. Let’s discuss how to make this step easier for shoppers. We’d name three variants with drastically different effects on the UX.
a) An isolated checkout entrance. Customers usually get to a “purgatory”: a separate page dedicated to the account options. Even one-page checkouts may have this “purgatory” that technically transforms them into multipage ones. An additional entrance page makes the customer journey a bit longer and hides the checkout flow from visitors.
If you aren’t ready to redesign the existing checkout solution entirely, you can still make cosmetic improvements. First and foremost, aim at displaying all options above the fold. Stores oftentimes either fail to make neat layouts or hide something below the fold on purpose (we’ll discuss it further).
b) The checkout is opened in preview mode. On Onilab’s projects, like Bliss and , we try to omit any excessive stages, so we decided to demonstrate the checkout flow right away.
The scheme looks like this. A person observes a preliminary order summary, the number of steps and can apply a discount code. We’re messaging: the process is simple, and the price is favorable.
Then at the top, the person sees an active block to enter an email. The system checks the email and gives the corresponding options: type a password, create an account, or continue as a guest. Also, there’s the suggestion to log in via Google/social media.
c) Guest checkout is preselected. Users start filling out the fields as soon as they land on the page. The email for completing the order as a guest is required later. At the top or further on the flow, we see options to log in.
3.2 Showing Guest Checkout
All usability experts highlight the importance of guest checkout for a good UX. In the meantime, many stores deliberately hide this opportunity from customers:
- Guest checkout often becomes the last point on the list.
- Sometimes online retailers mask the option, implementing it as a link or plain text, lowering the odds of tapping on it. Also, they use a smaller and paler font.
- One more “trick” is locating such a link inconveniently: for instance, right below the “Create an account” button. Presumably, designers imply that if a user slips, they’ll be more willing to register.
On rare occasions, brands even don’t allow to checkout as a guest. They want more regular customers and their data to promote goods in newsletters. They also reckon that after the long way to checkout, users would rather create an account than leave the order unfinished.
But let’s recall the cart abandonment rate. These practices break one of the basic checkout UX design rules: simplifying. Checkout isn’t a no-brainer at all, but such patterns create even more complexity, cutting off a portion of customers.
Instead, we’d recommend acting through incentives: give visitors an extra discount for joining your customer base. Another actionable approach is offering to register at the end of the process or on the success page. A person has already provided an email, address, and payment method, so only the password remains. We usually blend these two tactics, as showcased in the screenshots of our clients’ websites, Bliss and a .
In our projects, we even take this burden off customers’ shoulders during this first session which is the most overloaded. The system creates a password automatically. When a user returns, they receive a one-time password by phone/email and then can change the password in the settings. By the way, this practice is in line with customers’ behavior patterns: people tend to forget codes and count more on autosaving and temporary passwords.
One more crucial improvement is adding social media/Google account login that even relieves users of the need to create an account.
3.3 Determining the Sequence of Steps
It’s ruled by a clear logic: the final price often depends on the shipping method, which, in turn, depends on the address. On PCs, you have more room, so most UI/UX designers bisect the screen and utilize both parts. Let’s take a one-page checkout as an example. On the left, the logical order is the following:
- An email field (optional);
- A shipping/billing address;
- A shipping method;
- A payment method;
- An order review (optional);
- A promo code section (optional);
- Terms and conditions (optional).
A block on the right side must show users relevant order info and help them finish without hesitation. That’s why it’s good practice to make it sticky, moving as buyers scroll back and forth. Consider how we crafted the checkout for our project. It contains the next elements:
- An order summary;
- A promo code section (optional);
- Terms and conditions (optional);
- A CTA to complete the order.
On mobile, the sequence of blocks is vital for a good user experience. The formula we promote in the checkout design looks as follows:
- A preliminary order summary with products review;
- An email field;
- A shipping/billing address;
- A shipping method;
- A payment method;
- A promo code section;
- Terms and conditions;
- A final order summary with a total price;
- A CTA.
You may move the delivery method above the address in case of offering in-store pick-up.
Also, we insist on adding a sticky bar. Basically, it contains the total price, the arrow to quickly go down to the detailed order summary, and a CTA. Users will immediately see a new total price upon selecting a shipping method that helps us overcome the hidden costs objection.
3.4 Removing Unnecessary Elements from the Interface
The ultimate task when designing the checkout flow is to prevent users from leaving it. That’s why UI/UX specialists redesign the whole interface, removing anything that may disrupt completing an order. Let’s consider these alterations.
What Must Be Deleted?
Being important on any other page, these and other constituents are seen as potential distractions at checkout, so:
- The header loses all standard components like , account, and wish list.
- The logo remains clickable, but the homepage is often opened in a separate window to save the current checkout process.
- The footer disappears entirely as well as a tab bar (bottom menu) if a store has it.
- No redundant links or banners are allowed. Once, our client wanted to add a banner inviting buyers to try on a device. But if the order is not completed yet, such a promo can just interrupt the flow and result in a lost deal. Instead, we displayed the banner on a success page.
- Having a dedicated button/link to go back is also undesirable. The exclusion might be the steps of multipage checkout, but if you allow for editing previous steps on the current one, this will be done automatically.
Some stores leave the link to return users to a shopping cart, but we don’t consider it good practice. There will be too many temptations: to check a wish list or remember something all of a sudden and .
However, you must think about cases when users accidentally click/swipe back. Instead of sending them back to the checkout entrance or cart, show a pop-up asking, “Are you sure you want to leave the checkout process?”
What Can’t Be Deleted?
Striving for the best checkout process UX, you still have to preserve some elements:
- If a store has a live chat feature, it’s fair to keep its icon at checkout as well to assist shoppers in case of issues. Just make sure the chat opens over a current page, doesn’t bombard customers with pop-up messages, and doesn’t cover the CTA button.
- Basically, stores have to ask for customers’ consent to the privacy policy and terms and conditions. Of course, you can’t do so without actually providing those documents. What we can do is open these links in pop-ups so that people stay in the current position on the flow.
3.5 Dealing with Editing Orders at Checkout
As we’ve mentioned before, it’s undesirable to provoke users to get off track. That’s why often editing the order isn’t available at the checkout stage. However, you can come across various realizations.
a) Editing is possible after returning to the cart page. At checkout, users can only review an order, not revise. On H&M, after clicking on the product thumbnails, a pop-up opens to let people check item details. There are no links to product pages to reduce the number of interaction points. The only way to change the order is by following the “Back to shopping bag” link.
b) Non-obvious editing. In Onilab’s projects, we slightly hide the possibility of changing orders. When customers open the summary, they see the details and may not guess that product names are clickable. If they tap on the name, a pop-up appears asking whether they want to leave the checkout process. If yes, they get to a chosen .
c) Partial editing at checkout. It’s a compromise approach that allows customers to make some edits right on the checkout page. For example, they can alter the number of products or delete them. See the techniques we applied on the website concerning the ability to edit the order contents. On Puma, editing opens in a pop-up, and a shopper can alter the item’s size or color as well. But users stay at checkout and can’t search or add new products as if they were back in the cart.
You also should allow for deleting items that went out of stock during completing a purchase. As a rule, goods are reserved for some time and then can be sold to somebody else. The system must not only explain why users can’t place the order but also make it possible to remove out-of-stock items without returning to the cart.
3.6 Improving the Address and Shipping Method Forms
This point naturally seems to be the most overwhelming due to the number of fields to fill out. On the other hand, there are several areas where you can facilitate the process for buyers.
Try to Fit All Fields on One Screen
Many online stores don’t pay enough attention to the form sizes, making them unjustifiably long. That’s how we can enhance the design:
- Put labels into the fields, not above. Firstly, this trick drastically diminishes the used space. Secondly, it prevents those silly and infuriating mistakes when you confuse the fields. For instance, I got trapped when filling out the form on Sambonet because it was tough to understand which label belonged to which field.
- Labels should be present when a prospect starts to type. Otherwise, when people check the form before submitting it, they might forget what field is for the house, flat number, or floor. With prompting titles, they can instantly make sure they didn’t confuse the data.
- Add placeholders with prompts on the data format (or mention it in labels). If you ask for a full name or a phone number, give an example: Vera Smith, +447975777555, etc.
- Remove optional fields and unite where possible. Why not ask for the first and last name in one field? Also, save space by omitting fields like a person’s title and additional address lines. You can apply the latter as a link that one opens if there’s a shortage of space for the full address.
Explore our eCommerce portfolio on Behance
See how Onilab's designers and developers transform the UX and improve conversions for online stores across the globe.
On the contrary, don’t trim too many lines. For instance, you could allow people to mention all address details in one field. But there’s no guarantee they will type it in the correct order (even if you provide an example in the placeholder). If people can observe an entire form on one screen, then no more cuts are required.
Assist in Filling out the Form
Luckily, you can automate the form-filling to a certain degree, and it’s not rocket science. There are measures you can take:
- Integrate an address finder. Indeed, many users rely on the browser’s auto-fill. But apart from it, we advise having a dedicated feature that suggests an address and fills several lines automatically after typing a couple of letters or postal code digits. These two solutions can be active simultaneously, so it will be up to visitors which one to use.
- Request access to a user’s location. It allows you to pre-fill a few fields, including a country and city.
- Add a map to select a pick-up point. The map embedded into the checkout helps visitors quickly choose the best option.
- Provide a proper keyboard for different forms. Unfortunately, many brands just don’t care that people get irritated when switching between keyboards at checkout. It’s a simple task for developers to amend the HTML code: they just need to mention the right types of a keyboard as attributes. As a result, filling out emails and phone numbers becomes less tedious.
More Tips on the Shipping Address Form
Based on the popular checkout design mistakes, we’ve determined a few more rules that make a checkout experience smoother:
- Add the “Billing address the same as shipping” checkbox into the shipping address form. Sometimes after completing the main form, users see a pop-up asking whether to use it as a billing address too. But dealing with a checkbox is way more effortless.
- And preselect it. If a person wants to add a different billing address, they uncheck, and the separate form appears. Or, if your customers rarely mention a billing address other than a shipping one, you can fill it out automatically and allow for editing.
- Mark the obligatory fields. Even if all fields are required, you need to clarify that. Otherwise, users could think some are optional. They skip it and then have to revise the form, find a missed point, and press the submit button again. So just mark all labels with an asterisk.
- Highlight the mistakes. The more noticeable the red signs are, the lesser time it will take to handle them. In Onilab’s projects, we prefer making a double accent: the frames get red, and the “Required field” labels appear.
3.7 Improving the Payment Method Form
A truly thrilling moment for online merchants and another hurdle for customers is inputting the payment data. Let’s see how a wise relieves moving through this step.
- Provide more payment options. The more diverse your offer is, the more chances are that people find a suitable one: a credit card, Apple/Google Pay, PayPal, or installment payment. Try to add at least one mobile-friendly method like Apple/Google Pay.
- Add Amazon/PayPal checkout. These solutions accelerate the checkout process for those registered in the services. When people tap on the button, they’re redirected to a login page. Then the data from the Amazon or PayPal account (an email, shipping address, and payment method) is transferred to the current checkout. Then a buyer selects a shipping method and can edit the data if needed.
Thus, it’s more logical to mention such an option somewhere at the top. For example, on GSM55, we embedded these buttons right under the email field.
- Offer to save a credit card. When it comes to credit cards, the checkout UX has many areas for improvement. For instance, while inputting new card details, customers might use a browser’s auto-fill. But the “Save card for future purchases” switcher/checkbox comes in handy anyway. Next time, they’ll pass the payment step faster.
- Improve the card payment form. You’ll greatly relieve the form-filling if the field sequence matches the order on physical credit cards. Also, make sure the card number line implies dividing by four 4-digit blocks so that it’s easy to check the correctness.
- Prompt where to look for the CVV/CVC code. Some cards have it on the backside while others on the front, so give people a hint. An advanced way to do so is visualizing. On desktop, you can display the pictures in the tooltip form, and on mobile, it’s a nice idea to open them in a pop-up.
3.8 Organizing the Promo Code Section
As usual, stores suggest inserting a promo code on the cart stage and duplicate the field at the checkout page just in case. On the desktop, you can embed it in three ways:
a) An opened field in the order summary. If discount codes are an integral part of the marketing strategy, then make this field prominent. The area between the order details and a final CTA is the best spot.
b) A link in the order summary. The field opens when tapping on it. If a store rarely offers promo codes, this variant is preferable.
c) A step in the checkout flow. If a store has a complex discount policy involving promo codes and a loyalty program, it makes sense to dedicate a separate step to them.On mobile, in the absence of other variants, this block usually takes a position between the payment section and the order summary.
3.9 Confirming the Order
Here we are at the very last step when a visitor transforms into a customer. They press the “Complete the order”/ “Pay now” button, are redirected to the secure payment page (or payment takes place on the site), and see a success page.
Checkout UX best practices at this stage imply filling the confirmation page with this valuable data:
- A success message indicating the order is accepted;
- A notification saying the confirmation email with details has been sent;
- An order number;
- A link/button to track a parcel;
- A detailed order summary;
- A link to download an invoice (optional);
- A live chat icon (optional);
- Buttons to go to an account or continue shopping (optional).
This part of user flow is essential for retaining people’s attention until they hit the “Pay Now” button. We at Onilab understand that and always advise our clients to redesign the checkout to see more conversions and revenue. For example, , one of our recent clients, couldn’t complain about the amount of website traffic. However, the number of conversions was far from desired.
That’s where we plunged into deep research, pinpointed some issues with the existing checkout page, and suggested that the store owner change it to our custom-built solution. We implemented this version, and here is what the website can now boast of:
- intuitive transition from one section to another;
- a visible order summary and the final CTA;
- customizable order contents;
- looks perfectly matching the overall store branding.
To Conclude
Checkout definitely requires painstaking work from designers and developers. The good news is that a smooth checkout page UX results in real conversions and a growing number of returning customers. Onilab is at your to create or reinvent anything, be it a user-friendly checkout page or the whole design for your store.
