2

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.

enter image description here

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.

enter image description here enter image description here enter image description here enter image description here

| improve this answer | |
  • Thanks. Should I change the field labels to top align too? If I go for vertical reading. – AD700 Mar 3 at 15:59
  • @AD700 I suggest you create some design variations and compare to decide this. But I normally add on top. If this answer helped you, please check as the right answer and upvote if you really liked my answer. – Rafael Perozin Mar 3 at 16:09

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.