To left-align or to right-align… that is the question
July 30th, 2007
In lots of applications I use and write, left-aligned labels are used:
In principle this violates the Law of Promoxity since the labels are aligned with the left edge of each other instead of being aligned with the control they reference. This isn’t too bad unless the labels are pretty far from the control.
I can actually feel my eyes trying to keep steady as they scan across the page trying to keep a level visual line to identify the control that the label is associated with. Of course for an easy fix, you can just move the labels in closer to the controls. But what if you have a label that is noticeably longer than the others? That doesn’t seem to work very well:
So unless you have label length problems (as shown above), aligning the labels with the controls seems to make the most sense both logically and aesthetically. Sometimes it’s a little too late to change though.
…But what do you think?
You might enjoy these two articles.
Web Application Form Design
Label Placement in Forms
July 30, 2007 @ 12:57 pm
After reading the first link, I think I still stand by my original post. I didn’t consider above left-alignment, which is a viable option, however trying to group controls gets problematic and increases the usage of vertical space even more.
The second link is pretty interesting. So they’re saying that above left-alignment is better (well faster and easier to process) than right-alignment which is better than simple left-alignment. I can buy that, however you still lose that much more precious vertical space, you force your form to be pretty thin with lots of whitespace, and well… it might just end up looking crappy. I think a nice balance of form and function is needed here. I’d still vote for right-alignment.
July 31, 2007 @ 11:37 am