Why might right aligned field labels be better?

  • For the longest time, I've used left-aligned labels in my forms, like this:

    Left Aligned Labels

    I did this because I thought having the labels left aligned made it easier for readers to scan the list of labels.

    However, I found my axiom challenged recently while watching the video of Billy Hollis' talk from NDC 2011, in which Billy asserts that right-aligned labels are simply better, like this:

    Right Aligned Labels

    I've done a bunch of research and found a lot of discussion, including this UX question, which compares and contrasts the approaches, but nothing definitive.

    In particular, I haven't been able to find anything to indicate why Billy Hollis changed his opinion from left- to right- alignment for labels (apparently he switched around 2007).

    I figure Billy's too smart to have made the change without evidence - so I'm interested in seeing that evidence for myself.

    The short answer is that people don't scan the list of labels, so any win from having them left-aligned is lost. People look at one label, then enter text, then look at the next label.

    Also worth considering mobile when designing forms for the web http://www.uxbooth.com/blog/mobile-form-design-strategies/ Hope that helps :)

    I remember a (German) conference poster where this question was studied empirically: Patrick Fischer, Theo Held, Martin Schrepp, Bettina Laugwitz: Wahrgenommene Ästhetik, Ordnung und Komplexität von Formularen. Mensch & Computer 2006: 441-443

    @AlexFeinman that might be true for typical contact/order form but there are also admin areas where you typically read labels because you want to update only one exact field (like when you're on the phone with the customer and you need to quickly find & change something)

  • Rahul

    Rahul Correct answer

    10 years ago

    Luke Wroblewski wrote about this in Top, Right or Left Aligned Form Labels (April, 2007).

    In it, he references eyetracking data from an article by Matteo Penzo called Label Placement in Forms (July, 2006). Matteo drew several conclusions from this study, including that right-aligned labels have a lighter cognitive workload for users:

    Alignment of labels—In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.

    It's possible Billy saw Luke's article and changed his stance based on it.

    In Luke's latest book "Web Form Design" (chapter 4) he says top-aligned is the fastest, right-aligned is second fastest and a good choice if vertical space is an issue, and left-aligned is slowest but a good choice if you want people to read the labels carefully.

    in the web it's generally horizontal space that is scarce rather than vertical since most people expect to be able to scroll vertically, rather than horizontally. In small mobile screen this become even more pronounced. I almost always top-align unless there is a reason to do otherwise.

    If you're placing the labels on top of the text fields, consider adding substantial vertical space above the label, to group the label together with what it's labeling, and to avoid the confusion as to whether the label applies to the text field below or the one above. It almost always applies to the one below, but I believe it's a bad idea to make the user stop to think about that, even for a fraction of a second.

    I'd love to hear how is this related to ERP & CRM systems where people are watching the same interface all over the day - my guess is that left-aligned labels will be better for "update one field in this big form" types of tasks

    The study doesn't mention how many participants there are, was probably composes of a non-representative group of users, only tested a single form with just four fields, and most importantly: is only a single "ad-hoc" (their words) study. I would be *very* careful in drawing conclusions from this (in fact, the *only* serious conclusion one can draw from such a study is that more study is needed).

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM