In the Details: Form Labels
A new trend in web forms finds labels placed within the fields, rather than above or beside them. They are usually light gray, and they disappear when the field receives focus, allowing you to type your entry. They have the benefits of saving space and connectedness, but they are not necessarily the best choice for usability. Take the following form, for example.
This form uses a combination of labels above and labels within. Those above label a group of fields as a type of information, while the labels within the fields are more specific. This works fine for a type of information that has a commonly understood format, such as a person’s name. We expect it to have individual fields for first, middle, and last names. A shorter middle name field is understood to only expect an initial. The labels reinforce this, but without them, it would still be understandable. There is more variation in the Address block. This one would not be usable without the field labels, as they are not in the expected order. We would expect to enter the city before the state or zip, and we typically enter the state before the zip. Furthermore, we tend to use two-letter abbreviations for state names, so the field sizes aren’t helping.
Then there is the Contact block. This one is completely reliant on the individual field labels, as there is no standard order for contact information, no special formatting, and any number of possible contact methods, including email, several types of phones, fax, instant messaging handles, URLs, and Twitter. As I was filling out the above form, I was entering information in a field and then pressing tab to move the cursor to the next field. When I tabbed out of the Company field, my eye was on the Country field, but it wasn’t included in the tab order, so the cursor moved to the first Contact field. When I looked at it, it was blank, due to the fact that it had already received focus. I could see that the second field was labeled “Phone”, but I didn’t know what to enter in the first field. I had to tab forward to see the label.
For more discussion of in-field labeling, see the ongoing discussion on the IxDA forums.
