Best practices for form design
20 tips to boost form usability
The ultimate goal of a website or a mobile application is conversion, and forms play a vital role in doing so. Therefore, getting a form’s UX right is critical for business and it becomes a topmost task of a product designer to design a form, which is straightforward to work through, simple to understand, and easy to fill in. Or in short, a form that converts.
In this article, we will discuss 20 best practices to boost a form’s usability.
1. Minimizing the Input fields:
While designing a form, the most important thing is to avoid all the unnecessary questions and ask for the most relevant information only. Users do not want to fill a form with too many fields on it. By asking only the relevant information, and minimizing the number of objects on the screen you can decrease the cognitive load on them and boost up the completion time. Always remember the “Less is More” theory.
2. One Column Layout:
One Column form is faster to process than multiple column forms because multiple columns interrupt the vertical momentum of moving down the form. Single column layout keeps users on flow and results in faster completion. However, there are exceptions. For instance, the short and logical related fields like City, State, and Zip could be presented in the same row. For mobile devices, you can consider separate rows.
3. Multiple Steps:
There are times when we cannot minimize the number of fields and end up with a huge form. In such a case, we can chunk the form into several steps to minimize the user's cognitive load and visual noise. Study shows that providing a clear picture of the number of steps it takes to complete the process significantly increases form completion. From the psychological point of view, if users complete the first step, they are more likely to complete the form. Always provide a clear picture of the number of steps left or the percentage of completion through a progress bar.
4. Ask the easy questions first:
If your form has some complex questions, consider asking them at the end. Once, users answer simple questions, they will be committed and more likely to complete the form. If you ask complex questions at the beginning, chances for abandonment are high. For instance, if you ask for credit card details, in the beginning, they might not have it nearby, and chances of form abandonment increase. But once they fill in the easy question, they establish a rapport and will be more likely to complete the form.
5. Distinguish Optional and Required fields:
Before adding optional fields to the form, ask yourself if you can do it without them. Once users complete a form, you always have the option to ask additional questions at a later stage. Always mark required fields instead of mandatory. Use an asterisk (*) to mark the required fields as it is registered as a sign of mandatory fields among users. Even if most of the fields in the form are required mark them with an asterisk. We can add instruction at the top stating “All the fields are required” and not use the asterisk in all the fields, but users sometimes don’t read instructions and they will get confused. Also even if they read the instruction, they may forget them. Here is what NNGroup says.
6. Explain any input or formatting requirements:
If an input field requires special formatting, don’t make users guess the format and specify the clear instruction close to the input field. For instance, if a password input requires special characters and formatting, explain the formatting through support text.
7. Label:
A label is used to create a caption for a form input field.
- Label Position: The best position for placing a form label is above an input field because users are not forced to look separately at the label and the input field. This dramatically decreases the number of eye fixations and results in a faster completion time. For mobile devices always use a label at the top.
- Label to the left of the input field: For bigger screens sometimes, we place labels to the left of the input fields. In this instance, at least make them right-aligned, so they are close to the input fields and users could easily relate labels with the fields.
- Label Proximity: Always place labels close to the input field and have an ample amount of space between two input fields, so that users have no confusion to relating labels with the input field.
- Inline Labels: Sometimes we use Inline form field labels. Inline form field labels are labels that are located inside the fields themselves. These labels save us some space but there is a huge drawback. Once, users fill in the input, the label disappears. To see the label again, they are required to remove the input. Also, some users prefer to press the tab (key) to go to the next input field. They don’t even see the next field while entering the tab key. Once the input field is focused, they don’t find the label of the field, as the form label disappears on focus. Inline form field labels may be good for one or two fields, like search or log in with user name and password fields.
8. Placeholder Text:
The text in a placeholder can guide users to input correct data and improve the completion or conversion rate. Unfortunately, user testing shows, that placeholder texts often hurt usability than helping it. As users type in the field the hint disappears and if users forget the hint, they need to clear the text to see it again. There are many ways to provide hints. Product Designers can insert the instruction text within the form. Here is what NNGroup says.
9. Size fields Accordingly:
Using the same length for all the input fields in a form may make it look symmetric and visually appealing but it will fail the purpose of a form. For instance, the email input field can have around 40 characters but a Zip Code can have 5 characters. If we make the length of both the input fields to accommodate 40 characters, users may get confused while filling in the ZIP code. On all occasions, use field length as an affordance so that users know how much text is expected to be entered, just by looking at the length of the field.
10. Be careful with default values:
Default values are used to minimize the user’s effort to fill out the form. Make very good user research before applying the default values. Sometimes, it can cost you. People scan forms, and they won’t spend extra time verifying the inputted data. Once, while booking an Airline ticket, the form pre-populated my name that was fetched from my user name in the portal, and unfortunately, it was not matching with my ID proof. Even though it had a support text, to check for the name, I overlooked it.
11. Auto-focus first input field:
Offer field focus for the first input field in your form. Not only that it gives the users an indication of the starting point but also minimizes one tap/click. Make the active input field prominent and focused by highlighting it using a bold border or shadow so that users could understand from a glance, where the focus is.
12. Minimize dropdown menus:
If your dropdown menu has got less than 6 items, consider using radio buttons instead and for multiple selections, consider checkboxes. They will make all options visible and also reduce the interaction cost by minimizing the number of taps/clicks. Stack the radio button or checkboxes vertically for easy scanning and faster processing.
13. Making a form Tab-Ready:
Some users use the Tab key to move to the next input fields. Therefore, test your form with tab key navigation to ensure, it follows the correct sequence.
14. Provide Matching Keyboard:
This feature is primarily required for mobile devices. If we provide a matching keyboard, it will be easier for users to input the form. For instance, if we want users to fill in a numeric entry, the keyboard should show only numbers on it, so that the chances of entering the wrong characters are minimized.
15. Asking for Sensitive Information:
People are increasingly concerned about their privacy and security. They will be hesitant to provide any information that they consider private. If your form asks for sensitive information, make sure to explain, why you need them by providing a support text close to the input field. With no explanation, they are likely to abandon the form.
16. Provide Show Password Option:
Product designers often ask users to retype the password in a signup form to prevent users from mismatching the password. But asking to input the password twice not only increases the interaction cost but also does not guarantee that users will not make a mistake. As users don’t see the entered text, they are likely to make the same mistake twice and face the problem when trying to login using a password. Instead of asking for the password twice, provide an option to preview the password. Have an icon or a checkbox to unmask the password. Providing unmasking options in sign-in form for password and PIN always helps users to prevent login failure.
Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.
By Jakob Nielsen
17. Action button:
A form must have an action button to trigger the form submission. Here is how you can design an effective action button:
- Label: The button label should complete the sentence, “I want to”. Example — “Book Ticket”, “Create Account” etc. Avoid generic labels such as “Submit” and “Send”.
- Button Style: Make the action button prominent and descriptive. If your form has more than one button. Make them look different. The primary button should be more prominent. Maintain a good gap between buttons, to refrain users from clicking on the other button.
- Disable Button after the tap/click: Once users click on the Submit button, disable it so that there is no duplicate submission.
18. Form Feedback:
Once a form is submitted, provide feedback to the user. It could be positive like “form submitted successfully” or negative like “the email address is not valid”.
- Inline Error Message: Always display error messages inline. The message could be displayed just below or beside the input fields. Also, highlight the input fields with a contrast color.
- Don’t blame users: You should avoid negative language and refrain from blaming your user for the error in the form. A message like “You did not enter your name” could be replaced with “Please enter your name”.
- Error Message Copy: Be concise and specific about the Error Message. A message like “Something went wrong” is vague and users will be confused about their next action. The error message should be clear and direct to make users understand, what caused the error and how should they correct it. For instance, the message (Email address is invalid) makes users understand something is wrong in the email address. While the message (Please add “@” in the email address) makes it more clear to them.
19. Never use a Reset or Clear button:
These days, most of the users know, they can Reset a form by refreshing the browser. There are more drawbacks than benefits of a Reset button. If users click on a Reset button instead of a Submit button, their effort will be gone and they may not fill out the form again.
The Web would be a happier place if virtually all Reset buttons were removed. This button almost never helps users, but often hurts them.
NNGroup
20. Accessibility:
As product designers, it is our responsibility to ensure that users of all abilities should be able to access what we create. Here are a few things to consider to make a form more accessible:
- Ensure the form has a proper contrast: Provide sufficient contrast between foreground and background. Some people cannot read the text if there is not sufficient contrast between the text and the background. Measuring color contrast can be overwhelming. Please check for more information on the minimum contrast ratio as required by WCAG
- Allow users to control text size:
People with low vision and cognitive disabilities require increased font size to read. A product designer should provide controls that allow the user to incrementally increase or decrease the text size. - Screen Reader Enable: Make sure to include the label attribute for screen readers and section your form for two different topics and tag the groups for screen readers
- Don’t rely on color as the only visual means to communicate status:
While color can be useful to communicate status, don’t rely only on color, and provide some additional identification for color blind people. For example for an error message, change the text color to red and add an exclamation icon before the message. According to Prevent Blindness, an estimated 8 percent of males and less than 1 percent of females are color blind.
Filling out an online form isn’t something that most people like, so our goal as a product designer is to design a form that is straightforward to work through, simple to understand, and easy to fill in. By following some best practices, we can design a form, which can significantly increase the usability and the number of conversions.
