Are horizontal forms ever good UX?

Question

Generally when making a form the input fields should be listed vertically in most cases but is there ever an instance when listing the fields horizontally is a good idea?

For example, if a form has many fields and stacking them vertically on each other causes the form to overflow vertically (therefore making the user scroll down to access more of the form) is it ever a good practice to list the input fields horizontally instead (therefore no overflow)?

Are there any good examples of horizontal forms done 'right' or is it just not good UX?

Answer 1

it's a very bad idea. First of all, if you happen to have a vertical scroll, what do you think will happen if all fields were horizontal? Unless user has a very wide screen, chances are that in 90-95% of cases user will have to scroll horizontally (think on this: more than 50% of your users will see your form on a mobile). And horizontal scrolling is really unnatural for users, while vertical scroll is what user expects.

However, despite what you may see here and there, you can have 2 columns. In this page, you'll find some sound advice about form building, but I don't completely agree with the number of columns part. I'll explain: For reasons beyond my control, I had to build a form with 3 columns once, and user testing was really bad. However, I have built many 2 columns forms and they work almost as well as a single column form, only that saving space (but make not mistake: if you can do it in ONE column, go for it). The problem with that example is that they consider a form in 2 columns will be built in an inverted-N shape, which makes no sense. Forms in 2 columns have to be built using a zig-zag pattern, which also explains why 3 or more columns are really confusing.

What about labels?

Another thing to consider is labels. If you use top-aligned labels, you'll be able to use 2 columns without issues in most cases, from desktop down to tablets. However, if you use inline aligned labels, chances are you'll only be able to use 2 columns on desktop. Maybe tablets, depending on label and input size and font used. But this is something to consider nevertheless

Special Fields

The strongest case against horizontal forms is... textarea. Just imagine having a number of input fields taking around 30px height and then a textarea with 100px height. It will break any layout without any question. Same will happen if you have several radio inputs or checkboxes, your form will get extremely long, requiring a really weird horizontal scroll. Just imagine having 5-6 options and then scroll to the right until you lose focus on the label, or even worse, all other fields. And if you list the options vertically... you'll break the layout, same as with textarea fields

And I could go for hours explaining why is this wrong, but guess you got the idea by now. So, as I said at the beginning: it's a really bad idea

Answer 2

I think you'll find that there are examples of horizontal arrangement for at least some portions of forms. A good example is the address input fields that normally has the region/state, city and postcode arranged together. This is because breaking these input field then causes the user to think about each of the fields separately when they are very much related.

There might be other examples such as the credit card expiry and CCV fields that are also arranged horizontally because the input of one usually follows the other and the small input field size makes stacking them vertically on top of each other an inefficient use of space.

Answer 3

Generally speaking, laying out form fields horizontally is considered bad for UX (do let me know if you want me to elaborate on that)

However, if the screen is in wide in a ratio of 16:9 (or wider) then there's a chance of vertically presented fields leaving more than 50% of the screen blank. Which is also bad.

In that case, consider having a 2 column layout

Answer 4

When you have too long forms and form fields, there are multiple ways to handle requirement. Giving too long forms are never a good idea, because users should be aware of the form length and should be able to approx estimate the time he/ she would spend on it.

Also he would have an emotional comfort towards the completion when the user is aware of where he is positioned.

Here are few ways to address this kind of requirement

• 1st option: Provide the no. of steps when the form is having too many fields
• Group the steps in a wise manner. This grouping of form elements would speed up the task completion
• Its also good to label the steps if you can, so that user would mentally prepare to perform the task. This preparation would reduce the drop off rates.

• When you take this approach, allow user to save and proceed to the next step

• 2nd Option: Avoid duplication of form fields which can reduce the fields count

• Do not show the non editable content in forms, Show them in the confirmation screen

• Try capturing only the required fields for the documentation, understand the additional field data which is not valuable

• ex for the above point - If you are capturing the proofs for some documentation, then load the fields which can only be validated with the core system. Else capture the images for the documentation where the verification is manual.

Horizontal forms are not a bad idea if

• Real estate is available
• Frame the form field sequence in such a way that the users track ball follow the horizontal sequence
• Group the relevant fields and arrange the form in the sequential manner.
• If you are taking this approach, make sure all the content presentation follows the same pattern to have consistency, so that there is no increase in learning curve

Hope i answered your question.