33

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

0

4 Answers 4

37

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 "

7
  • 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, 2011 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. Jun 24, 2011 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, 2011 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, 2011 at 13:59
  • @Chris, @DA01, @Gary: I agree with Chris that a proper summarization should be provided to external links. Primarily to give the reader enough information to choose whether to follow the link or not. I think that links and references are a good thing, though. It's better to provide a good reference than to google'n'paste something and take full credit for the content. Jun 25, 2011 at 11:18
11

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. ;)

0
10

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

3
  • Left Alignment vs Right alignment is all about aligning the label that is already at the left side of the input field... Jun 24, 2011 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 Jun 24, 2011 at 12:07
  • Haha, it's 2pm @ CET, where I am. That explains it. :) Have I nice day! Jun 24, 2011 at 12:13
0

I do agree with the pros of Top-aligned labes and other types of labels. However, my question is - is it rather imperative to have the type of labeling be consistent across the whole application, i.e. for the whole Internet Banking application or the best practice is rather use all types of alignment given the different types of forms?

1
  • its depend on space and user experiences.
    – Pir Abdul
    Feb 23, 2015 at 7:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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