When designing a 2 column form, should the logical order of fields flow vertically or left to right

Question

I'm building a business system that has several screens with more than 20 fields. In order to improve the experience I have broken the form into multiple sections and used 2 column layouts.

Should I order the fields so the user does a vertical scan or a z scan when completing this form?

In the screenshot below the tab key would go - Product Owner, Product Name, Product Code, Vendor Name, Product Active etc

In a vertical setup Product Owner, Product Name, Product Code, Vendor Name, Product Active etc would be in the left column. The user would complete the left column before moving to the second column.

Answer 1

As you have a big space in the middle before read your post I considered the vertical reading. If you would like to reinforce for users that the form should be read in vertical, just use a middle light grey line.

If you would like to read in horizontal you should reduce the white space in the middle. You also can use some light grey lines to split the form into blocks. Will make life easier for users.

For big a form, I never recommend using the horizontal reading because could become confusing rapidly. But sometimes you just don't have alternative and then you must focus on separate the form in blocks to prevent the user misunderstand.

See some examples.