File Under: Visual Design, Web Basics

How to Design Form Labels

Sometimes it feels like the whole web is made of forms. Other than simple links, forms are the most common way to get information from the user. One of the recurring issues I have is deciding what to do with the form labels. That’s the phrase that tells users what you expect to go into an input field.

How do you align your labels?

Left, Right, and Top Aligned Form Labels

Yahoo’s Luke Wroblewski (you can call him LukeW) is the preeminent form expert. He has performed usability studies and come up with some good information about form label alignment.

Sadly, Luke won’t tell us which is best, because it depends on the situation. Here’s a summary of the pros and cons.

Alignment Pro Con
Top Users fill out form fast
Label close to the field
Takes up a lot of vertical space
Left Easy to scan the labels
More vertical space
Labels sometimes far from fields
Takes users a long time to fill out
Right Label close to the field
More vertical space
Hard to scan labels

Once you decide which to use, Sitepoint has a nice tutorial.

What comes after your label?

A colon after a label is fairly common (though strangely absent from LukeW’s examples above). This may be a remnant of command line days. Though common, many are adamantly against the practice.

Christian Watson read up on the studies and reports that it doesn’t matter. So stop bickering, and just do what feels right, brother.

What else about labels?

There’s probably so much more we could talk about labels. Like how you should be using the for attribute, for example. What other issues do you run into when you label your forms?

[Label mockup courtesy of Luke Wroblewski]

See also: