Top labels alignment on forms: Align with text (typographically) or with input borders (geometrically)?

Question

EDIT: I've added a psd of the screen making the issue clearer. See how the text is flapping[*] on the right while he is aligned and actually seems to be more easier to read on the left?

Original post: I have a dispute with my colleagues over here about where exactly to position top labels. Should they align with text entries of the form fields (typographically) or with the borders of the form fields itself (geometrically)? Anyone has any idea if there is some research on this issue?

[*] is this the right word for it?

Answer 1

I am for the version on the right. Here's why, from a Typographic, Design Element, and Human perspective.

From a Typographic Alignment Perspective

In the examples I show, I have stripped the input box so you can see it purely from a typographic perspective.

Visual hierarchy looks like this:

See me first

 - See me second

See me third

 - See me fourth

Notice how the information is staggered.

If the user wanted to quickly sift through all the labels it would look like this:

See me first

- Ignore me

See me second

- Ignore me

Having them visually separated by space, makes it easier for the person to visually parce what's what. If all the text is aligned, it will get read like this:

See me first
See me Second
See me third
See me fourth

All the text blurs together and there's no easy way for the user to skim the content.

From a Design Element Perspective

List item

The other way to look at this is by shape. If you abstract it, any words in the boxes are part of the shape of the box. Therefore, aligning text with the input box makes the most sense.

Here's an example of alignment of copy with text in a box. It's usually aligned by shape.

I've never seen any case where the text is aligned with the text in the button.

I understand that in the example it's NOT an input box but a button but in principle it's by shape.

Here are examples:

Google made this leap too. Here you can clearly see their use of the Grid to clean up the design.

From a Human Perspective

When filling in forms, we naturally leave a space before writing.

Source: My experience formally trained as a Graphic Designer and having worked in the field for many years.

Answer 2

This isn't based on any research except for the fact that my eyes are melting from the ugliness of the option on the left.

The label should definitely line-up with the edge of the input box.

Answer 3

While the option on the right creates a class-difference between label and the value. It also creates a visual confusion because of the alignments. Now we can align the labels with the border of the input-box, we can't do the same with the values.

Best possible solution would be to align label and the value together, and create the class-difference between label and value, by using different colors.

Answer 4

If I had to pick between these 2... I Personally would vote for the option on the right since this is a more hierachical/logical way of presenting question/answer relationships. By quickly scanning the form, it is easier to differentiate question from answer.

However if you want to align text to the input vield, it would be more appropiate to create a container element: grouping those 2 elements. This will create visual hierarchy and personally this has my preference as so:

Answer 5

I vote for right, but if possible reduce the left-margins of the text inside the comboboxes.