How a Shorter Checkout Form Led to $12 Million Dollars in Profit

Written by Craig Morrison - Get free updates on new posts here.


I go to the doctor more than the average person.

I’m not a hypochondriac, but, I do live in Canada, which means I don’t pay to visit the doctor (directly at least).

So if something feels even slightly wrong, I go get it checked.

Now, every single time I go into that doctors office, it’s the same thing. I’m handed a clipboard, a pen, and I’m asked to fill out a form.

The same form.

Every. Single. Time.

I hate that form.

Not only are the pens and clipboards touched by every single sick person who enters that office (not a hypochondriac), but the information it’s asking for is the same info I put on it last time.

Name, address, health card number, phone number, email…

Why am I sitting here doing this? You must have this stuff on file! I can see the computer!!

 

penx_bottle_01

Pen sanitizer! Pfft! I’m not crazy! I’ll take ten.

 

It’s frustrating, and if I didn’t need to see the doctor, I would probably leave.

It’s the exact same situation I’m in when visiting your website and you ask me to fill out a big, long, stupid, repetitive form. The only difference is, I can easily leave with the click of a button.

And I will leave.

That’s why it’s so important to optimize your forms to cut down friction, frustration, and waste, in order to increase the number of people willing to complete it.

The more people that complete your form properly, the more your profits increase.

Don’t believe me? Just ask travel giant Expedia.

Remove a Single Form Field. Make $12 Million.

Time for story.

Once upon a time, Expedia realized they had a big problem.

People were searching their site, finding the hotels they wanted, entering in all their billing information and hitting the “Buy Now” button.

However, Expedia wasn’t collecting a large majority of these payments.

Why?

This is about as hot of a lead as you can possibly get. The user has found what they’re looking for, entered their payment info, and hit Buy Now.

So what gives? Er… What gived?

Well, through the awesome power of user testing and analytical research, they found out it all came down to this one, tiny, completely unnecessary field.

Can you guess what it what? I bet you’ll recognise it.

COMPANY NAME:

 

That’s right. The infamous “Company Name” field was causing Expedia to lose out on $12 million dollars of profits.

But how you ask? It wasn’t even a “required” field, so what does it matter if users filled it out wrong?

Because, it mislead the user into incorrectly filling out the rest of the required parts of the form.

Specifically the field marked “Address”.

You see, users were so thrown off by the “Company Name” field, they assumed Expedia was asking for the name of their bank because they asked for it right below the credit card information.

Then, since the field that followed directly after it was address, users were inputting the address of their bank instead of their home address.

When it came time for the credit card company to process the transaction, the billing address the user entered (the banks) didn’t match the one on file (their home), so the transaction failed.

The user, probably very confused as to why the payment wasn’t successful, abandons Expedia entirely in search of a competitor who they’ll hopefully have more luck with.

All Forms are Hard. Just Make Them Less Hard.

There’s no such thing as an enjoyable form.

People don’t jump for joy at the thought of filling out passport applications or income tax returns.

But time and time again, I see companies asking for the most useless information.

In Expedia’s case, what were they even going to do with thousands of people’s company names?

Because it actually has nothing to do with booking the hotel, and especially because it wasn’t even a required field, it shouldn’t have been included at all.

It can be a difficult thing to spot problems with your own forms, or even have a clue on how to make them more usable.

I’ve put together a list of 10 quick wins for increasing the completion rate of your forms.

Follow these tips exactly and watch the completion rate of your forms skyrocket (and hopefully revenue / number of users along with it).

Want to see how even the pros get it wrong?

Download my free ebook, Signup Form Teardowns, where I breakdown where even successful products get form design wrong, and what they can do to improve.

Powered by ConvertKit

10 Quick Wins For Improving Your Forms Usability

1 – Keep your forms as short as possible.

Simple question. If you looked at a really long staircase, and a short staircase, which one would you think is harder to climb?

This is how form length works. When a user sees a really long form, they automatically assume it’s going to take a long time to fill out, and so they avoid it like the plague.

If you need to collect a ton of information, break it into multiple forms across a few different pages, with a “continue” button to advance forward.

MailChimp Signup Form

MailChimps super short signup form

 

2 – All fields on your form should be required.

Let me clarify, I don’t mean just mark every single field on your form required. I mean remove all the fields that you don’t need.

If they aren’t important enough to be required, than why do you really need them at all?

All they are doing is making the form longer, and even at a quick glance, a long form looks complicated and time consuming to a user, and will lead to abandonment.

Need proof? HubSpot found that reducing a form from 4 field to 3 fields increased completion rates by 50%.

TMI

Don’t ask for things that you don’t really need.

 

3 – Use the right type of field/option for what you’re asking.

There are only a few fairly common elements when it comes to forms, and they are as follows:

  • Single line fields
  • Paragraph fields
  • Radio buttons
  • Check boxes
  • Dropdowns

Surprisingly enough, people don’t put much thought into what the correct option is for each circumstance.

It’s pretty obvious for a single field (name, address) and paragraph text (messages, more details), but people run into problems with checkboxes and radio button.

Here are the rules:

  1. Radio buttons are used when you have a small list of options where there is only once choice. Be sure to have one selected by default.
  2. Dropdown select boxes are used when you have a long list of options where there is only one choice.
  3. Checkboxes are used when you can choose any number of options, including none, or just one (like, do you agree with terms and conditions?)
  4. Be sure to label lists of radio buttons and checkboxes as they aren’t always indicative of what they are representing.
Wrong way to use radio buttons

A long list of exclusive options is better presented as a drop down field.

 

4 – Don’t make people “format” the information themselves

Do you know how many formats there can be for a phone number? A LOT.

Please don’t make your users guess at which format you’re looking for. Don’t even give them an example format.

Make your system format the phone number for them. If you’re looking for a number in this format (555)-555-5555 then make it okay for users to enter it in like 555-555-5555 or even 5555555555.

Oh no! But that will require some programming? So what! It’s not that difficult. And trust me, it’s worth the extra effort and expense.

5 – Provide instant validation when the user fills out a field

There are a few factors that keep users moving through any process you want them to.

One of the bigger ones? Confidence.

All user’s have had bad experiences with forms. Filling them out wrong, losing hours of information because of a single error, or a browser crash, or any number of things.

What will keep people motivated and more likely to complete your form is reassuring them they’ve filled everything out correctly before even hitting that “submit” button.

There is no better feeling to me than seeing a little check mark appear beside a field after I’m done filling it out.

It makes me feel warm and fuzzy inside. Like a just got a yellow smiley face sticker in grade 2. Now I’m full of confidence and motivated to keep going.

“But that will require some programming too!”

You want people to fill out this form, become a customer and buy your stuff right? Then you’re going to have to put a little effort into helping them get there.

Instant Form Validation

Forms with instant validation give me a high like no other drug on Earth.

 

6 – Don’t force users into making a selection that doesn’t apply to them

This is most common when asking a user to choose their profession, or the field they work in.

Often, they will need to select from a large list of professional fields, but for some reason these always seem to feel extremely dated or inapplicable.

Most of the time, I can never find anything related to “online business” or even “web development”. The closest I can find is usually “media and entertainment”.

Every time I have to settle for a choice like this, it doesn’t make me feel good. It feels as if the results I’m going to get will be skewed, and it just creates an overall feeling of uneasiness.

Uneasy users will drop off.

Give users a failsafe, like “other” or “not listed”. It might not give you all the data you’re looking for, but it will put users at east and greatly increase your forms completion rate.

Employees-shaking-hands-at-meeting-or-networking

“I hope you’re as excited as we are to be doing generic media and entertainment business today.”

 

7 – Use descriptive labels for your fields

It seems like it doesn’t even need to be said, but, label your input fields.

I see some people using the placeholder text as labels. This might make for a “cleaner” visual appearance, but it impacts the usability of the form itself.

Labels should be simple and clear for the user to understand what they’re supposed to do.

Placeholder text can be used to further clarify the expectation, or to fill with example content to help the user out even more.

Be sure to use the “label” HTML tag so it’s accessible for all users.

 

8 – Place your field labels above the field, not beside

There are all sorts of layouts for forms. Most of them I see are just designers trying to be creative and unique.

Don’t get mad. I’ve done it too. Plenty.

But according to extensive eye tracking research, the best place to put a field label is above the label, left justified.

This is because users are able to read the label and the field at the same time, and don’t need to scan between both (label first, then look across at field).

9 – Make your text fields at least 20 characters long

Short text boxes suck.

If I start typing my name and I’ve already reached the end of the box, I can’t just easily glance back to see if everything I’ve typed is correct.

Now I have to take my mouse cursor, or keyboard, and manually navigate within that form all the way back to the start.

That made me tired just typing it.

Give me some room to type, and to read what I’ve just typed.

This is especially important when it comes to designing your search input field.

Ideally, at least 20 characters wide for fields, but a better option would be 50 characters.

Short Fields

“I’m trapped in a glass form field of emotion!!!!!!”

 

10 – Save ALL the data if the user gets an error on submission

I just… I just can’t express how furious this makes me.

Recently, I was asked to fill out a “jobvite” form in order to complete a consulting gig.

It was a very detailed form. I’m talking 30 fields or more of information. But hey I’m a professional, so I grabbed a cup of coffee and decided to go at it.

Some of the questions were very detailed, and required me to give an educated answer.

When I finally finished it, I hit the submit button and received an error. I forgot to fill out a required field. No biggie, I’ll just fill it out.

To my horror all the info I had just spent 20+ minutes inputting had been erased.

NO

So. Much. Frustration. Does. Not. Compute.

 

GOD DAMN YOU TO HELL IMPROPERLY DESIGNED FORM!!!!!

I shouted at the screen. Shook my fist to the sky, and then Tweeted angrily at Jobvite.

Then I closed the tab and didn’t even bother filling it out again.

Do whatever it is you need to do to ensure the info the user entered is saved if the form needs to be refreshed because of an error.

The Path to More Profits is in User Friendly Forms

So, we’ve learned just how dangerous a poorly thought out form can be. If you’re not careful, it can end up costing you $12 million in profits per year.

On the flip side, a well designed form can greatly increase completion rates, and depending on what the form leads to, it can come with an increase in revenue or number of users.

You should definitely implement these following 10 tips into your own forms design:

  1. Keep your forms as short as possible.
  2. Only include required fields.
  3. Use the right type of field/option for what you’re asking.
  4. Don’t make people “format” the information themselves.
  5. Provide instant validation when the user fills out a field.
  6. Don’t force users into making a selection that doesn’t apply to them.
  7. Use descriptive labels for your fields.
  8. Place your field labels above the field, not beside.
  9. Make your text fields at least 20 characters long.
  10. Save ALL the data if the user gets an error on submission.

To show you some direct examples, I’m giving away a free ebook titled “Signup Form Teardowns” where I deconstruct popular sign up forms and point out the good and bad points of each.

Use the form below to download the eBook.

Want to see how even the pros get it wrong?

Download my free ebook, Signup Form Teardowns, where I breakdown where even successful products get form design wrong, and what they can do to improve.

Powered by ConvertKit

  • Hassan Rashid

    Hey Craig! Loved reading the Expedia story – the fact that such a minor tweak could make such a huge difference blew me away.
    As always, love your stuff – please keep writing!
    P.S. /r/startups would love this post! 😉

    • Thanks Hassan! I’m going to post it over there shortly.

  • Dror1

    Great post, thanks !

    p.s : by “put users at east” did you mean “put users at ease”” ?

  • Pingback: 5 Common UX Mistakes to Avoid on Your Mobile Site - Spencer Lanoue()