Best Practices and Usability for Online Forms

The design principle of proximity states that related elements should be placed close to each other. This Nielson Norman Group article about form design and white space explains that when a label is placed close to the corresponding input field, the eye can easily recognise which label belongs to which input field.

The label should always be placed outside an input field so that users do not lose the context when answering an input field. For mobile and smaller forms, the label should be placed above the input field; for long desktop forms, it should be placed next to it.

Avoid capital letters in labels. They are harder to read and so make it harder to complete the form.

The name of a label should be clearly understandable and in simple language to make the form easily accessible and to avoid mistakes. Labels should explain at first glance what information is needed. If technical terms are unavoidable, always include explanatory text to help.

Labels themselves do not serve as explanatory or help texts. They should always be kept concise and short with one or two words so that the form can be grasped quickly and easily.

Placeholders should never be used instead of a label, because the context is lost for the user when filling in the input field. Placeholders in some cases are a supportive way to provide further explanations or hints. However, this additional support disappears when the data is entered. If the user forgets the hint while entering the data, they are forced to delete the entry in order to see the information again. Nielsen Norman Group explains more in the article Placeholders in Form Fields Are Harmful.

A hint text, like the label, should be placed in close proximity to the associated input field. This text is used to explain specific terms or why certain information is needed. Likewise, expected formatting for an input field can be displayed or explained in more detail.

Input masks are not just placeholders, but format the data provided by the user to a desired format. Brackets, spaces, and hyphens are automatically displayed in the input field when a phone number is entered, for example. Masked input not only prevents errors caused by incorrect formatting, but also makes it easier for users to verify the data they have entered.

Creative or innovative ideas in the design of input fields can lead to a negative user experience if users no longer know or understand that they can interact with the field. Therefore, input fields should be recognizable as such and look as users would expect.

The first field of a form should be automatically highlighted when the user wants to fill in the form. This not only gives them a clue on where to start, but also saves them from typing or clicking. The focused field should be visually highlighted so that users can immediately see where they are.

If e-mail address or password fields are used in a form, refrain from making users repeat the input. The purpose of entering the data twice is to ensure that the data has been entered correctly. However, users often copy and paste the same content into the corresponding field. If this function is blocked, however, the risk is slightly increased that users will make one or more mistakes and, in the case of a password, not even see the error. It is better to give the possibility to display the password, for example. Unmasking the password and PIN helps to avoid logon errors.

Input fields should reflect the expected content in their size. While an input field for an e-mail address, for example, can contain 40 characters, a postal code requires just five. Users perceive the size of an input field as an indication of the amount of text they need.

Input fields such as name, phone number, or date of birth should not be divided into multiple input fields. Subdividing them forces users to type or click extra times to move to the next field and may also require more precise validation, which can have a negative impact on the form process. The better solution is to show the formatting guidelines using placeholders, help texts or masks.

For mobile users, the appropriate keyboards should be made available or the input field should be provided with the appropriate input type. This prevents them from having to perform additional actions. For example, show the number keypad for phone number fields.

A dropdown hides the choices and requires two clicks to select the desired option. Use a dropdown element only when the selection offers more than five options or when space is too limited, and include a search option when the selection significantly exceeds 20 items. Otherwise, provide the options as radio or check boxes so that only a single tap or click is required.

Avoid unclear prompts such as “Submit” or “Request”. The label of a button should always explain what the button does or what users will achieve by filling out the form. One way to describe the action is to end the sentence with “I want to…”. For example, if users want to create a customer account, the wording of the call to action could be “Create my customer account”.

If possible, secondary buttons should be avoided. However, if the form contains more than one button, each button should be visually weighted differently. The primary button should be more prominent than the secondary. Likewise, there should be enough spacing between each button so that the wrong button is not clicked accidentally.

Single-column forms are processed more easily from a cognitive point of view because multiple columns interrupt the vertical flow of the downward movement of the form. With multiple columns, the eyes zigzag back and forth, which significantly slows down the process and perception. Exceptions here are short and logically related input fields, such as city, state, and zip code, or date and time, which can be displayed in the same line.

The design principle of proximity is not only used for the label to the input field, but also for input fields that logically belong to each other. More complex forms in particular should have a visual separation or section headings that divide input fields into semantic groups.

Especially for mobile devices, attention should be paid to the minimum size of input fields and buttons, as too small/narrow elements can make operation more difficult and unnecessarily frustrate users . The area to be selected for touch should be at least 48x48px and for click 46x46px. Furthermore, click and touch areas should have at least 8px distance to each other.

Predefined input values can be used to minimize the effort of filling out a form. However, predefined input values only make sense if you can be sure that more than 95% of the users would choose this value—especially if this value is needed. Users usually skip pre-filled input fields and do not check their value anymore.

Generally, the majority of input fields in a form are mandatory. Therefore, only the input fields that are actually optional should be marked with “Optional”. Since the general rule is to ask only for necessary information, the number of optional input fields should be close to zero or limited to one or two.

Users should always be clearly informed about the total number of steps in the form, which step they are currently in, which steps are still ahead of them, and which steps have already been completed. Particularly in the case of more complex forms, the uncertainty of the process status can lead to users abandoning the process prematurely.