Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'm creating a form that will ask a visitor for their firstname, middle initial, and lastname. I want the those text fields to be all inline, but where should I place the labels? On the left, top, or under the fields.

I'm looking for the best approach from a usability standpoint.

share|improve this question
    
Is this not more appropriate for uxexchange.com? (uxexchange.com) –  Bobby Jack Aug 3 '10 at 11:06
    
Wow, I didn't know uxechange.com existed, thanks. Judging from the number of up votes on this question, it's definitely on the minds of Pro Webmasters. –  Shane Stillwell Aug 3 '10 at 12:13
    
Yes - it's a bit of an 'issue'. I believe uxexchange was set up using the 'old SO' model. Sites using the new model, such as webmasters, seem to be getting a lot more attention. So something that's more relevant to uxexchange ends up being more successful on webmasters. I'm not sure what the solution is - migrate uxexchange? –  Bobby Jack Aug 3 '10 at 12:53
add comment

6 Answers

up vote 10 down vote accepted

Have a look at this study by UXmatters. It is fairly in depth, includes data on eye-tracking, and concludes that labels on top is overall the best solution.

There is a similar article by Luke Wroblewski, also fairly detailed. Both articles are worth reading!

share|improve this answer
    
+1 I was going to post those exact same resources. Really, any answer to this question should include studies. –  Virtuosi Media Aug 2 '10 at 18:21
    
This is what I was looking for, some comparisons of left versus top. I'm sure a lot of it is subjective, but non-the-less, there should be some layouts that are slightly better all things being equal. Thanks. –  Shane Stillwell Aug 2 '10 at 19:16
    
What's also interesting about the UXmatters article was they found bold labels were distracting to the visitors and ... "Bold labels were more difficult for users to read and perceive—probably because there was more visual confusion between the bold text and the heavy adjacent borders of the input fields." Good to know. –  Shane Stillwell Aug 3 '10 at 12:08
    
not to be a negative nelly, but uxmatters.com doesn't have a "top articles" section or even use google webmaster tools so i can find their most read articles, which isn't very user experiency! –  Neil McGuigan Jan 19 '11 at 19:16
add comment

The most important thing is to be consistent with the rest of your site. In general most websites do the labels to the left of the text fields. In this cause it would be a long description so make sure you have room and it flows well.

If to the left doesn't look right or there isn't room to do it, then I would do above. As that is very clear.

The only method I would avoid is putting the labels under the text fields. when the labels are under the fields it is more confusing.

share|improve this answer
3  
In any case, don't forget the for attribute. –  Pierre-Alain Vigeant Aug 2 '10 at 19:10
add comment

Normally, for your situation, at the top or to the left is best. Just be sure the label comes before the input field for accessibility.

Still there are many different ways to layout a page and be accessible.

Form labels can really appear just about anywhere you want them as long as it makes since. This recourse is worth a look, http://patterntap.com/tap/collection/forms

share|improve this answer
add comment

There are two options that are considered best:

  • labels to the left of the field, flushed right so they are close to the input.
  • labels above the field itself

another important thing to note for usability to make sure you are using the for attribute of the label, so that clicking the label focuses on the field it labels.

share|improve this answer
add comment

Answer: None of the above. Use placeholder text inside the field itself. The placeholder attribute is a built-in part of HTML-5.

Otherwise, I'd say put it above the fields, left-aligned.

share|improve this answer
add comment

This is a bit of a tangent - but please don't use firstname/lastname/initial. Not everyone's name falls into that neat grouping.

Quoting myself over on StackOverflow:

Many Asian cultures put the family name first, because the family is considered more important than the individual.

Noting that there are a fair number of people who use a name that isn't the one bestowed by their parents, I've used the following scheme with some success:

Full Name (as normally written for addressing mail); Family Name; Known As (the name commonly used in conversation).

E.g.:

Full Name: William Gates III; Family Name: Gates; Known As: Bill

Full Name: Soong Li; Family Name: Soong; Known As: Lisa

See http://stackoverflow.com/questions/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694 for more.

share|improve this answer
    
I see the value in your recommendation, but the key question will be "who is your target audience?" If 99% of my audience will be Americans then I would go with Firstname/MI/Lastname. I think many Americans would not immediately understand what a family name would be. Like @RandomBen said, you need to be consistent and most US sites use Firstname / MI / Lastname. –  Shane Stillwell Aug 3 '10 at 12:18
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.