11 form design guidelines
Form design can be boring, and users invariably hate filling them out.
Forms are a necessary component of any website; be it contact forms, payment details, account creation, lead generation, etc, users definitely need to interact with some sort of form when using your product. The purpose of this post is to highlight some of the key guidelines which I follow when it comes to designing better forms.
Keep it short
Nobody likes a long form. At the “define scope” step of the design process, take some time to question whether each field is necessary for the user to achieve their objective. This might require more time, but trust me, the reduced user effort would lead to more user completing your form.
Visually group fields and their labels
Labels should be close to their respective fields. Make use of white space to clearly separate them, especially if the label is above the field.
Always place the label closer to the associated field than to other fields. This is because humans are wired in a way where they make connections through things that are closely grouped together — Gestalt’s Principles.
Show your requirements clearly
Tell the users what is required out of them. Don’t wait until they completed the form and show them an error message — which is a form of negative reinforcement. The user won’t know what is expected out of them if there’s no clear indication of the validation rules. This is especially applicable to the “password” field as different products will have different requirements.
Avoid using the placeholder text as the field label
The role of the placeholder is normally used to give hints on what type of information is required for that particular input field. But some designers are using it to replace the field label to reduce clutter and a more minimalistic look.
The problem with this is that the placeholder would disappear once the user interacts with the input field. This might be annoying if the user forgets the purpose of the field and has to click outside of it to see the placeholder again.
You can read more about the negative implications of using placeholder text as the field label here.
When the user clicks on the input field, the placeholder text fades out and becomes a mini field label on the top left.
I really like it when forms auto-focus the first input field as I just have to type, tab, type, tab, and done. Although it only saves me one additional click, it does enhance the overall experience in a subtle way.
When you allow for auto-focus, do also highlight active fields to inform users that the first field is already selected and that they can proceed to fill it out.
Highlight active fields
This is normally done by changing the border color and size to give a stronger visual cue. Make sure the color of the selected field stands out from the rest of the form so that it subconsciously helps the user to focus on the active field. The same concept can be used for errors as well, normally the text field will be highlighted in red if there’s an error.
Inform user that caps lock is on
This is such a simple feature yet not many products implemented it. There were times when I didn’t realize that the caps lock was on, and was frustrated when I kept getting rejected. Worst still, the error message didn’t even tell me that my caps lock was on, it just kept saying that my password was wrong. This can be really annoying for users.
Use visual constraints
Visual constraints help to reinforce the information required by users. For example, if only two characters are required for the “month” field then there’s no need for it to be as long as the “name” field or else it might cause confusion for the user.
Don’t hide your error messages
Some designs use tooltips to relay error messages. This is done by having an alert icon next to the text field and when users hover on the icon, the error message will appear. This is really bad UX as it requires more effort from the user to correct their mistake. Some users might not even know that they are required to take an extra step (hover over the icon) to view the error message.
If you like to learn more about designing error messages within forms, you can read more about it here.
Mark option fields clearly
If you do ignore the first tip (keeping your forms short) and use optional fields, make sure that they are clearly marked as being optional. It would give a stronger visual cue to mark the fields with the text “optional” rather than just using asterisks. Some users might also not understand the meaning being the asterisk, as it is sometimes used to indicate a validation error.
Use images to increase engagement
When it makes sense, use images for selection to improve the user experience. This is good if you want to better explain each selection using text, icons, and/ or images.
Use Predictive Search Whenever Possible
This mainly works when users are asked to input information that has a lot of predefined option, such as their holiday destination. This would allow the user to only enter a few letters to find their destination city, rather than typing out the entire name — a task that can be quite irritating.
It also reduces the odds of a failed search as the user is less likely to misspell their search term.
I know that designing a form can be a boring process and most users invariably hate to fill them out. But following the above guidelines and injecting some humor into your UX copy, you can improve the user’s experience and elicit an emotional reaction.
Doing so will undoubtedly increase the completion rate which is one of the objectives as the role of a UX designer.
If you want to collaborate, talk about UI/UX design, or just want to chat, you can connect with me via LinkedIn. Happy designing!
Thanks to Fabricio Teixeira.