2

Is there consensus about whether side-by-side or vertical alignment is preferred? For example, which of these two form fields provides a better user experience?:

enter image description here

  • I find vertical alignment to be easier to manage when it comes to creating a responsive design. With side by side it is difficult if you label runs onto two lines, which happens more often in that format. – pathfinder Mar 22 '14 at 4:35
8

You can read about a related question here:

In that question is linked this document, and here is the relevant paragraph from it:

Top Aligned

Top-aligned labels tend to reduce completion times (how long it takes to complete a form) the most for familiar data (i.e. address, credit card, etc.) because they only require a single eye fixation to take in both input label & field. Top-aligned labels also work well for forms that require localization or long labels as there is plenty of horizontal real estate to expand/contract the label without negatively impacting the overall page layout. Top-aligned labels, however, do take up a lot of vertical real estate.

Also you can see this image from Smashing Magazine that shows the advantages and disadvantages of the positions of labels.

Advantages and disadvantages of the positions of labels

  • The proximity item is a bit misleading. Often, labels on the left are right-aligned, giving equal proximity to one on the top. – uliwitness Mar 22 '14 at 8:06
1

I do agree with the pros & cons of Top-aligned labes, however, the last conclusion that Top-aligned labels are only ideal for Simple forms sounds strange to me. Should not the type of labeling be consistent across the whole application, i.e. for the whole Internet Banking application that has both simple and complex forms?

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.