When a visitor knows what to expect and completes a process smoothly, I call this good “flow”. This post shows some options for how a checkout can be organized and presented to anticipate questions like: Does everything look right with my order? How long will this take? Is it going to be complicated? What are my options?)
Account Creation
Allow users to checkout as guests without side-stepping into an account creation flow:
Better yet, conceal account creation. For example, ask customers if they want to save their information at the bottom of the form (or on the Confirmation page after the order is completed):
For existing customers, you can provide a link to login or a small sign-in form on the side. If a user chooses not to login, you might check if their email is already in the system and offer to retrieve their last used info:
If someone forgot their password, you can tell them to continue as a guest to avoid the delay of recovering their password:
Express Checkouts
Give existing customer an express checkout option. On different sites, it may be called “express checkout” or “1-click purchase”:
Another type of express checkout is when your email recipient clicks a unique email link, so when they land on the page, they get the option of using same billing and shipping details. A Complete Money Back Guarantee helps ease doubts about an “express” checkout, since the customer sometimes doesn’t even get to see their last used information. If you offer 1-click purchases, include a Cancel/Undo option right on the Confirmation page. I’ve used a 1-step checkout before, not realizing it would literally put in the order without any confirmation.
Checkout Tunnels (Enclosed Checkouts)
A checkout that keeps normal navigation and sidebars creates a more natural transition. It tells customers “Check out now if you want, or keep looking around for other products”.
In contrast, a checkout tunnel removes all distractions. It tells customers “You’ve finished browsing. Time for payment”. Test the impact on your total order value, time to purchase, as well as completion rate. Keep consistent branding, and keep some common elements as visual anchors (e.g., remove the navigation links but preserve the area, so content areas don’t jump too much after the page transition).
One hybrid approach is opening the checkout in a modal with a faded background. The fading shifts attention away from background elements. At the same time, it maintains a strong connection to the product, since the product page remains in the background. One way to preserve that on a separate checkout is to include the image of the product being purchased.
Form Layout
The goal is to make the form look easy to fill.
Direct flow of attention in one direction, top to bottom. Avoid columns. That said, you can group short and closely related fields, especially if it’s expected (e.g., credit card dd/mm/yy expiry fields should appear together):
Give fields an appropriate maximum width. A narrow form will look simpler, because it appears to require less typing in each field:
Keep labels above fields to make the field-label unit easier to process. Left-aligned labels have advantages – they shorten the form and are easier to scan (see Top, Right or Left Aligned Form labels):
Avoid placeholder text and inner labels, because it creates confusion about which fields are completed and which are not. Inner labels may be ok on very short forms (2-3 fields), but make sure the label remains visible once the user starts typing. I like the pattern that moves the label over to the border area rather than removes it.
Stepped Progress
To make the form look like less work, chunk it up. You can have a long form with numbered sections separated with spaces or lines. Alternatively, you can use the “accordion” pattern to show one section at a time, while other sections are collapsed. Some checkouts span separate pages, such as Personal Info > Shipping > Payment (see examples with test data on GoodUI Evidence):
If you use a single long form, create distinct, intuitive sections (like Shipping Address, Payment), which you can also number. Test for best field to start with: Is it the email? Is it shipping preference? What is low friction? What is high engagement? What is high commitment?
If you use a multi-page checkout, use a breadcrumb or other progress indicator. For your “Next” buttons, use a label that sets an expectation, such as “Next: Payment”.
In your analytics, measure drop-offs at each step and engagement with key fields, so you can compare effectiveness of each layout (e.g., how many people start filling credit card).
Payment Alternatives
Choose a transaction processor with a high success rate. In addition to your default processor, you can offer an alternative gateway, such as PayPal. Conversely, see if removing the choice increases revenue:
A 3rd party checkouts usually takes the user away from your site and provides an experience you can’t track and have no control over, but it may increases revenue.
You can also use a fallback processor when a transaction is declined. If automating that is not possible, you can show a more informative Declined message with a link to the alternative, like PayPal.
Order Review
If you have a review step, try removing it, as it’s likely unnecessary. However, if you have a long checkout spanning several screens, it may be reassuring to see a summary before committing to the order. See what works.
In the next post, I plan to look at the Fields aspect of a checkout, which tells the user what data to provide and in what format. If you’re interested in reading that, please leave a comment so I know you’re interested.
Are there other patterns and aspects of a checkout I have not covered?