Checkout experience design principles
By the time a customer is on a checkout page the design has one job: taking their money.
Having worked on a few checkouts for major ecommerce sites this is a collection of design principles I’ve learnt, borrowed and stolen. Each may or may not apply to your design, customers, clients or products so as ever apply intelligence and test as much as possible.
1) Ruthlessly remove stuff
If it doesn’t contribute to taking your customer’s money remove it.
- Remove steps in your checkout journey
People drop out at every step. If you don’t need a basket page don’t have one. If you can combine pages it’s usually worth it.
- Remove form fields
Only ask for the minimum amount of information you need to take money off the customer and process the order.
- Longer forms are off-putting. They take more effort, increase the likelihood of mistakes and just take more time (time when your customer can start to doubt their purchase).
- If you can ask for information using one form field instead of two or more, do it. Instead of having a Title drop down, First Name field and Last Name field just let the customer enter their name in a single text field.
- Similarly use input masks to combine fields. Instead of having separate inputs for day month and year, just use one with an input mask to enforce formatting.
- Only ask for information once: if you need to a name for card details don’t ask for it again in delivery address.
Exception: be cautious about removing the terms and conditions checkbox, I’ve seen customers be wary of designs without it and actually take time to look for it when it wasn’t there. Customer have been trained to look for it so including it in a clear way may be better than removing it altogether. Test it with your customers.
- Remove navigation, search, footers, adverts and superfluous branding.
Remember that your checkout pages have one job and it’s not browsing, searching, informing, selling or looking impressive.
- Remove anything that might cause the customer to think or to have doubts.
To misquote Steg Krug: don’t let them think. Thinking is the last thing you want your customers to do in a checkout – they should be on autopilot with credit cards out. Remove all information that will cause them to think about the product they’ve selected. They’ve done their evaluation on the product page and decided it’s right for them. Don’t help them re-evaluate, re-Google and re-start, just take their money.
- Remove extraneous information about the product or services. Provide just enough information to reassure your customers that they are buying what they selected on the product page and aren’t accidentally buying the wrong thing. If you’re selling t-shirts and the customer has a choice between small, medium and large on the product page, on the checkout page list the product as a “medium t-shirt”. If you start listing, say, the type of cotton used it’s extra information that might cause the customer to think “but I wanted Fair Trade cotton” and you’ll lose them to Google. Remove everything about the product that the customer didn’t have a choice about on the product page.
- Remove or hide voucher or promo code inputs.
Promocode & voucher inputs reduce conversion for people without promocodes or vouchers. This is most people. There are two mechanisms at work here: the promocode input reminds people that they could be getting a better deal so they are less satisfied. Secondly people leave your site to search for vouchers on sites like myvouchercodes.co.uk and either don’t return or find expired or invalid vouchers. Trying to use expired vouchers causes frustrated and unhappy customers and increases support needs because they’ll phone up complaining.
But vouchers and promocodes are useful marketing tools to drive traffic to your site this needs to be balanced with their negative affects. Two suggestions: firstly don’t display the input by default but have it reveal itself when the customer clicks a link. People filling out forms tend to have attention blindness that reduced the impact of everything that isn’t a form field. Anyone wanting to enter a voucher will be primed to see the word “voucher” in the link. (The difference between being told to watch out for a gorilla or not.) Secondly, if there aren’t any currently valid promocodes hide the input altogether.
2) Add stuff that reassures the customer
Add stuff that helps reassure your customers. Saying how trustworthy you are and explaining what happens after purchasing will help customers be confortable with giving you money. Remove doubt.
- Say you’re secure.
Presenting your checkout as secure will reduce the anxiety of some customers have about making transactions online and increase conversion. Talk about “secure checkout” or “secure sign in” not just “checkout” or “sign in”. Add icons from security services like Thawte or VeriSign and payment providers like Visa, MasterCard and PayPal. Even just sprinkle a few padlock icons around. Within the bounds of taste the more the merrier – MVT is a good tool to see how this works for your site.
- Show you’re trustworthy.
If you’re not Amazon or eBay many of your customers will be first time customers and some social proof can be very reassuring. People like being part of a crowd – despite what they say few like to be trail blazers especially when it involves credit card information. Evidence (numbers, reviews, testimonials) helps.
- Help customers understand what will happen next.
Telling your customers that it’ll be all sunshine and happiness after they click “buy now” increases the likelihood they’ll give you money.
- How will things be delivered?
- Can customers easily return the product?
- Is there a sign up process or anything else the customer must complete?
Answering these questions will remove doubt and increase conversion.
3) Use simple interactions and basic form elements
These are design principles so I don’t want to get too far into form design but there are some general guidelines that are worth sticking to.
- Combine fields where you can.
I’ve mostly covered this already. One field is easer to enter data into than two or three. Use input masks to help guide your customers to enter data accurately and validly.
- Avoid dropdown lists.
They suck, are fiddly to use and hide options. For things like dates plain text input with helpful input masks are almost always better. For long lists, or lists with ambiguity, intelligent type-ahead style inputs can help. For short lists of options expose all of them on the interface.
- Have all interactions in one column.
It’s much easier to scan one column to see what needs to entered. If you have two columns users will miss something and get errors. Form errors reduce conversion.
- Avoid interactions that are outside a customer’s expectations.
Strange or new interactions can make customers uneasy. As ever, test. (But I’m willing to bet that the simplest interactions will win MVT’s all day long – Skeuocard is a great piece of interaction design but I can’t see it increasing conversion above a well designed, simple form.)
4) Avoid error messages (where possible)
If a customer sees an error message something has gone wrong. Customers who see error messages are less likely to give you their money.
- Restrict input types to the type of information you need.
This is particularly effective for mobile pages where browsers have good support for explicitly declared input types. If you need the input to only accept numbers then make the input only accept numbers. Be careful though and make sure you’re not being overly restrictive.
- Warnings are better than errors and client side errors are better than server side errors.
Warning customers that they are doing something that might not be right is better than waiting and giving an error. The earlier you help customers catch errors the better.
- Remove needless validation.
One thing customers are usually right about is what their name is – but many sites have validation on name fields. Don’t do this. (If you need to strip out punctuation do it server-side.) If someone wants to enter a phone number with spaces in odd places who cares? Just reformat it when they submit.
- Make your error messages polite and positive.
Your tone should match the site but in general it’s better to be serious and helpful not funny or twee.
5) Make paying easy, but not so easy people don’t feel in control
There’s a balance between the easy of making payments and a customer feeling in control. Amazon’s one-click system is wonderful if you’re buying paperbacks and stationary but if you’re selling £3000 holidays then it’s probably not the right solution for you. The backlash against in-app payments is an example of what can happen when customers are not in control of their payments.
- The smaller the transaction value the faster you can make the checkout feel.
Taking the money is good, but you also want repeat custom so don’t make it so easy that customers don’t feel in control or accidentally purchase something.
- Avoid entry of passwords.
Logged in customers convert better but logging is a barrier that reduces conversion – a conundrum. Always make the easiest path forward for your customers to pay – don’t require returning customers to log in (or for new customers to create an account). If you can provide compelling reasons for customers to log in during their browsing phase of shopping do it & use persistent log in if you can. If you must have a log in form in your checkout make sure the password reset journey is exceptionally smooth and brings the user directly back into the checkout so they can complete their purchase.
- Treat logged in experience carefully.
It’s very easy to take away control for logged in customers who already have their address and payment details saved – they can often hit the “pay now” button by accident or reflex. Getting pause right in your checkout cadence is the design challenge.
- Provide multiple ways to pay.
Customers have their own preferred ways to pay, help them by providing it. Some love PayPal, some will run a mile from it. More payment methods makes it easier for customers to pay in the way they are happy with (but having multiple payment providers isn’t always practical).
6) Visual design doesn’t matter too much for checkout pages
Looks can kill a sale but they won’t make one. I’ve seen a big London design agency do a redesign of a checkout that made zero difference to conversion – it went from a 2002-style 800px wide design to a shiny contemporary look but didn’t change any of the processes. This isn’t to say you can get away with your checkout looking shitty:
- It should look smart, professional, safe and secure
Checkouts are not the place to be experimental with your visual design – project the impression that you’re solid and trustworthy.
- It should look consistent with the rest of your site.
If it looks disconnected it might set off subconscious alarm bells in your user’s mind – “is this a phishing site?” “Why is it different – can I trust it with my data?” etc.
7) Miscellaneous, other, etc.
- You’re not Amazon.
Because Amazon does it it doesn’t mean it’s right for you. Amazon has different problems than you. See also, eBay, Apple, AirBnB etc.
- Support chat can work well but you shouldn’t need it.
Live chat support can work well for more complicated processes where products or services need configuring. For most products it’s probably more useful before the checkout – by the time the customer is on the checkout pages they should have decided the product is right for them.
- Customers are tense before a sale but relaxed after it.
Do the deal first, ask marketing questions later. Place account creation and other soft up-selling after the sale has been completed. If you get this right you can often get a higher engagement.
Every site will have it’s own design challenges but there are four overarching principles for good checkout experience design:
- Make it fast
- Make it simple
- Prevent reflective thought
- Make sure customers feel in control
Checkouts are a transactional experience so design them with that in mind.
What have I missed? Got any good examples? Let me know in the comments.