Tuesday, January 17th, 2006

Why you should right align form labels?

Category: Usability

Swapnonil Mukherjee has written a usability piece that delves into why you should right align form labels.

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.

Posted by Dion Almaer at 2:42 pm
10 Comments

+++--
3.5 rating from 26 votes

10 Comments »

Comments feed TrackBack URI

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.

Comment by dak — January 17, 2006

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.

Comment by Jonic — January 17, 2006

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.

Comment by Jing Xue — January 17, 2006

[…] ä¸?过也有人对此æŒ?ä¸?å?Œæ„?è§?,认为左对é½?æ–¹å¼?更好。 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. […]

Pingback by Rael’s Hut » å?¯ç”¨æ€§ç ”究:Why you should right align form labels? — January 17, 2006

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.

Comment by Guillermo — January 17, 2006

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.

Comment by Tom Hawtin — January 18, 2006

I think it’s funny that someone would write an article about eye strain in 12px Arial.

Comment by Per Melin — January 19, 2006

[…] http://ajaxian.com/archives/why-you-should-right-align-form-labels […]

Pingback by Project :: penkiblog » 本日書籤 — January 19, 2006

[…] ä¸?过也有人对此æŒ?ä¸?å?Œæ„?è§?,认为左对é½?æ–¹å¼?更好。 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. […]

Pingback by Rael’s Hut » Blog Archive » å?¯ç”¨æ€§ç ”究:Why you should right align form labels? — January 20, 2006

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

Comment by Swapnonil Mukherjee — January 23, 2006

Leave a comment

You must be logged in to post a comment.