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?:
-
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.– pathfinderMar 22, 2014 at 4:35
Add a comment
|
2 Answers
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.
answered Mar 22, 2014 at 5:12
-
The proximity item is a bit misleading. Often, labels on the left are right-aligned, giving equal proximity to one on the top. Mar 22, 2014 at 8:06
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?
