5 UX best practices for online checkout design
The checkout flow is easily the most crucial phase of any online business. When all goes smoothly, the customer can effortlessly find their desired product, add it to their cart, fill out their shipping & billing information and wait for their prize to arrive in the mail. But, with customer expectations for an easy purchase journey at its peak, the process is not always smooth-sailing.
Even the slightest friction in your checkout process can drive shoppers away from your site—many never to return. To win over each and every customer, retailers must make it as easy as possible for them to get from start to finish. There are many areas where improvement can increase eCommerce conversions, but to make the biggest impact, you'll want to start with the most prominent: the user experience (UX).
A well-designed checkout can impact how customers perceive your brand and drastically lower your cart abandonment rates. At Loqate, we pride ourselves on helping eCommerce businesses create a UX that removes friction, builds customer trust, and leaves a lasting positive impression on present and future shoppers.
Below we've put together a checklist of UX recommendations that will help optimize online checkout on any device and bring you one step closer to increased revenue and happier shoppers.
Different types of shoppers rely on different elements of your site. Knowing and understanding these customers' habits, needs, and goals will help your UX designer craft a great checkout experience for all shoppers. Here are the five types of eCommerce shoppers:
Product-Focused: These shoppers visit your site with a specific product in mind, either for a newly advertised item or to replace something they already have. Already done with research and comparison, their main aim is to locate the desired item on your site, add it to their cart, and then complete their checkout.
Goal — Speed
Key checkout element — Easy access to previously purchased items and a streamlined checkout process.
Researchers: These shoppers visit your site to conduct product research. They have a specific goal in mind and may plan to purchase, but with no set timeline. It could happen today, tomorrow, or six months from now. Their main aim is to collect info on products and pricing.
Goal — Knowledge
Key checkout element — An easy to edit shopping cart that will retain products between visits.
Bargain Hunters: These shoppers compare your prices to competitors, only there to look for the best deal possible. They will repeatedly jump through hoops to qualify for these deals, but only if they can locate them quickly and know how much they are saving.
Goal — Savings
Key checkout element — Easy coupon redemption and a checkout that applies discounts automatically once a criterion is met.
Browsers: These are your leisurely shoppers, often there to kill time with no intention to purchase. They are on your site to see any changes, latest trends, new products that may be of interest, or what other people are buying.
Goal — Inspiration
Key checkout element — A well-designed save-for-later option and email "what's in your cart" reminders
One-Timers: These shoppers are a mix of the four above. They are often gift card recipients, gift card buyers, or purchasing something for a friend. They usually have no intention to revisit the site after the gift or product has been purchased, as it is for a one-time need only. Most importantly, they really appreciate websites that do not require them to create an account for purchase.
Goal — Convenience
Key checkout element — A guest checkout option that requires no registration.
The worst thing that etailers can do is inconvenience first-time shoppers with additional form fills and mandated registrations that only build resentment and ruin your chances of making a sale. Rather than provide personal information and entering into a formal relationship with the brand, most shoppers are only interested in buying something. But this penchant can actually work in your favor. If you provide shoppers with the quick and easy checkout process they demand, they will be sure to return to your site when looking for something else. This can also make checkout easier for returning customers who might forget their log-in credentials and are forced to create a new account or go through the longwinded "forget your password" process. Don't force registration upfront, instead offer registration after successful purchase or later via email.
UX expert tip: remove the register button in favor of a continue button that will take them directly to checkout and does not require them to fill in their details or create an account to make a purchase. Alternatively, online retailers can offer shoppers the opportunity to create an account towards the end of the checkout process—optional, of course. This quick, easy, and non-invasive method can enhance the reputation of your brand and make customers think, "This experience has been good so far; maybe I will return at some point…"
The time it takes to checkout is often the deciding factor as to whether a visitor makes a purchase or not. This should be a simple stage of the purchase journey, but confusion can set in if a form is long or complicated. In fact, according to Baymard Institute, this is the reason almost a third of shoppers abandon a website. An average checkout is over 14 form fields, which is twice as many form fields as needed. Address capture takes up most of these fields, whether it be address, city, or ZIP code. Worse, filling in the shipping and billing address can be one of the most dreaded parts of the process. Especially if the end user has to fill out a friend's address or an international address they are unfamiliar with. But all is not lost—the retailer can quickly turn this pain point into a selling point. Small checkout changes can make a big impact. If more fields increase the probability of abandon rate, then it only stands that retailers who cut form fields in half can successfully increase conversion rates.
UX expert tip: "Less is more," so only ask for information that's absolutely necessary and ditch the rest. Another smart way to improve web forms is to implement data validation tools, such as address lookup, phone verification, and email validation, which speed up the form-filling process and gives users the confidence that they have entered the correct details.
While shoppers love to order and receive new packages, customers do not actually like the process of getting your product. Too many steps can make the checkout process very time-consuming and inconvenient. In fact, 56% of US consumers find the process of filling in their address for an online order a chore. Additionally, if you add steps suddenly or take users off the linear path during your checkout process, they can be surprised and disturbed.
The best thing to do is reduce the number of steps and make it clear to the end user how many stages are left between their shopping cart and their completed transaction. eCommerce businesses will want to visually show the purchase progress with Interface elements such as a visual step tracker or progress bar. This will let shoppers know precisely how many steps they can expect to fill in and gives an impression of roughly how long it should take.
UX expert tip: If you want your customers to stay the course and reach the golden confirmation page, it's a good idea to show them a clear path to the finish line. If they know from the outset how much will be required to complete the purchase, you can make it less daunting. Add a progress bar that lets shoppers know how far is left to go. The gamification element gives the users a sense of completion as well.
When it comes to online checkouts, we all want instant access to our purchase, no hassle. This concept goes double for the inherently impatient mobile shopper—50% of which expect mobile shopping to be easier than on desktop. Ensuring your site is as mobile-friendly as possible is essential in today's convenience-driven world, where speed is everything. A well-designed mobile site starts with a responsive layout, ensuring your interface can adjust to different screens across many devices. Smaller screen sizes and keys are often why users make more typos than they do on desktops. These errors are costly for online companies. Incorrectly input addresses can cause failed or late deliveries, lost customer communications, and wasted time, money, and effort. Type-ahead address verification technology can help improve user experience and ensure accurate delivery details are captured while gliding the user through the checkout quickly and effortlessly. This faster address lookup radically improves the accuracy of data captured and, as a result, increases delivery success rates.
UX expert tip: Make your mobile site one single page and minimize the need to input text by implementing single-line address verification with type-ahead predictive technology. Users can then simply start typing their full address and click when the pertinent details are found. Auto-complete gives users the confidence that they have entered the address correctly while seamlessly accelerating their progression through the mobile checkout form.
Your end users are easily the most critical component of your online business success. Keep their need for convenience and speed at the front of mind when creating the UX for your site. Use address verification in your desktop and mobile checkout forms to reduce cognitive load and provide your customers with an easy, friction-free, and impactful customer experience.
Get the checklist
Tired of abandoned carts? Find out more about the benefits of address verification and how it can help you improve your customer's purchase journey.