8

I have a details page containing a list of information and input fields at the same time. Sections are alternating between information and input fields.

I am debating between the alignment of data. Option 1 is having the information align with the left of the input boxes, Option 2 is having the text align with each other (whether it is in an input box or not).

Is there a correct way to do this alignment or is this more opinion based.

enter image description here

  • 1
    There are definitely some good references out there (some of them will appear in the answers) although I would expect them to point out that you need to work out exactly who you are designing for and what information you are displaying in order to determine what the right approach is. In this case, neither the user nor the content is specific, so it would be difficult to provide the best answer. – Michael Lai Jun 15 '15 at 2:16
12

Generally, align the left of the field, not the text content:

enter image description here


There are several reasons for this:

  • Better alignment. For boxed input elements (i.e. with outlines, borders or shadows), the vertical | edges of the box tend to attract the eye as it scans down the left column so the form will be perceived as more organized if that vertical line is left-aligned.

  • Correct use of white space. For grid-aligned columns like your layout, the eye uses the margin of white space next to the column to perceive the column itself. Elements which intrude into that white space will feel misaligned to the user, and create cognitive dissonance. Here's an example of how noticeable the intrusion is (the layout still feels organized, but doesn't feel as much like a column anymore):

enter image description here

  • Better differentiation of the field itself. An input field is different from text. Aligning the whole field with the text paragraph provides correct visual semantics because you want the user to read the paragraph then perceive the input field first (i.e. "this is an interactive element, which is different from plain text") before reading placeholder or text values.

  • Visual hierarchy. For traditional form design where labels appear on top of the input boxes, the slight offset of the placeholders from the input box edge helps provide a label->input visual hierarchy which can help with scan lines and organization for the whole form.


Some real world examples of plain text + field left alignment...

  • Apple iTunes payment form enter image description here

  • Google signup form enter image description here

  • Facebook signup form

    enter image description here


Again, this is a general rule so there may be exceptions for specific UX reasons (e.g. deliberate use of dissonance, faded outlines, etc) or different widget designs (e.g. single underline input boxes).

For a more complete article on form design, I'd recommend Luke Wroblewski's presentation on form design as an overview, but there are plenty more resources out there.

0

Thinks this is rather opinion based. I believe its more common that the information to be aligned with the text boxes, i.e. option 1.

however besides to your question, think you should also consider labels above the textboxes which seems to be easier to use http://uxmovement.com/forms/faster-with-top-aligned-labels/

this is also quite a detailed guide http://www.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

0

This is a common question in design schools, and the answer is really easy: you should align the left extreme of a paragraph or block of content with the left extreme of the input field. Basically, exception made of content blocks with paddings (like blockquotes), all text should be aligned according to the desired alignment option (left, right, center).

And this is very easy to prove: simply write your html with no styling at all and you will see what happens. This is for many reaons, but just think of this: if you align the input inner content with paragraphs, then when input fields are empty they will be out of line. Or in 0 padding boxes, the input will overflow the container. And so on.

In short, your first option is the correct one in terms of design

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.