5

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?

enter image description here

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?

  • 1
    I don't think this is a UX choice as much as it is a UI choice. I think in this case A/B testing it out would prove the best for you. – Madara Uchiha Jul 16 '14 at 15:09
  • Sure, A/B Test is an appropriate method for this issue. The thing is: What should I measure ;-) – Alexej Froehlich Jul 16 '14 at 15:39
  • I like the left one more, however, I don't think this is the right place to ask. – Danny Varod Jul 17 '14 at 12:10
  • @DannyVarod what would be the right place to ask? – Alexej Froehlich Jul 17 '14 at 14:29
  • @AlexejFroehlich I am not sure any Q&A site is the right place, as this seems very subjective. By the way, if the labels are on the same line as the inputs, they are usually vertically aligned with the text, not with the input control's boundary. I'd follow this convention for the horizontal alignment. – Danny Varod Jul 17 '14 at 17:25
5

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.

example

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:

example example

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

example

From a Human Perspective

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

example

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

  • Fantastic answer! – rdjs Aug 18 '14 at 7:04
1

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.

  • Well that's our dispute over here... We got people disliking the right because of the text misalignment. I must say, in this mock-up the lines of the input/comboboxes are very harsch... they are actually very bright in our interface, so the texts are much more opaque than the input borders and the text line is clearly recognizable – Alexej Froehlich Jul 16 '14 at 15:38
  • Can you share the actual design? – rdjs Jul 16 '14 at 15:42
1

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.

  • So, that sounds like left would win in this case? – Alexej Froehlich Jul 17 '14 at 9:02
  • Yes, if we consider between "left" and "right"; left would win. There could be a 3rd option as well, that is placing the label as placeholder inside the input box. For drop-down, the label can be first option as "choose a value of ..." We could same extra space in that way. Weather to use it or not depends on the type of data to be filled. – S.M. Jul 17 '14 at 9:30
  • 1
    Yes, I actually use a combination of fields with labels and some without due to their clarity. However I don't apply the "placeholder only" pattern as it's false simplicity – Alexej Froehlich Jul 17 '14 at 9:55
0

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:

Combine Label/Input

  • Interessting idea in general, but in my case I have at least four (or more) elements right under each other so placing a box around every one would create too much visual noise. Still, interessting approach :) – Alexej Froehlich Jul 17 '14 at 14:27
  • The dark grey specified above wouldn't be appropiate for a light-themed template ^^ however you can experiment to find the right contrast. Again: if i'd have to pick I'd go for the right one :) Good luck! Hope this helped with your decision. – Narayan Jul 18 '14 at 9:36
-1

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

  • Do you have any reference to support your suggestion? – Benny Skogberg Jul 17 '14 at 12:52
  • No, it is my subjective point of view. – sergiol Jul 17 '14 at 16:32
  • 1
    BTW, search the Internet for "PARC Principles". Even if this will not supply with substance for your position, this is a good read for you. – sergiol Jul 17 '14 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.