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.
Book
Affiliate
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.
you’re dumb… and probably aren’t a designer
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
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…
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.
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.
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.
Totally agree. Context is key factor to determinate a good usability solution. I like forms like this:
https://twitter.com/#!/antescobar/status/191106703603937280/photo/1
Users first read the label and next have the form.
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).
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.
Don’t most people read it like this??
http://f.cl.ly/items/123U0M3K0l1r2r0G1y0K/this.png
Sounds legit, but corresponding data or a study would be a great benefit to your argument
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.
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.
I’d recommend removing the colons from the labels since they tend to just be visual noise.
One note about your scanning ‘dot’ example. The user doesn’t jump to the middle or end of the label as shown with your dots. The will want to read the full label. So, for a left aligned label set, the user’s eye will always know where to go (far left) to read the label. For a center aligned set, the user’s eyes has to first ‘find’ the beginning of the label in a jumbled mess of labels.
Left aligned is the way to go.
Also, I’m a firm believer that colons are not ‘visual noise’. They clearly reinforce that the text is a Label vs just informational text. (I’ve seen a lot of usability tests over the last 25 years).
You don’t need to be a UX expert to realize how sh*t this “solution” is. Yes there is better proximity of the label to the field so the user cognitively groups them them faster, but this is at a very high cost. Just about everything else is worse. Perhaps it would have been better to suggest a solution that is actually good and not simply an improvement of an isolated element.
This is exactly the opposite of what eye-tracking research shows, so it is apparently based on a personal opinion, with no supporting data. Research shows that users don’t generally scan the form labels when initially filling the form — they generally tab between the fields and glance only at the label for the field that has the focus. Users scan the field names when EDITING existing values in a form, and research shows that in most cases, they scan the VALUES in the form fields, not the labels — only when it is unclear what a value represents do they then glance at the label.
NEVER follow UX advice that isn’t based on research, which is what this article is.
1) There have been many research proving that the labels should be left aligned. They are old and well tested and proven.
2) New research that say labels should be right aligned are not yet properly tested hence not properly proven.
OK. Forget about research. Let’s use some common sense.
1) Jagged edges on the left (when you right align labels) reduce reading efficiency.
2) It’s even harder for a user click on check boxes if the labels are right aligned. It increases cognitive load and motor activity.
3) Jagged edge on the left breaks the ‘grid layout’, making it even harder to scan the interface. (People who don’t know that users do not read but scan, leave now)
4) It’s hard to maintain consistency within the same form when you have right aligned labels.
5) Left aligned labels give us a solution on all the points above. The only question remains is about proximity between the label and the input field. The answer is simple. Don’t use long labels. Limit your labels to 20 or 25 characters max and put the input field right next to it.