Usability Of Forms

{ ☑ } – How to Align Labels With Fields?

Forms are one of the most important components of any Digital Design. Designing a Form seems straightforward and easy, but it takes some time and science to master it. Among various factors of effective form design, today we’ll discuss how to align labels with respect to their input fields.

Though aligning text seems like a small design decision, it has a direct impact on the usability of the entire form. Let’s look at 3 possibilities:

  • Inline Label — { Aligned to the Left }
  • Inline Label — { Aligned to the Right }
  • Label — { Aligned to the Top }

Let’s try to understand the pros and cons of positioning a label at each of these 3 scenarios:

1. Inline Label — { Aligned to the Left }

When we align labels to the left, inconsistent spacing appears between the label and the input, across different input fields. The white space is not a problem, the excessive visual distance between the label and the input fields is.

Because of this, the form unnecessarily demands more time and attention from the user, thereby resulting in slower form completion rates. Also, labels aligned to the left take more horizontal space on the page; not so good option for small screen designs.

Inconsistent space on the right

Looking on the bright side, we can use this aspect to slow down the users purposefully. It might be useful when filling in important data like medical claim forms, passport applications or vehicle registrations, etc. There are other ways to accomplish that, but this is how we can make use of labels to help. Also, if the form is long, then aligning labels inline helps reduce the vertical height of the form.

2. Inline Label — { Aligned to the Right }

When we align labels to the right, the visual distance between the labels and their respective fields is consistent across the form. This creates stronger association because objects placed close to each other seem related (Law of Proximity from Gestalt psychology.)

But, right-aligned labels run a risk of inconsistent space on the left-hand side. Also, there is no hard left edge in the form. This generally creates some discomfort and makes visual scanning of the fields a bit difficult. Eventually, that results in slower completion of long forms.

Lacking hard left edge

As we see, in some cases right-aligned labels show improved usability as compared to left-aligned labels. So if you have to choose to align a label inline, consider going for right-aligned labels.

3. Label — { Aligned to the Top }

Besides being aesthetically better looking, there are many other benefits of keeping the label above the field.

Labels aligned to the top have least visual distance between the label and the input fields. So from a cognitive point of view, the association is powerful, and the response is faster since users comparatively spend less time mapping labels with the fields.

Also, the eyes move only in one direction since the scanning is top down as compared to Z shape (left-right and top-bottom) for inline labels.

Design is space efficient and hence adaptable to all resolutions; in short, responsive in nature. We only need to take care of the input field width. We also get flexibility regarding the length of labels. This proves useful while working with variable label lengths like multilingual support for applications.

Easily adaptable to different screen resolutions

We designers can make use of the extra space on the right to provide some helpful information.

Assistive actions on the right of labels

One drawback of this approach is the increased height of the form. However, it can be solved with alternate designs like a grouping of fields or stepper forms or even wizards if applicable. In all other cases, aligning labels on top works best.

Placeholder Text

Placeholder text is not quite the same as an input field label, but let us shortly discuss how this works.

This practice is very space efficient, and also looks great in digital products designs.

But, there is a problem. Once the user enters a value, placeholder text disappears, and so the user may get lost while filling up the form. Also, good visual treatment is very essential to avoid confusing placeholder text with the entered information.

However, that problem is easy to solve. A simple floating label on input enables users to check the data they are filling.

Again, when implementing this, it is important to pay attention to the spacing between consecutive input fields to avoid confusion and create a stronger association between labels and input fields.

Conclusion

Positioning and aligning labels is one of many aspects of effective form design. There is really no hard and fast rule for aligning labels while designing forms, but as we’ve seen, simple things like alignment play a huge role.

There is such a great difference we designers can make just by understanding the context we are designing for.

Follow Pratik: BehanceInstagramMedium.


If you want to contribute to next the issue of Phase Magazine, just drop us a line:

Pratik Hedge Avatar

Pratik Hedge / Senior UX Designer @ CitiusTech

User Experience designer of Indian origin, Pratik Hegde is based in Mumbai. Frequently contributes to the design community through his articles and video tutorials. Loves 🍕 and 🥤

www.pratikhegde.net