Forms are of pivotal importance to individuals & businesses alike. When it comes to collecting data, forms most often than not is the direction we all take (perhaps due to it’s long-time presence around us offline before the internet boom). Therefore, creating user-friendly forms is a major key to increasing the completion rate of your forms.
Form Anatomy
Forms vary in purpose, content and size but there are basic elements to help your users skate through filling your form effortlessly.
i. Category or Section: This element helps users navigate the form as it walks them through the process. It is especially useful when you group the data to be collected into more than one category on your form e.g Personal details, Occupational details & Financial details.
ii. Label: The label tells the user what data is expected from them in any particular input field.
iii. Placeholder: Extra description about the Label.
iv. Error Message: Gives the user feedback on why their input in the input field is unacceptable.
v. Primary CTA button: A button at the end of the form which the user uses to submit the input(s) on the form.
Form States
At the very basics, there are 3 phases your form should go through during user interaction;
i. Default State: This is what your form looks like before any input from the user.
ii. Focus State: This places emphasis on the exact input field the user is interacting with. This helps improve focus & reduces scan time if a user turns away from their screen for a second.
iii. Feedback State: This is where the user receives feedback (most of the time error messages). Sometimes, this state can happen after the user moves to the next input field. However, if the data cannot be immediately verified, it happens when the user tries to submit the form by clicking a button.
Best Practices
1. Keep it simple.
Keep your forms short and simple. Collect only necessary data and avoid duplicating input fields in the name of verification e.g Instead of duplicating the password field, allow users view the password they have chosen to create.
2. Use Inline Validation.
When giving feedback about a wrong input by the user, it’s best to attach the feedback to the particular field it addresses.
3. Group related fields.
It is of great importance to group related fields together and sort them in standard sequences. This helps users fill in the required data easily without too much cognitive load and with minimal attention span.
4. Use Labels & Left align them.
Always place labels (as shown in Form Anatomy above) above the input fields. Do not replace placeholder text with Labels. Without labels, users will find it difficult to cross-check their inputs before submitting a form as it tends to make them think a lot.
When using labels, always left align them above the input field. There’s a comprehensive research report on how this is the most efficient method for users below.
5. Match fields to the type & size of the input field.
In simpler terms, always try to make sure the length of the input field is in proportion to the type of input that is expected e.g The input field for address should be longer than the input field for zip code.
6. CTA buttons
All forms should have a button at the end be it a SUBMIT button or a NEXT button. In any scenario whereby there has to be more than one button, emphasis should be placed on the primary button while the alternative button should be less prominent.
When using modals to collect data (forms in a modal), the alternative button is sometimes a CLOSE button which closes the modal. Another way around this is to use a x icon at the top right corner as a replacement for the alternative button as seen below.
7. The Search field
Don’t hide your search form especially if your website is content heavy then searching might be one of the preferred options to get around.
Also, after a user performs a search do not clear the search box after submission and results have been showed. This allows the user easily glance back at the search bar to know what he/she searched for initially.
8. Clarity
Clearly convey messages to the users. Tell them what is expected and be as clear as possible leaving no room for ambiguity. Nobody likes filling forms, nobody loves filling it twice.
All product images here are neither for promotion nor defamation purposes. This content is solely for educational purposes.
Enjoyed the read? Leave some ‘claps’ below so others can find this post :)
You can also let me know in the comments section if I missed anything.
Peace ✌🏽
