Form Label Proximity: Right Aligned is Easier to Scan

by 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 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.

14 Responses to “Form Label Proximity: Right Aligned is Easier to Scan”

  1. Avangelist

    Mar 20th, 2012

    I can’t agree. The rag of right aligned content is harder for the eye to scan because we travel left to right and top to bottom on the lead letter or word. Your example is not easier to scan by any stretch, it would push emphasis onto the input fields however which may be the desired goal.

    There has never been a sure way of aligning labels to fields and it does ultimately come down to label length and the context in which the form is being presented.

  2. Rob Goris

    Mar 20th, 2012

    Anthony, nice one. Just in addition to this: For admin/confiig/setup forms it is normally better to use left-aligned labels. This is – as you briefly mentioned – because it is easier to scan the labels. In these kind of forms users typically do not have to fill out many (if any) fields but need to quickly find a attribute+value. An example is most forms in Google account settings.

    Luke W once did a nice write-up on label alignment http://www.lukew.com/ff/entry.asp?1502

  3. Rian

    Mar 21st, 2012

    I thought we all agreed that top-aligned labels are preferred?

    http://uxmovement.com/forms/another-case-for-using-top-aligned-form-labels/ and the articles you reference in the first paragraph…

    • anthony

      Mar 22nd, 2012

      We can talk about how great top aligned labels are all day, but at the end of the day there will always be some people who choose to use side aligned labels. So if they’re going to use side aligned labels anyway we mind as well show them the right way to do it.

  4. TB

    Mar 21st, 2012

    In observing myself, I find the left aligned labels are easier to scan, but it requires more work to see which label belongs to which field, while the right aligned labels are harder to scan but proximity helps connecting the labels to their fields. It’s really all about the Gestalt laws.

    My guess, without data, is that the most important thing is to try to write the labels so they’re about the same (short) length. Avoid really long labels, because no one is going to read them anyway. If they’re all short, you should be able to left align them to make them easier to scan, without big proximity issues. If you absolutely must have one or two longer labels, maybe let them wrap.

  5. Nathanael Boehm

    Mar 21st, 2012

    IT DEPENDS! It depends on the size of your form, layout, length of labels, design of the surrounding screen and a million other factors. Sometimes left-aligned is best because right-aligned looks messy, sometimes right-aligned works better for the reasons you outlined, sometimes above, inside … it depends. Can’t make a hard and fast rule out of this.

  6. Joe Lippeatt

    Mar 21st, 2012

    If a label has more than one or two words, it needs to be revised for brevity; this makes the left-right argument moot. If additional information is required, it can be provided above/below the field itself where the user’s eyes are floating while filling out the form.

    For myopic and vision impairments, a significant distance between the left margin and first letter of a word can actually appear as a blank section in the document, making it easy to miss important data. When looking for a specific bit of info, having to “bounce around” to find data is very slowing.

    If the primary actor is a L-t-R reader, and the application is written in L-t-R language, formatting to right-align is counter to readability (see other links posted in other replies).

  7. Marius B.

    Mar 22nd, 2012

    Proper use of HTML can also strengthen the connection between a label and its field: we have the for attribute for that…

    To quote good old w3schools:
    The element […] provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control.
    The for attribute of the tag should be equal to the id attribute of the related element to bind them together.

  8. Arron Hunt

    Mar 31st, 2012

    Don’t most people read it like this??

    http://f.cl.ly/items/123U0M3K0l1r2r0G1y0K/this.png

  9. Chris

    Apr 5th, 2012

    Sounds legit, but corresponding data or a study would be a great benefit to your argument

    • Eric Mobley

      Apr 17th, 2012

      The form on top would benefit from the spacing between label and form field to be tightened up. Unsure how to feel about this advice though without some corresponding data.

  10. Anniiket

    May 25th, 2012

    Ragged edges caused by right align labels also disturb the grid layout.. causing the form to look confusing.

    When aligned left, it creates white space between the label and fields, but this space can be minimized by simply setting the width of the column.

  11. Bryan Livingston

    Mar 6th, 2014

    I’d recommend removing the colons from the labels since they tend to just be visual noise.

Leave a Comment