Last updated:
24 June 2024

Labels

Labels should be used to accurately describe the content.

Care needs to be taken to avoid any uncertainty, especially the use of industry or developer/designer terminologies that may make sense to us, but not to the target end user. The language of the end user must be well understood.

Form labels should also indicate if the user is required to fill in the field before they can submit the form or perhaps provide additional assistance text, such as instructing users if there is a file upload limit. In this example, it may also be necessary to add an additional line of text explaining what they should do if they are unable to upload a file. For example, should they send it via email? If so, do they need to add a reference to the filename so you can match it to their form submission.

Location of the labels

Simple measures like placing the field label immediately above the start of the form field can, for example, increase the accessibility of a form for a user viewing the page with a magnifying tool as the label and form field are visible within the magnified portion.

Top aligned labels are typically faster and easier to fill out than left or right aligned labels. This is because top aligned labels require half as many visual fixations than left or right aligned labels. Top aligned labels also allow users to move down the form in one visual direction, instead of two visual directions with left and right aligned labels. This makes filling out forms quicker and easier.

The only drawback with top aligned labels is that they can make the form long. However, on the web, where users scroll often, this is often not a problem. In fact, by reducing the size of the labels and the whitespace between fields it is possible to decrease the form length. You can also break the form up into multiple pages to make each part of the form shorter.