.svg)
Use the accordion-style checkout as a baseline, but feel free to test a multipage checkout or the one-pager checkout
Enabling people to go through the checkout with micro-interactions dramatically enhances their focus and helps them to complete checkout faster.
Enable the express checkout option for your returning customers
If a user is logged in and has a previously saved/used address or pickup point and preferred payment option - then pre-fill the checkout steps, lead the user straight to the order review step, and enable the user to verify the order with one click.
Push people, by default, inside a guest checkout flow, and better have a great reason why to log in, in the first place (such as an exciting loyalty program)
Depending on the nature of your business or industry, you might be tempted to push people to log in. Make sure they have a great reason to log in and can redeem various benefits - otherwise, have the guest checkout by default, and motivate users to log in - with your excellent benefits.
On mobile devices, open the right type of keyboard (such as numerical to numbers, etc.)
Save a few clicks for users by following this simple yet powerful method, and please more customers.
Optimize all checkout steps and inputs for browser autofill
Typing in your email address 2000 times is a pain, but we all do it often. Make a difference and unleash the power of browser autofill.
Have the following sections covered
The site-wide pre-header
A great place where to introduce information about delivery, returns, and unique selling points! Make sure the Return policy is clear, visible, and friendly.
The minimized checkout header
Show a back option, logo, checkout title, and support contacts! This will provide a great deal of value for your users.
The checkout progress bar
Show people where they are in the progress, and keep it three steps tops. Visually indicate progress and make the steps clickable.
The delivery selection
Start by asking people if they want goods to be delivered via a courier, or to a parcel/robot terminal (show the costs involved immediately before selection, including the estimated delivery time) - and based on the selections ask for specific inputs required. For starters minimize the number of inputs you ask from the user to the bare minimum on both occasions (and use Shipping Billing by default; auto-detect data with zip code etc). As soon as the user makes the selection, present a set of inputs to fill in or have them pre-filled if possible. After the user confirms the address or pickup details, create a summary of the inputs and allow the user to specify the preferred delivery option (if you use region, country, or some other matrix). After the option selection leads the user to the next step, keep the summary of the previous step highly visible, and allow the user to go back and edit.
The payment selection
Present at least two options for the users such as card payment and a pay later option (depending on your region), and enable users to select between these options and consider pre-selecting the most popular options for new users. Also support at least one or more third-party payment options (such as Apply Pay, Google Pay, and PayPal - keep them secondary). When re-directing people off the site to a payment gateway, explain it in short inside the payment selection card.
The order summary and review
Present a full overview of previous steps (summary and an edit option), items in the cart, an option to edit (takes the user back to cart or opens sidecart), discount, taxes, delivery costs, and total! Ask the user to accept the Terms & Conditions below the summary, and make the call to action to confirm the order highly prominent, see below.
The bottom call to action and summary bar
On mobile devices show the bottom bar as a sticky element, and present guest users to log in or create an account (see more on the account creation guide), see order total, and a visually prominent call to action to confirm checkout selection and steps.
When users get the order completed and land on the confirmation screen make sure to cover these aspects
Present the main site header and navigation, and below, a fully completed checkout progress bar. Confirm the user order status (Completed, Pending payment, Failed, etc) and provide additional details (such as email was sent, etc) - and provide a full overview of the order, including user selections, data added, products, delivery, payment options, costs, and amount paid! Keep in mind to try to make one-click upsells, ask for client feedback, run surveys, etc - it's really a sweet spot!
The bonus checklist
Implement these customer input hacks in your store
If you require more data, add hints and explanations why you need it (even for a phone nr. tell people the courier might need to get in touch, etc.). If you require a billing address, explain why. Try to Geo-locate the country, pre-fill it, and use Google Address Autocomplete. Hide the Address 2 line, and merge the first and last name.
Always label both optional and required fields on forms
Help people clearly understand what is needed and what is not. And, of course, ask as little as possible and as much as needed.
Have the cheapest delivery option selected by default
While offering a premium delivery option can be a great tactic to boost average order values, most people tend to go for the cheapest option, therefor saving a click helps.
Show order cutoff time as a countdown (order in 5h, get it in 12h)
A great way how to push people towards a sale faster and also an excellent method to try to pump average order value. Enable people to feel more urgency and decide faster, and show texts like: “Order in the next 2h, and your order will be shipped today, delivered tomorrow, etc.”
Use an address validator, such as Google Address Autocomplete, and allow users to overwrite the values
A great way how to minimize the effort required from the user. Autofill the address, so when the user starts to type in the address lines and finds a match that the user selects, it can automatically pull all the required values and fill it in. Google Address Autocomplete is an excellent way to go!
Use inline validation
As soon as the user types something in the inputs, have some code/algorithm to follow it, and validate it on the go! Did the user get the email format correct? What about the phone number? What about the address or the zip? Show positive and affirmative UI signals on the go.
Present error messages or hints close to the input and auto-scroll the view to position
Help people to get the issues on the spot, and do not make them wander around the page. Show where appropriate if the problem was with the zip input, clarify it, and explain how to resolve it.
Allow people to buy this order as a gift, or even enable them to buy a single item as a gift
A great way to make people buy more often - is by enabling them to buy for their colleagues, friends, and family!
The “please avoid” checklist
Avoid poor page speed
One two three four five six .... Bye-bye. Speed equals money in your pocket. Remember that, keep your Google page speed index above 90 on desktop and above 70 on mobile.
Avoid poor design, bad use of colors, and low contrast
It has been proven with research, that every 1 USD you invest in design and user experience improvements brings back 100 USD on average (https://tinyurl.com/wunderfront). Do not underestimate design, first impressions, and color psychology. Keep navigation and call to action of high contrast.
Avoid overpaying - use tools, themes, and plugins to make it happen! Go no-code or low-code!
There is the easy way and there is the hard way. Work smarter, not harder, unleash the power of software, and just buy affordable plugins, themes, or tools, to make it happen.
Avoid reinventing the wheel
Instead, use plugins, and ready-made software to cover these core guidelines.
Avoid multi-column form layouts in checkout
It simply confuses people and disorientates them from checkout completion.
Avoid asking user feedback during the checkout flow
Ask for feedback or participation in surveys after the checkout has been completed, not during checkout.
Avoid long loading times, especially without a clear loading icon
Updating forms and inputs, or selections, can either make it or break it. Make sure checkout is blazing fast, and if something takes longer than usual - show a loading state.
Avoid making people stuck and not able to move back and forth between steps
People need to move back and forth between checkout steps or even the main site and cart - with great ease. By using UI elements and links, and also the native browser back options.
Avoid aggressive upsells and cross-sells
Try to time more better, for example, after the purchase has been completed. On the site, or with email marketing automation, or remarketing!
Avoid inline labels
By using inline labels, you put users under great stress, because by selecting inputs, the inline labels will disappear, and the users easily forget what the input was about!
Avoid users typing anything twice and deleting their inputs while choosing selections or upon a page refresh
A cause of great frustration! Make sure your site "remembers" what the users type in and bets if the inputted data is still there after a refresh or on a returning visit.
Avoid CAPTCHAs at all cost
Though, if you try to work against your sales and conversion rate improvements, you can give it a go!
Avoid making the "Newsletter sign-up" mandatory
Focus on getting the sale first! And before the sale, you need to work on lead generation anyways. If you ask for the newsletter signup during checkout, you better provide amazing benefits on why to sign up the first place!
.webp){kind=logo}
.png){kind=logo}
