Forms are a very important part of the page. In general, a form on a web page allows your user to enter data that is sent to a server for processing, for instance to contact, register, provide shipping or credit card data etc. Usually, it consists of a combination of interaction elements like input text fields, selection fields, radio buttons and checkboxes.
Tips to improve forms usability
If you don’t want to annoy your users filling in a form on your website, you should clearly mark the required fields, validate the input values as soon as possible, highlight problems and explain what was wrong. How can you achieve that?
Use client validation on top of the server validation. Thanks to that, the user will be informed while filling in the form that something is wrong. When something is indeed wrong - clearly show where and what is the problem by highlighting this field or label and adding a meaningful explanation.
To reduce the number of mistakes, explain what type of data is required. You can add formatting examples or even use a mask.
Consistency. Keep all fields’ labels at the same place (all above, or all left, closely to the field), so the user is sure where to provide the data. Keep the same placement and coloring of cancel and submit buttons through the site. Make sure that a submit button is easily distinguishable. You don’t want users to miss-click cancel/submit buttons.
Group the elements in a logical way. If you are asking for contact details, ask for all the data in the same block of input fields.
Allow your users to navigate using only their keyboard, not every user prefers to use his mouse to jump around fields.
Moreover, it simply might be faster to use the keyboard navigation while filling in data. Make sure that using the TAB button will allow them to fill in data in a logical order and the ENTER button will allow them to submit the form.
Prevent doing things by an accident.
The user tries to close his browser or clicks on the back button while having entered but not submitted data? Let him know what is going to happen and ask for a confirmation.
How long does it take to submit your form? Consider disabling the submit button to prevent multi-clicking and multi-submitting your form.
Finally, when the user filled everything in correctly and submitted the data – confirm that. Make sure that user knows that the process ended up successfully. There are several ways to do that. It can be a a summary page, a pop-up window etc.
Are you thinking about having your own website? In this serie of guidelines we will give you an overview of all the essentials when setting up a new website.
Read also: our usability guidelines about standard websites elements and navigation