Luke Wroblewski wrote about this in Top, Right or Left Aligned Form Labels (April, 2007).
In it, he references eyetracking data from an article by Matteo Penzo called Label Placement in Forms (July, 2006). Matteo drew several conclusions from this study, including that right-aligned labels have a lighter cognitive workload for users:
Alignment of labels—In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.
It’s possible Billy saw Luke’s article and changed his stance based on it.
You can see this as a function of the Gestalt Grouping Principles: objects that are close together will be visually parsed together and interpreted as belonging together. Obviously, this is useful so people can read smoothly from label to text field. Therefore, by right-aligning the labels next to their corresponding text-fields, you are creating easier readability, because your visual system naturally pairs up the label with the field.
In the example you show, I would even move the labels slightly closer to the text-fields than they are already, since the fields themselves are closer to each other (again, implicit grouping) than the labels and fields are, and we know that proximity is generally the most important cue for grouping (Quinlan & Wilton, 1998). It takes the brain longer to process text than it does to make decisions about where shapes are (“where?” usually gets answered before “what?”), so it’s worth making that as easy as you can for the reader, IMO.
Sometimes I’ll position my labels immediately above or sometimes immediately to the left of form elements. It simply depends on space constraints of the page I’m working with. But once I make my decision I’m consistent it with it.
There are a couple guidelines I follow for each case:
- If you place the label above the textbox, make sure you provide ample spacing underneath the textbox. You don’t want the user to confuse labels because they’re too tightly stacked.
- If you place the label to the left of the form element, always right align the label. It makes it much easier to connect the label to the textbox at a quick glance. This is especially true when the labels vary greatly in length.
I believe that the most important thing here is not for the user to be able to scan the labels quickly as if they were a list, but rather, to associate the labels to their respective form elements as quickly and effortlessly as possible.