Don't make users think:

Best Practices to Improve User Experience of Checkout Forms

Nobody likes to fill out lengthy forms. A high cognitive effort causes people to overthink or click too many buttons, leading to user frustration; this results in higher abandonment rates on checkout pages, hurting your business.

I looked at several online stores, analyzing what made their user experience enjoyable and what made it suck. As a person who hates online shopping, here are my criteria for a delightful and successful checkout experience:

1. Easily add an item to my shopping cart, which means I don't have to complete extra steps or see pop-up messages.
2. Easily edit my shopping cart and check what items I have added. (Aritzia example). Users shouldn't have to go out of their way to delete an item or change the size or quantity of an item.
3. Guest checkout is a must for busy people and one-time shoppers. Users shouldn't have to register to buy from your store. You're going to lose money.
4. Be able to add promo codes. If I have a promo code, I want to check if it works before I input all my information in the fields. Remember, help your customers to save time; they'll appreciate it.
5. Not overwhelmed by things like purchase recommendations, credit card offers, newsletter sign-ups, etc. I don't want to be distracted. I know that revenue is significant for sellers, but if you confuse the user and distract them with recommendations or other things, you'll make it hard for them to complete the purchase.
6. Be able to review my information before confirming the order. I want to check that my data is correct before proceeding.
7. Feedback is essential: Did my order get approved? Did my payment work? I don't want to do the guesswork. I want a confirmation message with the order number and other essential details.

Here are my top recommendations on how to improve the UX and UI of the checkout page:

• Don't use the same colour for your Checkout CTA button and other buttons like Sign-In, Register, or Titles.

Sportchek's shopping cart has several CTAs, and even though they have different colours, it still confused me as I had to read the button and figure out what I needed to press. That takes only 10 seconds, but 10 seconds can make a big difference between proceeding to checkout vs dropping out. Sportchek could move the Donate button to the Payment section so that user has an opportunity to consider donating AFTER they've inputted all their shipping and payment information. At least, that's what they do in stores when you do self-checkout or cashier checkout.

Sportchek's checkout page.

• Make highly visible page titles and form steps.

Whether shipping, billing, payment or review, help your customers navigate easily and understand what is expected from them. Make titles highly visible by using big, bold font, and make your form steps visible by using a progress bar or ring indicator. Sequencing mental modal suggests that breaking down these complex tasks into small, easily completed actions will help reduce cognitive load. These can be steps in a sequence or simply a list of items that need to be completed.

• Combine similar data to reduce the number of input fields.

Too many fields will increase the user's cognitive load. Reducing fields will speed up the process and ease their burden. You can combine the name and address fields. Or you could add another label button to open a new input field. For example, Sephora has a button to add your apartment number.

Sephora's checkout page.

• Tell users why you need their data.

Need customer's phone number or birthday? Users will wonder why. To reduce uncertainty and build trust, provide a brief explanation in a hovering infobox for what purposes you are requesting information. Use an info icon tooltip for this to save space. Aritzia does a pretty great job with that! A simple and effective solution, instead of adding more text to the form page.

Aritizia's shipping stage.

• Provide feedback to users right away. Input validation is key.

If users' input information is incorrect, it's best to tell them about it right away than making them complete all other steps, go to the next page, and then tell them that they did something wrong. I often encounter that in mobile applications or when booking my airline tickets. I registered and created a password and went to the next stage to confirm that I read privacy documents, but there was an error. The error was about text length, but I couldn't determine what was wrong? It was about password length, which was on the previous page. That was a poor user experience. Below is that fitness app which is a bad example, and Sportchek's input validation which is a good example!

Other Key UI considerations when designing a CCheckoutform:

• Make field backgrounds more visible for better focus by creating a contrast. For example, a slightly darker or off-white background with a white fill creates higher visibility. It also reduces the need for fat and colourful borders around the input field, which look overwhelming. Below is an excellent example of what to do and what to avoid.
• Make the Billing address default as shipping, but display the user's address below it for recognition. Some UX experts recommend avoiding a Checkbox and using a select chip instead, but I think that might compete with CTA buttons like Confirm or Continue. Check below how Aritzia made theirs, which I believe is a user-friendly and aesthetic example.
• Make the Edit button visible. But without competing colours with CTA. You can do it by making the text bolder or underlining it. Sportchek's editing process was very frustrating, so I included a video to demonstrate my point. So please make it easy for your users!

Aritzia vs Sportchek shipping page

Aritzia vs Sportchek payment page

There are many more tips and ways to improve the user experience of the checkout page, and many apply to other forms (registration, choosing flight seats or booking a hotel/restaurant etc.). Aritzia provided an enjoyable user experience by providing guest checkout, input validation, and seamless and minimalist UI. By contrast, Sportchek has a clunky and outdated UI, conflicting CTAs and lots of input fields which frustrates users and adds to their cognitive load. Most importantly, perform AB testing to validate what works and what doesn't—for example, adding a Recommended For You or What Others Bought section after checkout might help engage the user further. See what makes most sense by testing!

I hope that this post was helpful to you. What are some good and bad examples of the checkout process you've encountered? Please share. I would love to see them!

Thank you for reading this, and subscribe for more content :)