Summary: Not all customers who get to the shopping cart are ready to buy. You need to employ e-commerce checkout best practices that nudge customers in different stages of the buying journey.
In this article, we’ll discuss best practices to make the e-commerce checkout experience frictionless, so more shoppers complete the transaction:
Introduction: Why You Need to Employ E-commerce Checkout Best Practices
1. Allow Guest Checkout to Reduce Cart Abandonment
2. Limit Distractions During Checkout
3. Set User Expectations During the Checkout Process
4. Continue Being Persuasive During Checkout
5. Show Additional Charges as Early as Possible
6. Capture the E-mail Address Early
7. Reduce User Load as Much as Possible
8. Use Form Validation
9. Show Estimated Delivery Times
10. Present an Exit Intent Popup
11. Save the Cart State
12. Spend Money to Get Some Visitors Back
Conclusion: Employ E-commerce Checkout Best Practices to Boost Conversions
Introduction: Why You Need to Employ E-commerce Checkout Best Practices
The total number of people who get to your e-commerce checkout experience versus those who actually complete the purchase is a very important metric. Presumably, you’re no longer convincing the visitors that you have something they want. You’re only convincing them to proceed with the purchase.
Now, it’s important to note that a significant number of people who go to the cart are NOT ready to buy:
- Some of them head to the cart to check your price points with things like shipping included, to compare total costs with the price points of other sites.
- Some visitors just want the item saved in the cart, with a fraction of those visitors waiting to get enough items in for free shipping.
- Some want to know the estimated shipping time and are checking to see if they should commit to the purchase.
In fact, the global average cart abandonment rate sits at 69.99% in 2022.
This is why it’s necessary to optimize the e-commerce checkout experience for both types of visitors: those who are willing to pull the trigger right away and the ones who can be convinced to check out at a later date.
To do that, you need to build trust and make the user feel at ease, make the checkout process as efficient and frictionless as possible, and learn how to employ remarketing tactics when needed.
Let’s dive in.
1. Allow Guest Checkout to Reduce Cart Abandonment
A sure-fire way to lose sales is to make registration mandatory.
Just because someone intends to buy from you doesn’t mean they’ll necessarily be willing to register on your site.
- They might be one-time buyers with no intention of coming back.
- They might dislike setting up usernames and passwords.
- They might assume that registering means receiving e-mails from you, and they might not want that.
Baymard Institute’s 2022 survey among US consumers showed that 24% of respondents abandon their online purchase during checkout because of mandatory account creation.
You can’t make users jump through additional hoops to purchase from you and expect high conversion rates. Forcing users to register means you’re adding unnecessary steps and, ultimately, increasing the chances that something will go wrong before the user can complete the purchase.
You can make the checkout experience more effortless by allowing guest checkout.
E-commerce Checkout Best Practices: Allowing Guest Checkout Examples
A good example of this is KitchenWarehouse.com.au. The site allows users to checkout without registering while communicating that if the user wants to create an account at a later time, they can do that too.
The site also establishes trust and credibility by labeling the login section as “Returning Customer”, which tells potential customers that other people buy over and over from this site:
The first part of Kitchen Warehouse’s checkout page has sections labeled as “New Customers” and “Returning Customer”. The first section is for customers who want to checkout without creating an account – it only asks users to put in an e-mail address. Below the e-mail field is a note saying “We need your email address to contact you about your order.” This is great, as it communicates to shoppers why the information is necessary.
Allowing guest checkout doesn’t mean you’ll give up on getting people to register for an account. It just means that you won’t be holding the transaction hostage.
The best time to offer account creation is after the sale has closed. At this point, the customer has given their pertinent information, so they would just need to create a password to register.
You can convince visitors to create an account by highlighting the benefits of having one. Ensure that you point out “What’s In It For Me? (WIIFM)” from the customer’s perspective. Get users to sign up by talking about faster checkout and ease of order tracking. Those are the types of things you need to focus on, rather than access your newsletter and related promo materials, which users might not care so much about.
Kitchen Warehouse’s order confirmation page has a “Create an Account” section, with password input fields, at the bottom of the page. It tries to persuade the customer to register by stating that having an account lets them keep track of their order and shop faster.
You can also consider testing something like Adidas’s checkout flow. The clothing company’s website defaults to guest checkout once the shopper clicks on the checkout button in the cart:
Adidas.com’s shopping bag has a “Login and Checkout Faster” link above the “Checkout” button. This creates a visual hierarchy where the link for registered users who want to log in is available, but is de-emphasized next to the checkout button.
The “Login and Checkout Faster” link is also available at the top of the delivery page, which is the first page of Adidas.com’s checkout.
The goal is to make the checkout process as frictionless as possible. So, you won’t be doing anyone any favors by making registration compulsory.
2. Limit Distractions During Checkout
One of the most important things you can do to optimize e-commerce checkout is to get out of your user’s way. That means you’re not presenting new promos, and you have only the interaction points that the visitor absolutely needs.
Test having a checkout flow with a limited header and no footer, or at least, presenting a layout with very few menu options. Minimizing distractions can reduce cart abandonment and boost conversions – this is an important flow to test and tweak, so you don’t have a leaky bucket.
That said, the checkout look and feel should generally be the same as the main website. You can reduce the number of elements present without changing the overall design. If you stray too far away from the core website’s look, you risk making the visitor feel like they’ve been taken elsewhere. That can erode visitor trust.
E-commerce Checkout Best Practices: Removing Distractions Example
Let’s take a look at YankeeCandle.com as an example.
The website’s global header elements make its shopping cart page visually cluttered because there seems to be several layers of navigation at the top:
- The topmost section has tabs that allow users to navigate to the websites of WoodWick and Chesapeake Candles, which are companies under Yankee Candle.
- Then, there’s the site ID bar with the logo, search bar, user login, store locator, etc.
- There’s the primary navigation bar, which directs shoppers to the different sections of the website.
- Lastly, there’s a rotating slider below the primary navigation bar.
Yankee Candle’s shopping cart is long with a lot of competing elements.
Yankee Candle, however, minimizes potential distractions once the shopper gets to checkout. It removes the header and footer items, while maintaining the website’s look and feel:
Yankee Candle’s checkout page is significantly cleaner and shorter. The header only has the brand’s logo in the upper left and a “Secure Checkout” sign in the upper right. Meanwhile, the page footer only contains the logo in the bottom left.
Visual clutter and distractions are never good anywhere on a website. However, they’re especially detrimental when the user is close to the purchase. So, take extra care about what’s displayed on the checkout screens.
3. Set User Expectations During the Checkout Process
Getting a checkout interface to work requires getting users to understand a few things:
- how many steps there are
- what each step is
- what clicking a button will do
Being very deliberate about setting user expectations is also one of the e-commerce checkout best practices you can observe.
Show a progress indicator
Showing visitors the entire set of steps, how far along they are, and how many screens are left before the purchase is complete can be as simple as having a bar at the top with numbered steps. As long as the number of steps is reasonable, letting users know what the “plan” is to get to the purchase can help make them stick around to the end.
Make labels explicit to reduce cart abandonment
If your button labels are clear and straightforward rather than cute and vague, you’ll avoid causing uncertainty and allow users to click through with confidence.
For instance, GoPole.com tries to orient customers by indicating the checkout steps at the top. This would be better, though, if the steps had more visual emphasis and if the text were more descriptive. Right now, the user is bound to wonder how “Information” is different from “Shipping”.
The site is on the right track, however, with regard to making button labels explicit (i.e. saying “Continue to shipping”, as opposed to just “Continue”):
GoPole’s checkout displays the steps at the top of the page as Cart > Information > Shipping > Payment.
In general, people like being oriented about the situations they’re in. They want to know where they are in the process and what they can expect next. Ensure that you communicate these things to users during checkout. That way, they can anticipate how long the process will take to complete and if they have time for it at the moment.
4. Continue Being Persuasive During Checkout
Some sites treat getting the visitors to the cart as a license to just use transactional language. Don’t make that mistake – you can be clear while still being persuasive.
Start by making sure that the checkout experience helps alleviate users’ anxieties about online transactions. For instance, calling it “Secure Checkout”, as opposed to just “Checkout”, can go a long way in making people feel good about putting their information on your site.
These e-commerce checkout best practices can help ensure your pages are as convincing as possible:
Add trust symbols to reduce cart abandonment
Having https in the URL bar will signal that the site is secure. However, less tech-savvy users will not know to look for this. So, you need to use trust seals that most people will recognize, like Norton and Better Business Bureau (BBB).
Use helpful error or missed field messages
If the user misses filling in a field during checkout, ensure that error messages sound friendly. Making the missed field red or adding an asterisk with some transactional message can make you come across as condescending.
If you want to help a user get back on track, you can be clear and helpful rather than dry and robotic.
For example, ASOS.com takes a friendlier approach to missed field messages. “Oops! You need to enter a city before you can continue” sounds more personable than “City is required/ mandatory” that’s typically seen on e-commerce sites:
The outline of the missed City field in Asos.com’s checkout form turns red. An error message callout also appears.
Remind the user what’s in the cart
Some e-commerce sites just indicate the number of items in the cart, since it’s the user who selected the items there. One of the e-commerce checkout best practices you can employ, however, is to indicate what visitors have added. That way, they are constantly reminded of what they’re about to purchase and are motivated to move forward.
Crutchfield.com’s checkout flow, for instance, fails to leverage the user’s excitement about buying something. It shows the price, but the name and the image of the product are not displayed:
Crutchfield.com’s checkout shows the order total with a breakdown of fees. However, it does not display the product image nor the name of the item the shopper added to the cart.
Take the time to review the language and persuasion elements used during checkout. You need to nudge users to keep moving forward, now more than ever.
5. Show Additional Charges as Early as Possible
Online shoppers have been trained to expect additional costs during checkout. Taxes and delivery fees based on the shipping address are things visitors expect to deal with. However, you have to be upfront about the fact that there are additional costs. It’s best to show those early in the process. That way, they’re baked into the users’ expectations, and they can decide at the onset if they’re willing to commit to the checkout process.
If your delivery fees are more than the standard (typically under $10) or if you have charges outside of taxes and shipping, drive extra visual attention to those. Otherwise, you’ll risk tarnishing your brand by showing it late and annoying visitors.
Failure to Show Additional Costs Early Example
PotteryBarn.com offers “Unlimited Flat Rate Delivery” for some of their products, with the fee varying depending on the customer’s zip code. However, the product detail page (PDP) does not display the delivery fee despite it asking for the customer’s zip code:
Pottery Barn’s PDP has a “Ship to Home” option and asks the customer for their zip code. It shows the estimated delivery date, but not the delivery fee.
The page’s call-to-action block has a “White Glove Delivery” label with a “See Details” link that launches into a pop-up modal. The popup, however, also does not display specific information around delivery fees:
The “White Glove Delivery” popup tells shoppers that an unlimited number of eligible items can be delivered into and assembled in their home for a flat fee. However, the exact fee is not indicated. Instead, the popup has a “Learn More” link that takes the shopper to the “Shopping Info” page.
Pottery Barn only shows the actual shipping fee when the customer gets to the “Payment” section of checkout, which is the third and last step in the checkout process. This can be annoying for shoppers since they’ve already had to type in their name, address, and phone number before the total fees are revealed:
Pottery Barn only shows the “Shipping & Processing” fee when the shopper gets to the “Payment” section of checkout.
Customers can also identify what the flat rate shipping fee for their zip code is by going to the “Shipping Info” page. However, this is bound to be missed, as the link is quite buried in the PDP.
Shoppers have to scroll past all the product images before they can see the “Shipping & Returns” anchor text. The left side of the product detail page creates a parallax-like effect that the shopper needs to scroll through to see more information like shipping details:
Pottery Barn’s PDP has a navigation bar below the fold with the following items: “Why You’ll Love It”, “Product Details”, “Dimensions”, “Responsibly Made”, and “Shipping & Returns”. These serve as anchor text that take the user further down the page. However, the user will need to scroll past all the product images before they can see the nav bar.
Clicking on the anchor text takes the user to the “Shipping & Returns” section towards the bottom of the page. They then have to click on “See your rate” under “Flat Rate Delivery” to get to the “Shipping Info” page:
Even if the user does find the link, they’re asked to input their zip code on the “Shipping Information” page:
The shopper has to type in their zip code in the “White Glove Delivery Charge by Zip Code” box and click the “Lookup” button to find out what the unlimited flat rate for their location is.
Once the user enters their zip code, the input box is replaced with a table showing three different flat rate fees depending on the order total (up to $999, $999.01 & over, and $5,000.01 & over).
It would be better if Pottery Barn puts this functionality on the PDP. That way, users don’t have to go deep into the checkout flow or hunt for the “Shipping Information” page just to know the shipping fee for their area.
Surprising visitors with additional charges is one of the worst things you can do when you’re trying to get people to convert. At best, unexpected cost increases can frustrate users. At worst, it’s enough to get them to leave your site, transact with some other company, and never trust your site again.
6. Capture the E-mail Address Early
Not all visitors who get to checkout are willing to purchase from you right away. You need a way to nudge them to come back and complete the transaction.
This is why it’s critical to capture e-mails early. If your visitor is not willing to transact yet, it gives you a way to contact them and ask them to return to the cart after some time has passed. This will be a lever you can tweak to get a fraction of people who have left the cart to convert down the line.
Anthropologie.com, for instance, has e-mail address as the first field the customer has to fill in when they start to check out:
Anthropologie tries to ensure the shopper’s e-mail address is captured even if they leave in the middle of the checkout process. The first page of checkout has a “Sign In” area at the top for registered users. Right below it is a “Check out as guest” section with e-mail address as the first input field.
Your cart and checkout will be used by all kinds of visitors, from those who are looking to transact then and there, to the ones who want to compare total costs across a range of sites. Your site needs to be ready for both those who are willing to pull the trigger right away, and those who need more time before they convert.
7. Reduce User Load as Much as Possible
There are concepts in web usability called a visual load, motor load, and cognitive load. These essentially translate to the amount of work required to use an interface. The higher the load, the less likely it is that a user will work with your interface.
Now, you can’t make a checkout experience function without adding a little strain to the visitors’ load. They have to make some selections based on preferences and payment options available to them, and they have to remember some things to transact with you.
What you want to avoid is unnecessary visitor load. If you can make your user interface (UI) function without making the visitor work too hard, figure out how to get that done, even if it means making tweaks on the technology side.
Here are some e-commerce checkout best practices you can implement to minimize visitor load:
Ask only for information that’s absolutely necessary
Make checkout forms simple by limiting fields to those that are absolutely needed for the transaction.
If the information is necessary, tell the users why you’re asking for it. This way, you avoid annoying the customer about the extra work you seem to be making them do. Plus, they’re bound to give you their real email address if they know it’s how you’ll send them the order receipt and tracking information, for example.
AE.com’s checkout form, for instance, lets users know why certain pieces of information are asked of them:
American Eagle’s checkout has a phone number as one of the pieces of information required for credit card payment. The site explains this in a note under the phone number field saying “In case there’s a billing issue”. There’s also a “Receipt and tracking information will be sent to this email address” note under the Contact Info section, above the email address field.
Use data to determine how you list options
Identify which options are most commonly chosen by customers. Give those visual emphases, so users see them right away.
For instance, list payment options in order of importance, with the most used ones listed first. In CottonOn.com’s case, it would seem that credit card is the most used by customers, given that it’s listed first and is the default payment option:
Cotton On gives customers different payment options: credit card, PayPal, Afterpay, Zip, and Klarna. The payment methods are stacked on top of each other, presumably in order of importance, from top to bottom. Each of the options behaves like an accordion with a radio button that the user can click on to expose the next actions. The Visa – Mastercard option, however, is exposed by default, so the customer can immediately type in their credit card information.
Pre-populate fields whenever you can
This requires some work on the technology side. But if you can handle it, you’ll make the visitor’s life much easier, increasing the likelihood that they’ll transact with you.
When asking for the guest’s address, for instance, Hilton.com asks for the zip code first. Then, the form automatically populates the city and state instead of making the user type those in:
The zip code input field is above the city and state fields in the guest information form of Hilton’s reservation page.
Adding some user strain is inevitable in a checkout process. The key is minimizing the load that the user has to bear by removing as many barriers as you can.
8. Use Form Validation
Some websites wait for something to go wrong, like a user completing a full step within the checkout process, before notifying them that something is missing or invalid.
You can do better than this by telling the user when they leave an input field that something is wrong. That way, you can help them as they take steps to complete the checkout. For instance, the e-mail address field can notify the user if the e-mail is not in the right format. And the zip code field can say something like “Oops! Could we have your zip code please?” if the user misses the zip code field.
CottonOn.com, for example, lets the user know they need to fix an input field as soon as they try to move on to the next field:
If the user puts in an invalid address, the outline of the e-mail address box of Cotton On’s checkout page turns into red orange. A message in red orange saying “Please enter a valid email address” also appears below the box.
When users receive a set of errors as they try to move forward, they can get frustrated with the checkout process. This is especially true if the areas that need to be fixed are not visually emphasized. You can address this by highlighting the areas the user needs to pay attention to as the error gets made.
9. Show Estimated Delivery Times
The expected delivery time is a top consideration for online shoppers in their purchase decisions. So, it’s generally best to show delivery timelines as early as possible in the buying journey.
The visibility of estimated delivery times, however, becomes even more important during checkout. Shoppers want to know when they can expect to receive the item, so they can determine if the timeline is within their requirements (if they need to receive the product urgently, for example).
Consider these numbers:
- According to the 2021 Shopify eCommerce Market Credibility Study, 45% of customers said that an estimated time of delivery is something that they need to see during checkout.
- Baymard Institute’s 2022 survey also revealed that 22% of the respondents cited “delivery was too slow” as the reason for abandonment during cart and checkout.
So, if you’re not managing delivery time expectations on your e-commerce website, you might be leaving a significant portion of your conversions to chance.
E-commerce Checkout Best Practices: Showing Estimated Delivery Time Example
Williams-Sonoma.com has displayed the expected delivery time down pat. The website shows the estimated time of delivery even before the customer starts the checkout process. The timeline is available on the product detail page:
Williams Sonoma’s product detail page asks the shopper for their zip code, and then shows an estimated delivery date.
The website’s shopping cart also nudges shoppers to complete the purchase sooner rather than later. It employs a time-based scarcity marketing tactic by telling the shopper that they have to order “now” if they want the product delivered by a certain date:
Williams Sonoma’s shopping cart tries to persuade customers to click the checkout button right away. The page has an “Order now for delivery [estimated dates of delivery] to Zip [shopper’s zip code]” message.
Shoppers can choose between “Standard” and “Next Day” under the “Delivery & Gift Options” section of the checkout page. The section indicates that “Standard” arrives within 3-5 business days. On the other hand, “Next Day” means “Orders received by 4 pm PT Monday through Friday, will be delivered next business day; orders placed Friday after 4 pm through Sunday will arrive on Tuesday”. The section also shows the estimated delivery date based on the delivery option chosen.
The visibility of the expected time of delivery is crucial in e-commerce (all the more so during checkout). It’s also one of the levers you can tweak in scarcity marketing.
Learn other scarcity marketing tactics you can employ to increase your e-commerce conversions. Read “Scarcity Marketing in E-commerce: How Fear is Part of the Conversion Process”.
10. Present an Exit Intent Popup
Just because people abandon their carts a lot doesn’t mean you shouldn’t take steps to try and get a fraction of those visitors to convert.
If they’re already leaving, and you don’t know if you can get them back later, you can present a popup as a last ditch effort to try and get them to continue with the checkout.
iRobot.com, for instance, nudges potential customers to proceed to checkout with an exit popup:
iRobot.com has a somewhat unconventional exit intent popup that appears on the right side of the screen. It says “We’re sad to see you go. Take home [name of the product] and get Free Shipping”. It has a “Complete your order” CTA button under the message, and a customer testimonial below that.
11. Save the Cart State
Getting a healthy set of visitors to go back to your cart after they have left is usually the result of a few things going right for you:
- Your price points or shipping delivery times are better than those of your competitors. And the visitors who are looking to compare end up choosing you as the site to transact with.
- Your deals and offers are well crafted.
- Your email and lead nurturing game is great. And you’ve collected the e-mails at the start rather than the end of the checkout process.
Since getting the visitor back is the result of hard work, good business models, deep specialization, or a combination of all those factors, you don’t want the returning visitors to end up abandoning your cart again.
One of the best ways you can ensure you don’t waste the conversion opportunity is to return the visitors to the “saved” state of their carts. If you get your visitor to come back but they have to start over, you’re more likely to lose the visitor without getting a conversion.
J.Crew.com saves customers’ cart state and shows a “Welcome back! You still have an item in your shopping bag” message near the shopping bag icon in the upper-right side of the screen. The website shows this message to returning visitors who previously abandoned their carts.
One of the e-commerce checkout best practices you can observe to is to reduce friction for people by getting them everything that was in their cart when they last saw it.
12. Spend Money to Get Some Visitors Back
This will be applicable to some organizations more than others, but for a fraction of your visitors, it may be a good idea to use some of your marketing dollars to get them back on the cart.
There are a few prerequisites for this:
- You understand enough about remarketing technology to segment out a set of users who have been to the cart and are prime candidates to target.
- You know how to save the cart state. So, when you bring back visitors via remarketing, the user will not have to start over.
- You have the internal clout to fight for remarketing ad spend.
If you meet all three conditions, you can try to spend some money to make (hopefully) more money back by using ads to get people back in the cart.
Conclusion: Employ E-commerce Checkout Best Practices to Boost Conversions
Your checkout pages are full of people who have already signaled that you have what they want.
You’re no longer fighting for attention. You’re no longer figuring out how to give them the information scent to the product that they need. And you’re no longer worrying about figuring out user intent. It’s just time to close the deal.
That can be surprisingly hard for sites that don’t follow best practices. You need to ensure that you get this part right. If you …
- allow users to checkout without creating an account,
- limit distractions,
- set user expectations,
- write persuasive content even on the checkout pages,
- display additional charges early on,
- capture the user’s email address early,
- reduce user load,
- use form validation,
- show the estimated time of delivery,
- use exit intent popups when necessary,
- learn how to save the user’s cart state, and
- utilize remarketing
… you’ll stand a better chance of converting users who get to the cart.
