One of the most important elements to any website is the forms the user is required to complete while visiting, which are often the only way to get the information you need to capture. As they are direct requests for information, if designed correctly, they should be clear to understand and easy to complete.
Forms exist for many reasons and getting website form UX right is key to providing a good customer experience. In this article, we look at a simple account registration form, but there are many other examples; newsletter signups, marketing preferences, eCommerce checkouts to name a few.
1. Start with a plan
Before building your website form, think about the fields you require. Consider their order and whether every field of your form is strictly necessary for the context the user sees it.
In our scenario, the user will be signing up for an account with an online fashion retailer. Think about what is required from the user for them to become a registered user?
In our example, we will request their name, email address, password. That’s it! We do not require a date of birth or telephone number. This may be useful in some instances, but to sell clothes online we do not require any further information just yet.
2. Keep forms easy to read and well labelled
Ensuring a user can understand the form they are using is vital, a frustrated user will happily leave the site if they can’t accomplish what they need to in a reasonable amount of time.
Website forms should always have labels, always! They are visual indicators to the user, explaining what the input they are using is designed for. Labels are not the same as placeholders and should be treated differently. Consider if a user completes a form using autofill, the placeholder information is removed from view, the user is then unable to confirm the correct information is in the correct input.
Ensure your inputs are easily distinguishable from the background they are on and large enough to be tapped/clicked without difficulty.
3. Keep errors inline and to the point
If a user enters data incorrectly let them know immediately. Telling them they didn’t enter something in the correct way after they submit the form is likely to frustrate them. This seems like less of a big deal with a short form like our example, but grow that form to 10 inputs and the frustration for the user also grows with it.
Use concise wording in plain language the user can easily skim read and understand how to rectify their mistake. “Input empty” is not very descriptive, “E-mail is required” is a more detailed error message, which informs the user the input they need to correct.
Consider using icons in addition to your errors to link the input to the error.
4. Use placeholders to enrich your form
Sometimes a user may misunderstand exactly what is needed, placeholders can help users understand what is required before typing. An example may be if you are asking for the user’s date of birth and you would like the information as dd/mm/yyyy you could offer that information before the starts typing.
However tempting it is, placeholders should not be used as input labels.
5. Help mobile users with contextual inputs
Using the correct input type can help your mobile users massively. If we require an email address use the email input type. This means the keyboard displayed will provide easy access to the email-specific keyboard. Another example of this is a telephone, use the tel input type. This will display the phone number keyboard layout which is much easier to use when adding a telephone number to a form.
These small improvements can really help speed up a users form submission time. They set the expectation and limit the choices a user has to make.
Final thoughts
By applying everything from above you will have a clear and understandable form with good usability across devices, and a form that has understandable errors and pointers for the user to reduce chances of an error ever occurring.
Remembering to plan well and build on that is vital for each form. Every website form is a barrier to something, whether that is the newsletter, the purchase of a product, understanding when an item is back in stock. We have to ensure the forms we request our users to complete provide value, if they don’t we should question if they are needed at all.
Further Reading:
- Google has produced a fantastic overview of form text field usages and interactions, https://material.io/components/text-fields/
- The Baymard institute has also provided evidence based on their own research into inline error handling and the benefits of this.
- You can see more of our work with Baymard Institute here.
- If you are interested in how best practise dictates a form should be structured I would recommend checking out Mozilla developer article on just that, https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form
Our recent posts
Keep up to date with the latest news and insight from the team at Venditan
