Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Although I have researched on input form label alignment, I need solid suggestion on when to use form label alignment top and when to use left and why?

For example in the below form username and password is left align.

left aligned labels

Here user name and password is top align.

top aligned labels

share|improve this question
    
Normally I am using vertical labels, When there is textarea, and large data collections. like to collect html, address, etc. –  pir abdul wakeel Oct 8 '12 at 8:09

3 Answers 3

up vote 24 down vote accepted

Luke Wroblewski is the guru on this field.

He has written an entire book on web form design (Web Form Design) and he published an interesting article on the label-issue some years ago.

You can read the full article here: http://www.lukew.com/resources/articles/web_forms.html

Summarization of the article:

Vertical labels

Should be used when:

  • The time to complete a form needs to be minimized
  • The data being collected is mostly familiar to users

Image of "Vertical labels"

Left-Justified Horizontal Labels

Should be used when:

  • The data being collected by a form is unfamiliar
  • The data does not fall into easy to process groups
  • The data being collected is mostly familiar to users [...]

Image of "Left-Justified Horizontal Labels"

Right-Justified Horizontal Labels

The distance between the [left justified] labels and input fields is often elongated by long labels. [...] An alternative layout, right aligns the input field labels so the association between input field and label is clear.

Image of "Right-Justified Horizontal Labels "

share|improve this answer
    
+1 for reference, yes good example –  pir abdul wakeel Jun 24 '11 at 11:59
8  
You should summarise the post you link to. It keeps the information on this network and helps guard against link rot. –  ChrisF Jun 24 '11 at 12:53
1  
In the user testing that I recently completed there was no discernible difference between top and left alignment. Right alignment of labels was not tested. I chose to recommend top alignment to increase the room available for internationalization and to allow for more 'help' text that could go between the label and the input field. –  Dave Nelson Jun 24 '11 at 13:30
3  
While I agree with Chris, a the same time, most every question regarding web form usability can be answered by pointing at lukew's extensive catalog of work. –  DA01 Jun 24 '11 at 13:33
4  
Just to emphasise Chris's point. Let's err on the side of caution and answer questions - this is a Q&A site, not a link farm. –  gef05 Jun 24 '11 at 13:59

Here is some advice, taken from Quince, which has many examples of sites and software using each pattern effectively. Definitely check out this site.

Rationale Behind Top Alignment

"Each label and input field is grouped by vertical proximity and the consistent alignment of both input fields and labels reduces eye movement and processing time. Users only need to move in one direction: down. As the content can expand horizontally the length of the labels can localized and complex input controls can be used without affecting the layout. Eyetracking studies show that placing a label right over its input field permit users to capture both elements with a single eye movement. Also, if a label indicated data that was very familiar to users—for example, their first name or family name—users did not fixate on the label separately to read it. They were able to view both the label and the input field in the same area; thus eliminating the need for additional fixations."

Rationale Behind Left Alignment

"The main reason for choosing left-aligned labels is to make it as easy as possible for people to scan what the form is asking of them or allows them to modify. This can be useful for several purposes. People can scan to see if they have the information required or perhaps to just confirm that it is the right form. If it is a form used to update existing values, they can scan to more quickly find the value they want to update, or maybe if you have only a few required fields, they can scan your form more quickly to find those."

Rationale Behind Right Alignment

"To make relationships between information clear, right align labels up against the information or fields they describe, leaving a consistent small amount of space between them.

Objects that are closer together are perceived as being related, more so than objects that are further apart. Because you want fields and the textual labels that describe them to be perceived as being related to each other, you should place them close together. When this pattern is applied to a long list of pairs of textual labels and fields, it becomes easier to notice that each textual label describes each field that is next to it."

share|improve this answer
    
Left Alignment vs Right alignment is all about aligning the label that is already at the left side of the input field... –  Jørn E. Angeltveit Jun 24 '11 at 12:01
    
@Jorn - Yeah i definitely blanked out on that one, it's too early int he morning :). I added in the top alignment part that I left out. Thanks for the heads up –  Matt Rockwell Jun 24 '11 at 12:07
    
Haha, it's 2pm @ CET, where I am. That explains it. :) Have I nice day! –  Jørn E. Angeltveit Jun 24 '11 at 12:13

One thing I don't see mentioned that has led me to default to top-labels these days is the mobile web. A big advantage of the top-labels is it makes your form that much more ready for use on a cell phone without having to rebuild the entirety of the CSS for a mobile device.

Since many phones these days will zoom in on your form field, having it to the left of the field means you've lost the label for your field in that zoomed in mode. Top-labels don't completely remedy that in all cases, but definitely are preferred over the left (It's typically easier for a phone user to scroll up/down the page rather than having to do that PLUS pan left and right).

And yea, whatever LukeW says. ;)

share|improve this answer
    
+1 Great point about mobile use. –  Matt Rockwell Jun 24 '11 at 16:23

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.