Building better web forms: Labels in form layouts

One of the requests that I often had is to refactor the presentation layer of web applications. One of the things that purports is a form layout refactoring.

What is so important about form layout?

First time when I was thinking of the best solution I remembered that I read a great article "Web Application Form Design" written by Luke Wroblewski. Luke explained how label position can affect web form usability. He described the advantages and disadvantages of common label positions and how visual elements fit in this. To put it in short, there are three common ways to position a label associated with an input field:

Vertical labels

Left-aligned labels

Right-aligned labels

It is hard to say which one is better, although a great article "Label Placement in Forms" from UXMatters  can answer a lot of questions. But it is easy to say that Left-aligned labels are the most common scenario in web sites and web applications.

You can find a lot of articles on how to build a "public" web form - the one that is a part of a web site. But web application forms require an extra work. Web application forms tends to be more complex than web site forms due to complex business rules and (often irrational) user requests.

An interesting article "Functioning Form - Web Application Form Layout" gives one of possible solutions using "background colors" (pay attention to comments on this article). However, if you have a large number of input fields and labels that somehow has to be ordered and grouped (which is a common scenario in web applications), this solution produces a-hard-to-fill form. It looks somehow overworked. Especially if you have to apply some other color schema than gray.

So, what is the solution?

Left-aligned labels wasn't enough. Background colors was too much. Then I decided to try something in between. I tried with "underlined labels" - a visual elements that can bee seen on a products like Microsoft CRM.

As you can see on the example above, underlined labels are an extension to Left-aligned labels. They visually associate labels with input fields and, I believe, do not interrupt eye movement as it might have be the case with "background colors".

Now, the question is can this improve overall interactivity. By this I mean to reduce the eye movement and the time required to fill the form. These are the parameters that are being tested using Eyetracking testing. To find out more about this I strongly recommend you to read "Introduction to Eyetracking" from UXMatters.

But there is a catch...

This looks fine when there is a single input field that has the common height. But take a look at the example below.

If the area that contains input field(s) expands, the label associated with it just won't serve the purpose anymore. Just take a look at "Account type" label; Does it refers just to "Basic" option? And what about "Some description"? The line under the label is not aligned neither to the top nor to the bottom of input field. All of this might be confusing to users.

The only thing I could think of is to vertically align labels to the bottom of input field area.

Although users liked this layout, I am really interested in finding out does this improves overall usability. I don't know if anyone tried to test this, but if answer is Yes, it would be nice to see the results.

Conclusion

In this article I presented you an alternative way to design form layouts. Again, I would strongly recommend you to read following articles:

• Web Application Form Design
• Functioning Form - Web Application Form Layout
• Label Placement in Forms
• Introduction to Eyetracking

If you have any experience with form layouts or if you just agree or disagree, please share your thoughts!