Making your pages easy and enjoyable for your visitors to use is a key aspect of web design. Many studies have been carried out over the years on various aspects of usability and the findings are valuable in helping us improve our work.

Over the next few weeks I will be giving you a series of usability guidelines that may help you improve the user experience on your websites.

Part 1: Form labels should be placed above the field

Using eyetracking to evaluate the usability of search forms, a study by UX Matters has found that the ideal position for form labels is above the fields. In a test where users were asked to complete a series of forms, gaze-path recordings were completed to reveal the following findings.

Test 1: Left-Aligned Labels to the Left of Input Fields
The first test performed was on the most commonly used method on the web: left-aligned labels that sit to the left of the field. Left-aligning makes the form scannable but disconnects the labels from the fields, making it difficult to see which label applies to which field and forces users to take more time to interact visually with the form.

Test 2: Right-Aligned Labels to the Left of Input Fields
In the second test, labels were placed in the same position (to the left of the field) but this time right-aligned.  Right-aligning connects the labels to the fields making it much easier to see which labels apply to each field. Although the form becomes far less scannable, form completion times were cut nearly in half.

Test 3: Left-Aligned Labels above Input Fields
The final test had labels placed above the input fields. It is obvious that a label that is placed nearer to its input field will enable the user to move more quickly from the label to the field. Placing a label right over its input field permitted users to capture both elements with a single eye movement  and the eyetracking data shows that most of the fixations were right on the input fields rather than on the labels.

Conclusion

Because forms are generally vertically oriented; i.e. users fill the form from top to bottom, labels to the left of the field are not the easiest to use. Users scan the form downwards as they go along, and following the label to the field below is easier than finding the field to the right of the label.

A label placed above an input field will work better in most cases, as users aren’t forced to look separately at the label and the input field. If you do choose to place them to the left of input fields, at least make them right aligned!