Input form label alignment top or left?

Question

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.

Here user name and password is top align.

Answer 1

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

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 [...]

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.

Answer 2

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

Answer 3

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

Answer 4

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?