#DESIGN

7 ways to design better forms

When I think about forms, I remember the ones that gave me shudders more than the ones that were a cakewalk. And one major difference between the two which I can recall is that the easy ones talked to me in a human language, while the difficult ones looked like I was filling out a form for buying land on Mars.

*sigh*

What’s even more distressing is that these forms still continue to haunt us, even in the digital world. Wasn’t life supposed to become easier in the digital age?

So what can be done to save the world from bad forms?

Design with Empathy.

Usability experts and UX researchers have figured out common mistakes that designers make while designing forms. So, the ball is in our court now. It’s upon us, the creators of forms, to make sure that no form should deteriorate the experience of users.

Before I begin, I want you to go to your design repository and pick up all the forms that you have designed till today. Look at them and answer the below questions for me-

  • Are there any questions which sound confusing to you as you read them now?
  • Are you asking for too many irrelevant information from the user?
  • Have you given enough choices to the users in your multiple choice questions? Is there a field where they can write their response if none of the options match their answer?
  • Did you give instructions to the user to help him/her understand the form & its purpose?
  • Did you add a disclaimer in the form about how you are going to use/not use this information for other purposes?
  • Did you ask for personal information? Like blood group, marital status- which was, somewhat, not needed for your perusal?

With this exercise, I want you to put yourself in your users’ shoes and answer this- how would you feel if someone asked you to fill this form? Bored, panicky, irritated, satisfied, happy?

Whatever your response is, it will help you figure out your mistake and design better web forms. But first, let’s see what are the common problems that we see in present-day forms-

They lack human conversation

Most web forms lack empathy while conversing with users. They present questions with are confusing, long or just burdensome. But it doesn’t have to be like that. Forms, like any other means of communication, should flow with ease. They should be clear, concise, sometimes clever and at all times cooperative. Consider the example below-

Bad forms- example

The question assumed that the user filling out this form has at least one child. But still, adds the option of “don’t have children”.

A better way to ask this question is – “How many children do you have?” followed by a text field where users can add the count in numerals.

They ask for too many unrelated information

We all love data but hate filling forms because they ask too many questions. People dread filling forms that ask for too much personal information.

Think of it this way- you meet a stranger while you are on a holiday. You indulge in some small talk but after that, the stranger picks on you and starts asking personal questions- like marital status, hobbies and your source of income. Does it freak you out? Of course!

Web forms are quite similar to that weird stranger. Below is a web version-

example of form asking irrelevant questions

No one would want to fill in their personal information unless you make a connection. So, it’s important that you build a trustworthy relationship with your users and add a human touch to forms.

They lack coherence and character

Nick Babich says-

“A form is a type of conversation. And like any conversation, it should consist of logical communication between two parties: the user and the app.”

Users who land on your form are here to start that conversation. But, when small things like input fields, alignment, spacing, text color, labels are inconsistent and look visually cluttered, it puts them off. It creates confusion and they either skip it or fill incorrect information.

And the list is probably endless. The only conclusion that we can draw from here is that bad forms are omnipresent- a form for registration, another one for a newsletter, a bigger and more complex one for the checkout process.

So, now the mental model is such that when the users come across three to four bad forms while interacting with the website, they assume that it’s going to be a waste of time and effort. They don’t even the like the idea of ‘filling a form’. This is the major roadblock to designing forms- how to design a form so that people want to fill it?

We might help you with some suggestions. Here are 7 ways in which you can design better forms by keeping our end users in mind-

Know your users

Most forms on the web are “for anyone, for everyone”. Blame it on our mindset that just wants to collect more and more data, just for the heck of it. More signups=more users. But does more users equals to loyal users? Certainly not!

In that mindless race to collect more user information, we often spoil the experience for the real users- the ones whose aspirations we want to meet. So, it’s important to know who is your targeted audience, why they visit your website and what do they want to achieve with the form? Do they want to purchase a product? Or, do they want to receive promotional offers in email?

Avoid collecting unnecessary data

When you ask for users’ personal information, it raises a red flag in their mind and they immediately start weighing if they should leave or continue. For instance, if you’re filling a form for becoming a blood donor with Red Cross and they ask for your email id, wouldn’t you wonder why they need your email id and not phone number?

Now, as a blood donor, I would want to be notified on my phone, not email id. And if a form asks me for my email id I would think- will they send me regular emails? Damn! My inbox is already full of spam emails. Should I proceed or skip?

So, carefully devise the questions that you want your users’ to answer. And if there’s a reason behind collecting specific personal information, mention it explicitly in your form.

Explain why you are collecting personal information

Information such as date of birth, address, physical characteristics (e.g. body weight, birthmark), marital status, sexual preference, religion, income, socioeconomic status, cultural background, and educational background are all considered to be sensitive personal information.

So, be aware of what information you’re asking users to fill in the form. Chances are, most users will drop out of the form if you ask them for too much personal information.

how to reassure your users while filling forms

However, if that particular question is essential for you, explain to your users why you need it and what will you do with this information. Offer them a reassurance that this information is safe with you!

Ask questions that are easy to understand

Every user on the web is different. They belong to all age groups and they have their own reasons to browse the web. Some are experts, some are naive. Therefore, it’s important that your form doesn’t feel intimidating to any of them.

If you use abbreviations or terms that are regional or are understandable only to a certain age group, it will confuse people. They will either skip that part or answer whatever they feel is right.

Write labels that help users in answering

Labels are the text which identifies text fields, checkboxes, drop-down menus, and every other information field in a form. They instruct and inform the user about the information that they need to fill in. So, through them, you can communicate the action you want the users to take.

Therefore, make sure that labels are written in a language which helps even the first-time users in answering the questions easily. However, don’t write too long sentences. Labels should be crisp and short. As an example see Amazon’s previous sign in page as compared to the current one with shorter, better labels.

example of how to write labels on forms

Source- Nick Babich, Smashing Magazine

Group related things together

Grouping related information in logical blocks helps users understand the flow of questions. When you group similar information, users are more likely to grasp things in a better way.

Consider the example below- in the first one, every field is thrown into the user’s screen and it feels a bit overwhelming. The first thought that will come to your mind is- “Am I supposed to fill this entire thing?”

However, when you group things together with proper labels, users understand what part of the information they are filling in- personal, account related, contact information.

example of how forms should categorize responses

Source

Help them when they make errors

When users don’t have a clear understanding of what they need to do with a particular input field, they are more likely to make errors. So, it’s important that you don’t scare them with a red mark. Instead, guide them to success. Make them aware of the correct way with a helpful message.

Facebook error message when user login fails

For example- Facebook helps its users marvelously when they enter a wrong password. if the password that they have entered is incorrect, the interface reminds them that they had changed it a while back.


There are many more ways to simplify the form design. However, there aren’t any fixed steps to follow which will always lead to creating better user experiences. The only thing that you need to keep in mind is- keep it short. And simple. Users love it when they are left to do more without putting much ‘thinking’ into the process. So, respect their time and they’ll respect your designs.

You might also like