Label & Text-box alignment. Read the case

Question

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?

Answer 1

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

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.

Answer 2

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.

Answer 3

It is a question of usage.

As someone who has done data entry in the past, I can say the most important elements for repetitive entry are:

1. Good order - the fields need to be ordered to match either a logical relationship, or if being transferred from a physical medium, they need to match the read order of that medium. Organising them based on their data storage order, forces the human to constantly adjust to any discrepancies between the way their brain is trying to map the information and the order preferred by the machine, which increases cognitive load, slowing things down and adding to the likelihood of error.

2. Scannable labels - are helpful because they aid tracking for your location within the order. So having labels in a list with an easy scan edge is helpful.

3. Left aligned entry fields - help with cursor placement. Having a consistent visual location makes tracking the cursor easier, and helps if you need to re-position your location with the mouse. Right aligned fields are consistent when you are running down the length of the screen, but they are visually further from the labels, causing you to need a tiny bit more time to scan the item.

All of the above are specific to repetitive data entry. For a casual form that is filled in once by a user, inline labels may be better at stepping the user through the process. But users entering repetitive data will learn the forms, so things that make orienting data and spatial relationships easier will be more important over the long run.