Online Form Labels: Left, Right or Top Aligned?
Posted by Gul Khan in Measurement on September 13th, 2008
In the past, as a general rule, I have always suggested that the form labels be right aligned. There were 2 main reasons for this recommendation:
- We noticed that, with the left-aligned labels, some of the users ended up entering the data in the wrong input field (e.g. the input field one line below) due to the long distance between the label and the input field.
- From what we observed, forms with right-align labels were perceived to be visually less cluttered (this was great for forms that would only be used once or very infrequently).
However, recently I have come across some excellent work done by Luke Wroblewski and Matteo Penzo that took my understanding of label alignment to another level. Here’s a summary of what they have reported:
LEFT-ALIGNED LABELS
- Easy to scan through the labels. This is especially useful if the form is long and it is likely to be filled by users unfamiliar with the form (they are more likely to scan through the form to determine what information is required of them).
- Long forms, with many optional input fields, can possibly benefit from left-aligned labels, because users can easily scan what is required to be filled.
- Requires less vertical space.
- Slowest completion rates (this may or may not be a bad thing…it really depends on your objectives).
- Poor association (i.e. long distance) between the label and its corresponding field. This can result in data entry errors. The effect is worsened when some labels are very long.
- Not flexible enough to deal with large changes in label lengths.
RIGHT-ALIGNED LABELS
- Good association between the label and the corresponding field. Among other things, the short distance tends to result in reduced number of data entry errors.
- Requires less vertical space.
- Fast completion times (but still slower than top aligned forms).
- Reduced readability of labels, especially with long forms. This becomes an issue for new users who are unfamiliar with the form. The left rag of the text makes it difficult to scan though the labels to find out what is required of them to complete the form. However, short forms like the one on Facebook, are unlikely to suffer from this problem. Yahoo also shows how to overcome this problem by breaking up the form into clear sections.
- Not flexible enough to deal with large changes in label lengths.
TOP ALIGNED LABELS
- Fastest completion times (because users could capture both the label and the input field with a single eye movement).
- Works well when people are familiar with the data being collected.
- Good for localization. Works well if the form is being translated simply because of the space it allows for variations in label lengths (e.g. German and French words can be twice as long as English).
- Requires the most vertical space.
- Requires sufficient spacing in-between lines.
Which is the best format? Well, that depends on the context.
- How familiar are your users with the form or the individual labels?
- Is the form going to be used frequently? If ‘yes’ then efficiency becomes an important factor. In that case, a top-aligned form could be the way to go. If it is a registration form, which your users will probably only fill in once, then you could consider left-aligned labels (if it is a long form) but personally, I feel a better option would be to use right-aligned labels and break it up into very visually clear sections.
- If localization is an issue and you need to translate the form into many different languages, then top aligned labels gives you the most flexibility.
- Have you got vertical space limitations? Then you may want to avoid top aligned forms.
The best advice I can give is to understand your context and weigh your options. The points above will give a sense of what will work. Use the information to try out different designs. The next step would be to test out different design version by conducting AB Split Testing, Multivariate Testing or Taguchi Testing methods. Of course there are many other testing methods out there. In my opinion, however, these tests are simplest to execute. It is always a good idea to get actual usage data to back up your design ideas. Many times, the results can surprise and give you new insights about what design works best for your users.
