Tuesday, January 17th, 2006
Why you should right align form labels?
Category: Usability
Swapnonil makes the case that we should always right align by showing us the movement of users’ eyes.
You probably already knew the comparison between:
Left Aligned
X*N + ((N-1)*(SQRT of( X^2 + Y^2))
Right Aligned
(X/2)*N + ((N-1)*(SQRT of( (X/2)^2 + Y^2))
which concludes:
By my rough calculations total amount of eye movement in this case, for the “Right Aligned Form” is roughly 3/4th than that of the “Left Aligned Form”.
Or this could be totally wrong :)
I have to admit to prefering left align style.
Related Content:
3.7 rating from 21 votes
All of the HCI research and GUI guidelines I’ve seen recommend fixed width, left aligned field labels for ease of reading and scanning; top alignment for special cases or when I18N is important (since labels can be very long in some other languages). I’m not familiar enough with the literature to make a definitive argument about eye strain, but it’s obviously much easier to locate a particular label when they’re all left aligned versus right aligned.
I would have thought that the best way to reduce eye strain would be to have this kind of arrangement.
Label
|___________________|
Label
|___________________|
That way your eye hardly has to move, it flows straight downwards rather than darting back and forth.
It might just be me, and I’m not saying that I do this exclusively, but if the aim is restrict the amount the user’s eyes have to move while filling out a form then surely this is the best way.
This might make sense in terms of minimal eye movement, but don’t forget there is also the aesthetic aspect of the page. I doubt a user would really recognize the 25% eye movement reduction, in the meantime, he sure would notice the lesser “neat” overall looking – at least in all left-to-right languages, people tend to like left aligned labels better. Just my 2 cents.
[...] ä¸?过也有人对æ¤æŒ?ä¸?å?Œæ„?è§?，认为左对é½?æ–¹å¼?更好。 All of the HCI research and GUI guidelines I’ve seen recommend fixed width, left aligned field labels for ease of reading and scanning; top alignment for special cases or when I18N is important (since labels can be very long in some other languages). I’m not familiar enough with the literature to make a definitive argument about eye strain, but it’s obviously much easier to locate a particular label when they’re all left aligned versus right aligned. [...]
It’s very clear that this is the best way, the professional way.
Just take a look at Yahoo! registration and you’ll see. It’s not a coincidence.
The right-align rationale is nonsense.
Eye motion is never smooth (unless tracking an object). It jumps. The difference in distance is irrelevant. What is important is the predictability and easy of identification of the target point.
Scanning up and down labels, obviously, it is much easier if the list is correctly aligned. Even with the focus of attention on the data entry field, it’s easier to see where you are on the form by how close the end of the label is – much more difficult if the label is right aligned.
I think it’s funny that someone would write an article about eye strain in 12px Arial.
[...] http://ajaxian.com/archives/why-you-should-right-align-form-labels [...]
[...] ä¸?过也有人对æ¤æŒ?ä¸?å?Œæ„?è§?，认为左对é½?æ–¹å¼?更好。 All of the HCI research and GUI guidelines I’ve seen recommend fixed width, left aligned field labels for ease of reading and scanning; top alignment for special cases or when I18N is important (since labels can be very long in some other languages). I’m not familiar enough with the literature to make a definitive argument about eye strain, but it’s obviously much easier to locate a particular label when they’re all left aligned versus right aligned. [...]
“I would have thought that the best way to reduce eye strain would be to have this kind of arrangement.
Label
|___________________|
Label
|___________________|
”
You are very correct. The only thing this is that, for forms in Desktop Applications such an arrangment looks, well, a bit odd. For web pages top to bottom layout is absolutely fantastic. I plan to cover this topic of top to bottom layout some other day. Thanks for the comment though.