by anthony on 03/20/12 at 5:02 pm
Label alignment on forms is a serious issue. How you place labels next to fields can affect how users fill out your form. There are only three ways you can align labels to fields. You can put them inside, on top or to the side of your fields. Putting labels inside or on top of fields is easiest for users to scan. But there are still many who put labels to the side of the fields on forms. When putting labels to the side of the fields, there are two different ways to do it. One of these ways slows users down and makes scanning difficult. Designers should avoid left aligning labels to fields and right align them instead. This brings the label closer to the field to make scanning the form faster and easier.
Labels left aligned to fields often create large white space between the label and field. This creates longer eye movements for users when they’re scanning, and slows down their form filling process. Far form label proximity can cause users to rescan labels more than once to make sure they’re filling in the field that matches the label. Because the link between a label and its field is not as clear, users can end up unsure whether they’ve filled in the right field. This causes users to do more work than they should.
Labels right aligned to fields are easier for users to scan because there isn’t large whitespace between the label and field. The close proximity helps users clearly see which label goes to which field making the link between a label and field clearer. Users can fill out the form with speed and ease without second guessing themselves. The eye movements here are not only shorter, but users won’t need to rescan a label to see which field it belongs to.
Many designers left align labels to fields because they think aligning the labels with a straight left edge makes reading the labels easier. It might make reading the labels easier, but it makes filling out the form harder and that’s what matters most. Users need to know which label goes to which field and closer form label proximity makes this clear.
Top aligned and inside field labels are ideal for forms because they’re easier to scan than side labels. But there are times when you might need to use side labels. When you do need them, make sure you right align your labels to your fields. Right aligned isn’t just one option out of the two to go with. It is the only option to go with if you want to make it easy for users to scan and fill out your form.