Web Form Usability Part 2: Form Labels
So maybe you’ve read our recent article on HTML input types and have got your input boxes ready. The next question is where to put the form labels.
There are four common places to put form labels:
- Above the field
- Right aligned labels (to the left of the field)
- Left aligned labels (to the left of the field)
- Inside the field (placeholder text)
Whatever layout you choose, use it for all the forms on your website, and try to keep the labels a similar size. Let’s take a deeper look at each placement.
1. Above the field
An example of form labels placed above the fields is eBay.
How are labels above fields processed by the user?
In this configuration, users look straight at the input fields rather than on the labels, showing that users can focus on both the input field and the label in one eye movement; so users are able to complete forms with labels above the inputs very quickly.
When should you use labels placed above the fields?
- Forms with labels above the fields are really quick to complete which is good for all types of form
- It’s good if you’re lacking horizontal space (e.g. in a sidebar)
- It’s not ideal if you have a very long form because the labels above will make it doubly long
2. Right-aligned labels
Amazon are an example of a web form that uses right aligned labels.
How are right-aligned labels above fields processed by the user?
The labels are easily related to the input fields by the users in this set up. It’s harder for users to scan the labels that when left aligning, but users are twice as fast at completing this kind of form compared with left aligned labels.
When should you use right-aligned labels?
- Right-aligned labels are a useful alternative to labels above if you don’t have much vertical space (or if it’s a long form)
3. Left-aligned labels
An example of left-aligned form labels is Yahoo.
How are left-aligned labels processed by the user?
When placing the labels on the left, users have to move down the form left and down (compared with just down on labels place at the top).
When left aligning labels to the left of the input fields, users can tell less easily that the labels are connected with the relevant input fields. The space between the labels and the input fields means that users take more time to read the form, but the labels are easier to scan.
It takes 10 times the amount of time to process than putting the labels above (or course, we’re talking in milliseconds).
This is the most popular format used on the web.
When should you use left-aligned labels?
- It potentially is more pleasing to the eye than right-aligned labels (but that’s up to personal preference)
- It’s slowest layout to complete
- It can be useful for very long forms as it’s easier to scan the labels
4. Labels inside the field (placeholder text)
How are labels inside field processed by the user?
Obviously, if the label is placed inside the field, users can see both the input field and the label at the same time, making it quick to read. However, this type of layout can be very confusing. When you start writing, the label disappears; and if you forget what the question you are answering is you have to delete your information and hope to see the label again. It’s hard to scan which boxes you’ve filled in because there’s text in all of them, and there is no way to go back and check your answers at the end.
When should you use labels in fields?
- HTML5 introduced placeholder text which puts text in the input box itself:
<input type="text" placeholder="This text will go in the box." />. However, it has poor browser compatibility, so many sites use Javascript to ensure it works on old browsers. The placeholder attribute is supported in the latest version of all major browsers, except Internet Explorer (according to the world wide web consortium). - There is no way to go back and check your answers, which is a pain on long forms. If using placeholder text only use it on short, structured forms.
- You should style the placeholder text to make it obvious that they’re placeholders not actual answers – grey it out, italicize, make it smaller etc
- You can use it if you’re really pushed for space.
- It can be use in conjunction with other layouts to add more information
Making placeholder text work better
Apple try to improve usability of placeholder text by making sure it remains there until you start typing.
As you can see here, I have clicked in the box, but I can still read the placeholder text, “Street Address”.
However, when I start typing the placeholder text disappears.
Using placeholder text with other methods
Using placeholder text with labels can be very helpful. For example, Microsoft use labels above the field, however they also use placeholder text to indicate the First Name and Surname input boxes. When you click in the name box, it’s still easy to tell what you’re supposed to be filling in, and when checking back through the label still says name, reducing confusion.
Final Thoughts
Keep the user in mind at all times when choosing where to put your labels. Labels above the fields are the best option, with fastest completion times (by far) and easy scanning without the disappearing text problem that occurs when using placeholder text; but consider one of the other methods if it better suits your needs.
What’s your preference for label placement when designing forms?
Get more great online marketing training and cutting edge information in our Digital Marketing Training Ground.
