“formidable” – or how to improve your messy checkout forms

You own an online shop? Great. Your customers use it and buy whatever you offer? Even better. You use Googe Analytics to track what your customers are doing? Amazing. Then you might have noticed, that a lot of users will collect whatever they want in their cart, continue going to your checkout and then – skip. They jump of your boat when they already decided to buy. Did you ever wonder why that happens? It might be because your checkout form just wants them to run away and buy somewhere else.

I want to show you some steps to improve your checkout form and thereby increase your conversion rate.

1. Only ask what you need to know

Of course, you have your CRM tools and you want to fit your customer relation as perfect as possible. But does that mean that your customers need to tell you everything about them just to buy your products? Their birthdate doesn’t matter. Their phone might only matter for delivery. Do you still ask for fax numbers? Not even their sex matters (and might be difficult to answer anyway). If users need to fill out fields and don’t know why they should, they might loose the trust in your shop. So if you don’t really need this information don’t ask for it. Most optional fields could be stripped. And mandatory fields should be used with care anyway.

2. Don’t make them repeat themselves

If you need to send actual products (no downloads) you need a delivery address and a billing address. They might differ, but they don’t in most cases. So why ask twice? If the usual choice of your users is to just use the same, then your form should too. Make a checkbox with “Use as delivery address” as label and make it checked by default. Only if the user unchecks this checkbox, the second form will pop up. This makes the form slim and might make those two customers finish your checkout that didn’t want to type their address twice.

You really need to know their e-mail address and want to make sure, that they didn’t make a typo? So what usually happens is that you just put two inputs andy make them repeat the address. What will most users do? Copy the address from the first field and insert it in the second one – including typos.

So what should you do then to make sure that the user offered the right e-mail address?

First of all you could introduce a client and server side validation validating to correct format of the given information. Thereby you can at least identify if this is some e-mail address at all. Client side validation can easily be accomblished using the correct html5 input type “email”

<input type="email" name="email" />

Server side validation needs to be implemented matching to a propper regular expression.

Still not sure if the user didn’t make a typo? You want to make sure, the address exists? Then use an e-mail validator. There are multiple services out there.

• email-checker.net
• verify-email.org
• tools.verifyemailaddress.io
• …

And of course they are told to verify their data before finalizing the checkout. If they still sent the wrong address you just need to deal with it I guess.

3. Prefill what you already know (or can guess)

You probably think “How should I know what my users want to type in?”. You’re wrong. You know a lot about them before or while they are filling out your checkout form.

Gender

You need to know their gender in order to address them properly? In most cultures you can guess the gender using the first name. John and Marc will most likely be men while Maria and Julia most likely be women. There are of course names out there used by both men and women, but if you prefill the gender field with your guess and give users the possibility to change it, they might save some clicks.

Tools you can use:

• genderchecker.com
• gender-api.com

Address

The first thing you know about your users is their IP address. Using this you can already prefill the country field with a good guess using the geolocation database of your choice. Or your target audience is based in one single country? Preselect it. As soon as the user enters their zip code you know even more. The city is the easiest one to determine. But you also know a list of possible streets. So you can not only prefill the city but also offer autocomplete functionality for the street field. And once they entered their street you know all possible house numbers.

Another idea: do you already know what3words.com? They assigned a sequence of 3 words to every 3m x 3m square on earth. Those 3 words are easy to remember and enough to know country, city, street and house number. It even works in different languages. And they are easy to remember. You want to know the address of some cool places? The Eiffel Tower has “teams.sizzled.ambient”, The Brandenburg Gate “roosts.dude.sensible” and the statue of liberty “planet.inches.most”. You can even address places that don’t really have an address. Why not delivery your next pizza to the customers favorite place in the park?

Delivery Method

There is only one delivery method? Then preselect it. No need that the user needs to select something when they only have one choice anyway. And even if they have multiple choices like one-day delivery or time-slot delivery most users would pick the cheapest one, so you might as well preselect it.

4. Don’t make them send an invalid form

When do you usually validate your forms? You stick to server side validation? This is probably the most secure one and should of course always be the most reliably one. But considering user experience it might not be the best choice. Especially if you skip validation on the first error or provide inadequately feedback. Users will keep submitting and submitting the form until they hopefully found the right way. This is frustrating and will finally make them give up and buy somewhere else. Even validation on the client side once they hit the submit button is too late as they already finished editing and don’t want to go back in the progress.

So the perfect moment for client side validation is while they are typing or right after they finished one input field. Html5 inputs do this in every modern browser. Try this e-mail field. It stays red right until you entered a valid e-mail address.

e-mail

This is – of course – not the most stylish way to provide feedback but you get my point. When loaded, the form should of cause not show any errors for required fields. But once the user leaves a required field and it is still empty, you can give propper feedback. So the user sees any errors as soon as they are made and can eliminate them before submitting the form.

But there are always validation problems that need some server side check. Unique user names for example. But you still don’t need to wait until the user submits the form. Just use an AJAX request for this particular check and return the validation result. So users can choose a new username right away.

5. No pink unicorns

There is a lot happening on your website? Your header features a pink unicorn which is jumping from time to time? You usually have your coolest products in the sidebar visible on all pages? Great. But not during checkout. Try to make the checkout page(s) as simple as possible without loosing your corporate identity. They don’t need a navigation in the header, better replace it with the wizard putting the focus on the checkout steps. Your logo (not linked to the homepage) next to it should be enough.

The same goes for the footer (but mind any legal restrictions considering credits, …) sidebars, ads and so on. One visually not popping button to continue shopping is enough. The button to continue the checkout process should always be the one standing out.

6. Make them come back

You probably want all your users to register and not use a guest checkout. But offering no guest checkout from the beginning might not be the best way. A lot of users just feel safe if they think their data is not stored permanently and used only for this particular purchase. But technically, the only thing that distinguishes a guest from a registered user is a password. So if they finished their purchase why just leave them with some “Thank you for your purchase?” If they used guest checkout you might as well ask them again if they just want to add a password by listing all benefits this brings.

So with all those tools in your hands you can drastically reduce the amount of customers leaving your checkout. Have fun using them and don’t hesitate to comment with more ideas.