My usability tips for creating a better form

Through the years I learned a lot about how to build these forms and to make them (more) user-friendly and let them work like the user expects.

In this article, I want to share some ideas on building a better form with some basic rules. By applying these simple strategies, you can make the form-filling process smoother and less frustrating for users. What are things to look out for? What should you do or not do? Let's dive in!

Use correct input validations

To prevent 'invalid' data we add validation to input fields. Make sure that every field has the correct validation checks. Make sure that the data the user enters in a field is valid for its purpose, and also fits in the database.

These are the types of validations I most commonly use for form elements:

• Required - the field must have a value.
• Min - a number or date should be equal or higher than a specific 'min' value.
• Max - a number or date should be equal or lower than a specific 'max' value.
• Min length - a text must have minimal a specific amount of characters.
• Max length - a text must have maximal a specific amount of characters.
• Email address - the text must have a valid email address format.
• Date range - there are 2 date fields and the second date must be equal or be later than the first date.

Show clear input validation error messages

The validation error message should be clear and easy for users to understand. For example, when a field fails a 'maximum length' validation check, instead of displaying a vague message like "The text is too long." use a more specific message such as "The maximum length of 20 characters has been exceeded.".

Show always the label next to the input field

I have seen forms where the label of an input-field is shown as a placeholder. When a placeholder is used as a label, it disappears on input. This creates confusion and hurts usability. Stick to visible labels so users always know what they're entering.

Clicking a label should set focus on input field

A <label /> tag should have a for attribute which contains the ID of the field the label describes. This attributes indicates the relationship between the label and the form element that the label belongs to. Clicking on that label will result in a focus on the related form element. It's behaviour that a lot of users expect, so try to support this.

Make required fields visible

Make it clear for the user which fields must have a value. You can do this by showing an asterix next to the field label. Another approach is to show a text like '(optional)' to only optional fields, which indicates that the other fields are required.

Make sure the user knows which fields must be have a value and which don't.

Show input validation error next to the field

I recommend to show input validation errors next to, or below, the field where it is about. After the user has entered an invalid value in a field, he/she directly sees which field contains an error.

Don't show all input validations as a summary list above the form, because it makes it for the user harder to find which fields have a incorrect value.

Show input validation errors only for dirty fields

I don't show any input validation errors when the user just opened a form page. I show validation errors next to a field after it has been touched (for example the user has entered/updated some data). Don't scare the user directly by showing all errors, like required fields that are empty. Filling in a form is not the most fun thing a user wants to do, so make it look easy as possible.

Don't disable the submit button

I have seen applications in which the the submit button is disabled when the form has validation errors. The problem I have with that is that it makes the user gues why the form could not be submitted. Maybe not all required fields have a value? But which one? The user has to scan the whole form and look out for any field that probably is missing a value.

I recommend the following approach. Show the submit button always enabled. When the user clicks on the button, and the form has invalid value(s), mark all fields as touched/dirty and show the validation errors next to the input fields that are invalid.

Use a logical focus order for form elements

When you design the layout of all the form fields, pay attention to the tab order. A lot of users fill in a form by tabbing through the form fields and therefore the 'next' field that gets a focus should be the field that the user expects to get the focus. It can be very annoying that the form behaves different than the user expects and this can increase the change that the user enters a value in a wrong field.

Most forms will look different on smaller screens than on wider screens. For example on a smaller screens fields are shown above each other and on wider screens next to each other. Take this in account when you design a form (HTML structure).

Show a loading indicator when submitting data

When the users submits a form, an action gets performed. A lot of times the application makes an API call and creates or updates an entity. While the application is doing that call and is waiting for the response, show the user a loading-indicator. Let the user know that there is something happening. Don't make the user gues if he/she pressed the button correctly.

Make sure that the user cannot submit the form again, when the submit action is being performed, because this can give really nasty results, based on the API calls and the logic behind it.

Show validation status indicator in tabs

When the users fills in a large form in which fields are grouped by tabs, show in each tab a small 'validation error' indicator for when any of its fields are invalid. This makes it for the user easier to identify which fields are incorrect.

Personally I don't show the indicator right away. I make it visible only after the user has touched any of the fields in a tab, or when the users submitted the form.

Keep modal open while an action is being performed

In some situations I had to create a modal, with sometimes a form. In the modal the user had to make a choice by clicking a (submit) button. After the user confirms, an action got triggered and most of the times this resulted in an API call that was done by the application. It it possible that the API returned with an error. And in some scenario's the error can be 'fixed' by the user by updating some fields in the modal.

It can be very frustating when the modal has been closed, and the error (returned from the API) pops up. The user cannot resolve the error, because the modal is already closed. Allow the user to change something in the modal and let the user perform that action again. So, don't close the modal before the triggered action was successful.

Summary

So, let's summarize the information. These are my rules I follow when creating a form so it makes the experience for the user better.

• Use the correct validations for inputs.
• Show clear and understandable input validation error messages.
• Keep input labels visible at all times.
• Clicking on a label should focus on the related input element.
• Make it obvious for the user which fields are required.
• Show input validation error next to the input element where it belongs to.
• Don't show all validation errors for non-dirty input fields.
• Don't disable submit button when form is (still) invalid.
• Make sure the focus order of form elements is logical on all screen sizes.
• Show a loading indicator when user submitted the form.
• Show 'invalid' indicator in tabs.
• When using a modal (with or without form), close it only when the action is completed succesfully.