Back in the Internet’s early days, placing an order online was a complicated — even scary — process.
Typing out your personal information and submitting it (along with payment) to a faceless website was once a rare and tedious task. Few consumers would select that option over the simplicity of purchasing at a brick-and-mortar store.
These days, it couldn’t be more different. Online shopping is no longer a hassle. It’s a convenience.
Online ordering has become a centerpiece for consumer shopping habits, especially in the wake of the COVID-19 pandemic. According to Forbes, 59 percent of consumers preferred to shop online for the 2020 holiday season.
The tale of this transformation has many threads. One of the most important has become so ubiquitous that it seems mundane: the checkout process. Let’s explore the importance of a great checkout experience and how to make it customer-pleasing.
A seamless shopping experience
Browsing a modern eCommerce website is a rich multimedia experience. Users go on a tour of interactive product catalogs bursting with high-resolution photos, slick video presentations, and carefully crafted product descriptions.
Until it’s time to check out, the user’s online shopping experience is almost passive. Other than clicking on what they want to see and adding items to their cart, the site asks very little of them.
When they’re ready to place an order, that changes.
The checkout process requires websites to ask a lot from their users. The site forces its potential customers to switch from passive to active participants, requiring them to input and verify several pieces of sensitive information.
Moving the user smoothly through the checkout process is essential for completing an order. If the site suffers from poor performance, if the user interface (UI) has design issues, or if technical errors cause frustration during the process, a potential sale can quickly turn into a disgruntled complaint.
eCommerce sites have adopted various technologies, UI, and user experience (UX) best practices that make the transition from passively shopping to actively ordering as seamless as possible.
Checkout experience best practices
On the surface, it might seem like the checkout process hasn’t evolved much from the Web’s early days. After all, we’re still asking for the same information using more-or-less the same input forms.
Most of the factors streamlining and simplifying the checkout experience are relatively subtle. If you’re not looking for them, you may never even know they’re there. That is their purpose: to keep your attention firmly fixed on finishing your order without distraction.
Your average eCommerce site has no shortage of eye candy. Pages typically include plenty of photos, an abundance of product information, and extensive product recommendations.
Placing all this content on the screen is excellent for browsing shoppers. But when it comes time to place an order, the multimedia circus becomes one giant distraction.
Many eCommerce sites serve a stripped-down version of their interface that removes extraneous layout elements, hides ads and product recommendations, and clearly presents the input forms necessary to complete the checkout process.
Separate into stages
The checkout process asks the user for heaps of information. To complete checkout, a user needs to:
- Review and verify their cart contents
- Input shipping information
- Verify final cost after tax and shipping
- Input payment information
- Verify their information
- Confirm their order
For some sites and services, there may be even more additional steps, such as signing up for an account or verifying the purchase using a security method like a PIN or 2-factor authentication.
Some companies have streamlined the modern checkout experience to the point that reading this list of six steps probably felt like more work than placing an order on your favorite eCommerce site. Developers behind checkout experiences have realized that the most effective way to ask the user for this information is in stages.
They often divide the checkout experience into at least four distinct steps, represented as different pages:
Chunking the checkout process creates a natural flow that delivers the user smoothly through the checkout without feeling overwhelmed.
Instead of asking for everything at once, the checkout experience should ask users to input their information in bite-sized chunks. Customers can always do one final review of their information at the end.
Assist user input
As users input their information to complete an order, it’s a great idea to assist them as much as possible.
Browsers and devices already heavily assist users, auto-completing text and auto-filling forms. Similarly, eCommerce websites can implement some automated systems to help users input their information during checkout.
Some of the most common means of assisting user input include:
- Luhn validation: Credit card numbers follow a regular, predictable pattern. With some help from the Luhn algorithm, developers can automatically check a credit card number’s validity during the input stage. When the system alerts the customer to credit card number errors in real-time during the input stage, it saves the hassle resulting from invalid or inaccurate credit card details.
- Address verification and autocomplete: Using a tool such as Lob’s Address Verification and Autocomplete API, eCommerce websites assist users as they type their address, often autocompleting based on just a few details and suggesting a validated address. This assistance simplifies the checkout process from the user’s perspective. It also helps ensure the site only collects valid shipping information, and the company avoids sending packages to invalid or inaccurate addresses.
- Formatting: Credit card numbers, addresses, and phone numbers all have standardized formatting designed for readable presentation. Input forms should adhere to these formatting conventions by automatically spacing credit card numbers, adding dashes to telephone numbers, and respecting other best practices that improve readability.
When, where, and why
Developers must question every checkout flow element’s when, where, and why. Of particular interest is the humble zip code. Checkout systems sometimes ask for the zip code upfront, sometimes as early as the cart page.
Asking for the zip code this early seems to break the flow of the checkout process. The site isn’t ready for the user’s shipping information, so why ask early for this one piece?
The website can calculate a shipping estimate and determine taxes using the customer’s zip code. Asking early for the zip code enables the eCommerce site to be transparent about the total cost the user can expect to pay. This transparency prevents sticker shock when the customer reaches the confirmation page and discovers unanticipated taxes and shipping fees.
If shipping costs are high, asking for the zip code first may be the way to go. However, if the platform offers free or low-cost shipping, this information may not be relevant enough to justify disrupting the checkout flow.
Questions of when, where, and why include a checkout element are often nuanced — even controversial. There is no one-size-fits-all solution for zip codes, so developers must innovate solutions that meet the unique demands of their checkout experience.
What to avoid
Part of defining best practices is learning what not to do.
Despite the checkout experience becoming more streamlined and simplified, it’s best to avoid a few common UI/UX elements that frustrate the checkout process. Let’s scrutinize a few.
As a general rule, if the user doesn’t need an account to complete their order, a website shouldn’t ask them to register one.
Forced registration and lack of a clearly labeled “guest checkout” option are artificial barriers to placing an order. While certain products and services require the user to have an account as part of the product or for regulatory reasons, creating an account is an unnecessary extra step for most orders.
Overly complex password requirements
If a site requires a user to create an account, it should use simple and transparent password requirements. While it is a best security practice to require somewhat complex passwords, websites that take their password requirements to the extreme often frustrate their users more than improve security.
Ensure to list all password requirements at the input stage. Better yet, provide a real-time validation method that checks the user’s password against the standard and immediately lets them know if there are any issues.
Delivery speed versus estimated delivery date
Many eCommerce sites opt to show an estimated delivery speed instead of providing an estimated delivery date. You might find a retailer advertising its delivery speeds: “Order now and receive within 2-3 business days.”
Contrast this with a site that offers estimated delivery dates: “Order now and receive between September 5 and September 8.” Now the customer has a definite idea of when to expect their package.
Delivery speeds tend to be less accurate and highly generalized. The delivery speed rarely takes into account distance or other factors that might complicate delivery.
An estimated delivery date provides a more concrete and accurate estimate. It leaves much less room for misinterpretation on the customer’s part. The customer may wonder what exactly “2-3 business days” means and when that clock starts ticking relative to their order.
Check out your checkout
Though it may seem rather mundane, the checkout process is ultimately one of the most essential elements of any eCommerce website. Companies shouldn’t take their checkout for granted.
Now that you know a few different aspects to identify, scrutinize the checkout process the next time you place an order on another website. Are they using Luhn validation for your credit card number? Do they break the checkout process into stages? Does a handy address autocomplete system assist you with your input?
You’ll quickly develop an eye for spotting checkout best practices. Maybe you’ll even innovate a best practice of your own.
If you’re interested in developing expert technical content that performs, let’s have a conversation today.