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.

You should summarise the post you link to. It keeps the information on this network and helps guard against link rot.
–
ChrisFJun 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 NelsonJun 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.
–
DA01Jun 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.
–
gef05Jun 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."

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

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?