When conducting user research on checkout usability we made an interesting observation in regards to form fields arranged in multiple columns.
The short version: avoid multi-column layouts for form fields.
Avoid multi-column layouts
One of the problems with form fields in multiple columns is that your users are likely to interpret the fields inconsistently.
Here you’ll see 5 different ways to interpret how the form fields relate when they are arranged in a standard two column layout.
Video from user testing
Below you’ll find a video clip showing how 2 test subjects interacted with a two-column form field arrangement during our usability study.
Notice how the first test subject thinks he only has to fill out the fields of either the left or the right column – not that the two actually belong together. The second test subject thinks she needs to start in the left column and then proceed to right column, even though there’s actually a dimmed “or” instruction between the two columns.
Two exceptions, but otherwise avoid
The only deviation from this single-column guideline we found during testing was [first name] [last name] fields and [country] [state] fields. In these cases the test subjects had no problems interacting with the fields even though they were placed next to each other (in two columns).
But otherwise, you should avoid multi-column layouts for form fields.
This article presents the research findings from just 1 of the 642 UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” cart and checkout user experience.