Usability: Form field labels
I’ve always struggled with the usability trade-offs of left, right and top aligning form labels. Left-alignment places the label too far away from the field causing the user to lost track of which line they are on. Right-alignment places the label right next to the field, but causes a ragging effect from line to line. Top-alignment is a good option, but it increases the height of the form. There is no one or right way because it depends upon the number and type of questions being asked.
There is another option that I haven’t mentioned which is to place the label within the field. From my experience, this option is seriously flawed because once the user clicks into the field the label disappears. If you become distracted or need to refer to some other piece of information, you often forget what you were trying to enter in the first place.
A prime example is the sign-up form for the iPhone 4 per-order. Because of the incredible volume both the AT&T and Apple sites, I fill this form out at least 7 times before giving up. Maybe I just dumb, but each time I keep forgetting what I was filling out and have to backspace to display the label again.
There is a better alternative to having pre-labeled text fields: http://github.com/davist11/In-Field-Labels-jQuery-Plugin
With this plugin, the text retains its label when focused, and the label only disappears once the user begins typing. Pretty sweet.
The example of the iPhone pre-order form works the same way, but I still don’t like the fact that the label disappears and you have to erase everything to make it reappear. I don’t see the advantage of it .
Labels within the response fields don’t test well in usability studies, either. From what I’ve seen stacking the labels on top of short forms tests well.
If you are putting them to the left of the response boxes, the nature of the user’s task in using the form has a lot to do with the best alignment of fields:
For forms (particularly short ones) where you expect that the user is familiar with the form and will be scanning fields to find the ones that are relevant, left alignment tests very well.
For long forms and forms where the perceptual relationship between the label and the response box are most important (particularly for forms where the user has no reason to cherry-pick fields) right alignment seems to work better.
(Sorry I don’t have the citations at the moment.)