Building better web forms: Labels in form layouts

June 6, 2008

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

Vertical labels

Left-aligned labels

Left-aligned labels

Right-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.

Visual elements in form layout

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.

Underlined labels

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.

underlined labels 

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.

underlined labels

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:

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

I discuss these topics on twitter too. In case you feel nostalgic, my RSS feed is still working.

12 Comments

  • Greg (June 6, 2008)

    Great post, thanks for sharing and keep up the good work!

  • DailyCoding (June 6, 2008)

    "underlined labels" label concept is really good. I liked it.

  • Jacob Carter (June 6, 2008)

    Thanks for this great article! I was just thinking about labels the other day and which way was the best method of displaying them. I really liked the steps that you took to reach your final decision. Loved the underlined labels.

  • David Abrahams (June 8, 2008)

    Nice post its interesting that you talk about refactoring page layout. Before I really only thought about refactoring as a code improvement technique. I have just finished reading the book "Designing the moment" a great book by Robert Hoekman Jr. In this book Robert explains that the "Vertical labels" format is possibly the most effective form layout as it takes the least amount of time to associate the labels and the fields. With this format users can move through the form more quickly as the label and field can be viewed in a single eye movement rather than the two that is required to read a label in one column and then the field in another column (especially when the label is left aligned).

  • Janko (June 8, 2008)

    @David: What you wrote makes a perfect sense. I also believe vertical labels are the most effective. But in this particular case I was limited by a number of requests, so this was a compromising solution. Thanks for book recommendation, I’ll check it out.

    For the term "refactoring" – I really like to use it not just in the context of code refactoring, but beyond it as well :) It sounds to me like if it is not just redesigning of something, but changing it in visual, functual and semantical sense.

    Thanks for the comment!

  • Binusha Perera (June 16, 2008)

    Hi Janko

    Great post by the way really helpful, i am designing a set of forms and i was looking at jQuery (starting to get into this a bit more). So did you get some feedback on the last option of laying the forms with underlines for labels. Also is it worth while using fieldsets to organise the form fragments (groups) ? Just a thought or is it better to go with divs ?

    Reading books web standards seems to suggest fieldsets over divs just wanted to know what your thoughts are on this.

    thanks
    Binu

  • Janko (June 16, 2008)

    Binusha, the client was more than satisfied when we presented the concept of underlying labels. They also liked highlighting.

    I think you are right about fieldsets, although I don’t use them in all cases due to the specific requests. In some cases I even use tables :)

    By the way, I like your website!

  • Pete White (June 17, 2008)

    I often find having a slightly larger title above the box (or to the left) with a smaller description below works well.

  • cliff davidson (July 29, 2008)

    Great article, and well thought out. I have one suggestion though, try putting the underline or bottom border as a top border, it might work. I’ve yet to try it because I’m lazy, but perhaps it’ll work. Also, dont forget about cross browser compatibility especially with radio buttons.

  • Sherry (September 28, 2008)

    I like the right justified on the left myself. But that’s just a personal preference. Here’s an idea for makeing the three radio buttons visually group together. create gif that is 1px by 400px. make the first pixel a grey pixel and the rest blank. Then use it as a background for the td with the radio buttons. It should appear to be a vertical line.

    Just a thought.

    Thanks for the material. I think I spent all day saturday looking at great fonts. What a treat.

  • Luis (February 4, 2009)

    Genial! Thank you very much.

  • Tomas Matejka (May 19, 2009)

    This link is not working yet: http://synapticburn.com/comments.php?id=39_0_1_0
    The new one is here: http://davemalouf.com/?p=1191

    Thanks for this post – very usefull