TIL: Avoid Multi-Column Form Layouts

My notes from - https://baymard.com/blog/avoid-multi-column-forms

According to some tests and benchmarks, it seems that multi-column form layouts are bad. They might cause users to:

  • skip some inputs
  • input wrong data
  • not know how to proceed next
  • abandon the form altogether

Each user might interpret the flow of the form differently - from left to right, top to bottom etc.

Bad design from Walmart

Bad form design on the Walmart website. Users jump from first name to street address.

Exceptions

Some inputs, such as first and last name, or credit card details, might have more fields in one line. It's because they logically belong to the same single entity. However, the form should still be structured as one column.