July 25, 2019
With a 69% shopping cart abandonment rate online, it’s no wonder more and more Product Owners are asking teams to consider a single-page checkout design. Not only is a single-page checkout experience potentially easier and quicker to implement, but it can be a great way to increase site conversions when executed effectively.
A popular “one page” solution consists of a user-friendly cart that’s clear and straightforward. The goal is to eliminate anything extraneous and trim the experience down to only the forms and fields critical to the customer’s purchase journey.
While a short, simple checkout sounds delightful in theory, several challenges accompany this style of design. Whether you are building a brand new experience or updating a current site experience, here are some essential steps to implementing a successful single-page checkout.
Since every element of checkout lives on one page, it is easy to end up with an overwhelming volume of content to enter. Fight temptation to flood the screen with lengthy forms and fields for the customer to fill in. The user has already made their intention clear. They are on the website to buy a product, so it’s the product and design team’s job to make the checkout process as quick and painless as possible.
Only ask for the most basic and most essential details from your customers. These details usually include billing address, shipping method, and payment method, to name a few. Be sure to include helpful tips, field prompts and micro copy around buttons and field to save customers even more time. If a user has already entered a billing address, allow them to use the information for their shipping address instead of asking them to re-enter it.
Pre-populate fields whenever possible. This helps minimize the length of forms while also significantly reducing user effort. One of the easiest ways to guide customers through pre-population is by moving the country or zip code fields higher on the screen. Then use the entered data to populate fields like city, state, the 9-digit ZIP code.
Be sure to place an asterisk beside all mandatory form fields, especially if you have only a few optional fields on a form. For an even simpler experience, consider removing the optional fields so the asterisk marker is unnecessary. Simply say that all fields are required.
When asking for additional info outside of the basics, be sure to indicate why you’re requesting it with a tooltip or similar callout. Although some customers may be suspicious additional content is requested, like for example a secondary contact method, the customers’ worries are often eased when the site clearly explains the reasons behind the request, i.e., to coordinate shipping-related questions.
The ‘Back’ button is one of the most-used buttons in general web browsing, so it is no surprise a majority of eCommerce customers rely on this simple tool to do things like modify their cart contents.
Aside from allowing customers to navigate back to previous screens, be sure to capture any information they may have entered on the checkout page. Having to re-enter contact and other information can be cumbersome and may lead users to abandon the process altogether.
Customers are always relieved to know they can modify an orders throughout the checkout process. This practice improves a site’s user experience and generally lead to more conversions overall.
Staged and nested checkout essentially provide you with the best of both worlds. These function similarly to multi-page experiences, but are packaged to house an entire checkout process on just one page.
Staged designs require users to fill out several specific forms before clicking ‘Continue,’ while nested designs naturally expand various sections of the page as users moves through the checkout process.
While a single-page checkout allows customers to complete the entire process in just one step, it is still important to relay the user’s progress in completing each task on the checkout page.
Displaying a customer’s progress during checkout indicates how far along they are in the process and, in turn, how close they are to the end goal. Not only does this provide a clear explanation of the task at hand, but it increases satisfaction and engagement.
The simplest way to track customer progress is by indicating the goals in the checkout process that still need to be completed.
A process indicator should show what’s to come and the tasks already completed. This gives the user a full picture of the process allowing them to easily track how many steps they have left to complete before finalizing their purchase.
While the progress indicator tells users what to expect during the checkout process, it’s critical to continue to keep them in the loop once after they have completed checkout.
Once customers finalize an order, follow up with a Thank You message that conveys your appreciation and sets expectations for fulfillment. Set clear expectations for your customers by explaining next steps, such as an order confirmation email, shipment notification and how to handle changes etc. This is the perfect opportunity to clarify any uncertainties your customer may have about their new purchase.
Tech savvy and novice online shoppers alike can run into trouble or confusion during checkout. Real-time shopper support serves to resolve these issues and alleviate any doubts customers may have regarding their purchase or the checkout experience itself.
While FAQ pages may serve to answer many checkout-related inquiries, many users prefer live support when they have a question or concern. If possible, offer customers more than one way to get in touch, like email, live chat, and even a customer support phone number.
Live support saves customers the time of navigating to another page on your site and provides a better opportunity to have their question answered promptly, avoiding endless searches, and scanning through a laundry-list of common problems.
As you begin designing or modifying your single-page checkout experience, be sure to keep these best practices in mind. The key to a successful checkout is clarity, ease, good communication and practical customer support.
If you’re looking to transform an eCommerce experience through innovative design and best-in-class technology, reach out to Object Edge to learn more about our Digital Experience services.
Kelly Rader, CUA and VP of Digital Experience
Digital pioneer with 20+ years of experience bringing innovative digital products and services to market successfully for many industries and within a variety of challenging environments ranging from start-up to Fortune 100 companies. Effective in gaining organizational alignment on strategy and delivering creative solutions that solve real business problems.
Citation: Baymard 2018 “... 69% shopping cart abandonment rate online”
October 4, 2019
An eCommerce storefront designed for manufacturers. Imagine that instead of spending 18-24 months creating an RFP, building UX and design, and front-end development, you launched an eCommerce site in three months. BEPSY can help you get online, sooner.
September 26, 2019
Web accessibility is the practice of removing barriers for people with disabilities that might prevent their interaction with, or access to, websites or mobile applications. Businesses who don’t comply, are at risk of being sued for being in violation of ADA, Title III.