User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Note: I have read this vaguely-similar question and its answers: Why might right aligned field labels be better?

Case: I have a long (approximate 10-15 fields in 1 form) B2B form in which I have decided to have different sizes of the text-boxes for taking inputs as per their expected-input-data-size/length. IThe form is suposed to be filled by finance/sales guys - and I want to make sure that they do not; in any kind of hurry/haste; make any kind of mistakes.

Question: I have following 6 (refer the attached image) possible options of aligning the labels with the text_boxes. Which one should I choose? Why?

enter image description here

share|improve this question
1  
There is no option with labels above the field, to complete the set? – SteveD yesterday
4  
I like #5. It has the best proximity between label and field. In the case of a form I don't think a jagged right and left edge make the text harder to scan or read. – bloodyKnuckles yesterday
    
@ SteveD, No - We can't afford labels above the field as that will elongate the form even further :( – Saurabh Kautilya Gupta yesterday
    
Can we presume that your target audience reads from left-to-right? If yes then options 2 and 4 would make your users resent your form and I would personally prefer option 5. – MonkeyZeus 21 hours ago
    
2nd #5, with possible option that if all/most fields are numeric/amounts, flip around a vertical line so the (numbers in the) text-boxes are right-aligned with left-aligned labels to their right. – TripeHound 15 hours ago

Luke Wroblewski (aka LukeW) wrote an article about different label position. Like many things in UX Design, its a question about pros and cons.http://www.lukew.com/ff/entry.asp?1502

Label above field enter image description here enter image description here

Mateo Penzo then did some eyetracking to test Luke's article on label placement: http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

For labels left aligned above the field:

Placing a label right over its input field permitted users to capture both elements with a single eye movement.

For left aligned labels:

Excessive distances between some labels and their input fields forced users unnecessarily to take more time to interact visually with the form

For right aligned labels:

The right alignment of the labels reduced the overall number of fixations by nearly half, showing that this layout greatly reduced the cognitive load required for users to complete the task.

So based on your options 5 seems to be the best one. If your solution will need to be translated for global use, then do consider placing labels above the field, simply because label length often increases when you translate into certain languages.

share|improve this answer
    
I had no idea which one I preferred, but with the images, labels over input fields feels so much better. What you're doing when inputting a field is scanning label-input-label-input in a "What am I supposed to write next?" manner. – Filip Haglund 5 hours ago

While I don't have any real scientific evidence with graphical representations like SteveD above (great post BTW), I usually go between the vertically displayed labels versus the horizontal right-aligned labels (and left aligned fields).

My rule of thumb is if the labels are of similar size I tend to go with the right-aligned label/left-aligned field approach. This way readability is not compromised as much and it keeps the user flowing better through the form you want them to fill out. If the labels are of multiple sizes, then it's best to go with the vertical label approach. There are a few exceptions to this rule, mainly based on viewport size and content of the form.

Instance #1 - When you are viewing the page on a mobile device, regardless of the original design, I usually switch to vertical labels. Since space is a big issue side to side, vertical labels tend to flow well on the smaller screen.

Instance #2 - When you have varying lengths of labels, but these longer or shorter labels can be broken into different sections - I still use the right-aligned label/left-aligned field approach. For instance, you have a bunch of fields for contact information (e.g. first name, last name, address, phone number, email address). Then you have one or two fields asking for more detailed information (e.g. Special Shipping Instructions, Mother's Maiden Name, etc). These fields could be added below the first section separated by a horizontal rule. This way the fields are still on the same page using the same basic formatting, but the extra space and the horizontal rule help to make these fit together a little easier.

With all this in mind, to directly answer your question I would agree with SteveD above and say that Option 5 would be your best bet.

share|improve this answer

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.