Better form design: A new approach

Form design is a highly underappreciated area of UX design.

What’s so hard about it? You just create a few input fields with labels and a button, and that’s it. Easy-peasy, right?

Well, in practice, there’s way more to it. And the impact of an amazingly-designed form can be game-changing for the product and the business.

Let’s take a deeper look at form design as a practice and a few crucial principles that, if you follow, will help you double up on your form design game.

Importance of form design

Forms are often parts of the user journey with the highest dropoff rates. That’s unsurprising; after all, they require some conscious action from our users.

Not only do they have high dropoff rates, but they are almost everywhere — newsletter forms, sign-up forms, payment forms, and so on.

Now imagine what would happen if every single one of those forms performed just one or two percent better. The impact adds up quickly.

If you think I’m exaggerating, read this case study from Expedia. Long story short, an additional field in their form once cost them $12 million!

And it shouldn’t be a shocker — some big companies and agencies hire and train dedicated form designers. Small changes to forms can lead to multi-million dollar impact.

Landing page approach to form design

I want to introduce you to one key principle. Living by this principle alone will transform your form design approach.

Most forms are, in reality, small landing pages. It’s basically a landing page within a landing page.

---

Over 200k developers and product managers use LogRocket to create better digital experiences

Learn more →

---

Let’s just take a look at one decent form:

It starts with a headline — just like a landing page. It manages expectations and clearly informs what the value behind taking the next steps is while addressing various anxieties and barriers along the way. And, of course, it ends with a clear CTA.

The structure doesn’t differ much from your typical landing page.

Given that, the first step to designing a great form is simply following the principles of proper landing page design.

Most notably:

• Provide a clear, informative headline — It should clearly explain what the form is all about and indicate the value users will get from filling out the survey
• Manage expectations — Make sure the survey itself clearly explains what’s going to happen after they fill it
• Address barriers — Expect what anxieties and worries people might have when filling out the survey, and address them right away
• Have a strong CTA — one that explains what users will get in return (many designers use Send/Submit as a CTA, which is equally good as using a Pay CTA for the landing page)

Best case practices for form design

If you follow the landing page approach to form design, you have already upped your form design game. But, if you wish to take it even further, here are six crucial, high-leverage principles for you to follow:

1. Reduce the number of fields

Make every single field in your form fight for their life. Focus on one thing — each new field has to decrease the dropout rate:

I imagine that each field costs me 5% of all conversions. Then, with every field, I ask myself, “Is this question worth sacrificing 5% of the conversion?” If not, I remove it altogether.

2. Add screening questions if needed

There’s one exception to the as-few-fields-as-possible rule — screening and qualifying leads.

Say you are offering tax consulting for corporations but operate only within some industries. Instead of wasting time contacting leads who are not the right fit anyway, you can already qualify them with an additional survey question.

It will still cost you conversions, but the time saved with further qualifying will be well worth it.

3. Clearly mark optional fields and avoid asterisks

Although it’s typical to mark must-have fields with an asterisk (*) and leave optional fields unmarked, it’s not ideal.

People have already gotten used to omnipresent asterisks and filtering them out.

Instead, try to be more vocal about what fields are optional:

It’s a subtle change, but after numerous A/B tests on various forms, it’s an unsaid rule that:

• Tooltips work better than asterisks
• Marking optional fields as optional works better than marking mandatory fields as mandatory

Remember that regardless of how well you mark your optional fields, they’ll decrease your conversions as the perceived difficulty of the survey increases, so these also should fight for their life.

4. Ask easy questions first

In theory, it’s a basic, well-known principle. In practice, I still occasionally meet forms that break it.

The difficulty of your form questions should flow from easiest to hardest:

Hard questions are those that are most time-consuming, for example:

• Looking for the right option in the long dropdown list
• Figuring out which option works best for you
• Finding data that’s the back of your head (e.g., tax ID)

If you ask a hard question when a user fills 80% of the survey, there’s a higher chance they’ll finish that last one or two fields than if you asked them these at the beginning.

5. Limit the amount of artificial rules

There’s nothing more frustrating in filling out forms than getting a format error, such as:

• Put a proper zip code
• Use the 000-000-000 format for the phone number

It’s even worse if it’s not clear enough for the user. I once dropped out because I couldn’t understand what format the form expected:

I know there are many reasons for these rules, but most of the most common formatting errors can be fixed on your side, on the backend.

For example, if your database accepts only XXXXX zip codes, you should still accept XX-XXX zip codes on the form and just get rid of the hyphen on the database level.

Talk with your developers and try to limit the number of front-end rules as much as possible. In longer forms, that can give you a few extra percent of conversions.

6. Use tooltips to address complex anxieties

You want to ensure that your users clearly understand why you ask about particular data and what you will do with it.

Ideally, the copywriting around the form and overall context should do the trick, but in some cases, you might need an extra explanation. Tooltips will do just fine:

Users who are not worried will probably ignore it, so it doesn’t introduce much extra clutter. However, for those with particular objections and worries, these tooltips might be game-changers between converting and dropping off.

Wrap up

Form design is slowly beginning to become a UX specialization. And I’m not surprised.

Creating a perfect form requires a specific skill set, a lot of work, and numerous experiments. But it’s almost always worth it. These small improvements add up quickly.

Next time you design a form, remember the key principle — a form is a small landing page. Design it as if it were a landing page. Create a clear header, address anxieties, manage expectations, and provide an exciting call to action.

Then:

• Make each field fight for their lives, leaving screening questions if needed
• Clearly mark optional fields
• Ensure proper hierarchy – easiest questions first, hardest last
• Avoid validation rules that you can easily fix yourself
• Address anxieties whenever needed

You, and business stakeholders, will see the results pretty soon.

gd2md-html: xyzzy Thu Jul 18 2024

LogRocket: Analytics that give you UX insights without the need for interviews

LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.

See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.