By Nick Babich net magazine
Discover some solutions to help you create forms that won’t drive your users up the wall.
Despite the evolution of human-computer interaction, forms still remain one of the most important types of interaction for users. People who use your application or site have a particular goal, and often the one thing standing between the user and their goal is a form. Every day, we use them for our essential activities – to complete purchases, to sign up for social networks, to provide feedback on a product we’ve bought, and more.
As a result, it’s very important for us to be able to complete online forms quickly and without confusion. The less effort we have to spend, the happier we are. As designers and developers, we should strive to produce faster, easier and more productive form experiences for our users.
In the second of my two articles exploring how to build better forms (find the first one here) here are my 10 tips to design forms that are user-friendly.
01. Only ask what’s required
Cutting the amount of required information makes the form easier to fill out. You should always question why and how the information you request is being used. Try to minimize the number of fields as much as possible, because every field you add to a form will affect its conversion rate. Limiting the number of questions and fields make your form less loaded, especially when you request a lot of information from your users.
02. Order the fields logically
Think of your form like a conversation; you want to group and order the fields in an order that makes sense to the user
It’s helpful to think of a form as being similar to a conversation. Like any normal conversation, it should be represented by a logical communication between two parties: a person and your app. Details should be asked for in an order that is logical from a user’s perspective, not that of the application or database. For example, it’s unusual to ask for someone’s address before their name.
It’s also very important to group related questions in blocks, so the flow from one set of questions to the next will better resemble a conversation. Grouping related fields also helps users make sense of the information they must fill in.
Pictured above are examples of two registration forms. Long forms can feel overwhelming if you don’t group related fields – compare the form on the left to the improved version on the right.
Grouping needs to be carried out visually as well as in the code. For example, you could use the <fieldset> and <legend> elements to associate related form controls:
03. Keep labels short
Field labels tell users what the corresponding input fields mean. Clear label text is one of the primary ways to make UIs more accessible. Labels tell the user the purpose of the field, but they aren’t help texts. Therefore, ensuring they scan easily is a priority – you should design succinct, short and descriptive labels (keep them to a word or two).
04. Don’t duplicate fields
This problem is particularly common for the registration forms: almost everyone has come across a form that requires you to type an email address or password twice. Historically, this was designed to prevent mistyping errors. However, most users simply copy-pasted the necessary field whenever the app allowed it. And if the original field’s data contained an error, it was duplicated.
05. Highlight optional fields
Ideally, it’s best to have no optional fields. In line with rule #1, if a piece of information is not required there’s no point in wasting a user’s time. But if you do use them, you should clearly distinguish which input fields cannot be left blank. Usually a small mark like an asterisk (*) or ‘optional’ label is enough.
06. Be careful with defaults
Avoid including a static default unless you believe a
