Tuesday, April 03, 2007

Top, Right or Left Aligned Form Labels

A good look at positioning for labels ...

"In my Best Practices for Web Form Design compilation, I outline several considerations applicable when deciding how to layout form labels online. As the question of top, right, or left aligned form labels comes up often for designers, here’s a short overview of the pros and cons of each method.

Top Aligned
Top-aligned labels tend to reduce completion times (how long it takes to complete a form) the most for familiar data (i.e. address, credit card, etc.) because they only require a single eye fixation to take in both input label & field. Top-aligned labels also work well for forms that require localization or long labels as there is plenty of horizontal real estate to expand/contract the label without negatively impacting the overall page layout. Top-aligned labels, however, do take up a lot of vertical real estate.

Right Aligned
Right-aligned are a bit slower to complete but require less vertical screen space. They do, however, have flexibility issues when the labels change widths. When localizing applications, it is important to note that languages like German or French can be twice as long as English. Right-aligned labels also don't work well when people need to scan a set of labels to see what is required as a left rag text impedes readability.

Left Aligned
Left-aligned forms are the slowest of the three to complete because of the number of eye fixations they require to parse. However, for forms with lots of optional fields or unfamiliar data (like preferences dialogs or advanced settings), they allow users to effectively scan labels. In fact, if you want users to slow down and consider each input in a form more carefully, left-aligned labels are a good way to go."    (Continued via Functioning Form)    [Usability Resources]

Label Alignment - Usability, User Interface Design

Label Alignment


Post a Comment

<< Home

<< Home