Our UX benchmark reveals that 13% of sites use a multi-column form layout.
This is despite the fact that our large-scale Cart & Checkout testing reveals that multi-column form layouts are prone to misinterpretation.
Consequences of using a multi-column form layout include users skipping fields where they actually have data to input, inputting data into the wrong fields, or simply coming to a halt and puzzling over how to proceed with inputting their data in the first place.
This user behavior was first observed during our first rounds of checkout usability testing dating back to 2010. Since then this behavior has been reconfirmed during all subsequent checkout usability testing, including our most recent Checkout usability study.
Furthermore, during our testing we also observed several abandonments directly related to issues stemming from multi-column form layouts.
In this article, we’ll discuss the test findings from our Cart & Checkout usability study related to multi-column form layouts. In particular, we’ll discuss:
- Why multi-column form layouts are prone to misinterpretation, and what to do instead
- Why some specific fields can be presented in the same row and not cause the same confusion as a full multi-column form layout
Why Multi-Column Form Layouts Are Prone to Misinterpretation
When users arrive at a page with form fields in two or more columns, there are simply several different ways for them interpret the columns. In particular, we’ve observed that forms with multi-column designs often lead users to
- omit fields, simply because they do not notice them or because they misinterpret the meaning of the multiple columns, or
- fill out unrelated or incorrect fields because they misinterpret them to be part of the needed input.
For example, some users may look at a multi-column form and think they only have to fill out one column. Some may view the columns and think there is a sequence they must follow, while others may assume there’s a different sequence entirely.
During testing, multi-column forms even proved to be the direct cause for multiple checkout abandonments, as the users kept focusing on the wrong columns and eventually gave up on the checkout.
Furthermore, during testing we often observed not only users misinterpreting forms but also having very inconsistent misinterpretations. In other words, one user on a particular site may misinterpret how to fill out a form one way — for example, by going straight down the second column — while another on the same site may adopt a “zigzag” approach (as illustrated above).
Such inconsistent misinterpretations make it difficult to resolve the multi-column issues by simply relying on more clearly dividing or styling the columns or fields.
For these reasons, a single column form layout should generally be used, although with a few possible exceptions.
Fields That Can Be Placed in the Same Row without Confusing Users
Though a single-column format is perhaps the easiest solution to implement, testing revealed that there are certain fields where placing them in a second or third column won’t confuse users.
For inputs that can be thought of linearly or as a coherent entity — like dates, first and last name, or, to some extent, ZIP, city, and state or credit card details fields — having more than one field per line can work.
During testing, having 2–3 inputs on a single line didn’t cause issues if they logically belonged to the same single entity, as long as the overall form layout only consisted of a single column (note the distinction between “some lines having 2–3 fields per line” versus a “two-column form layout”).
However, it is important to keep in mind that these types of inputs come with a range of other design constraints that are more important to performance, and which have to be considered before deciding on a “multiple fields per line” design. These include auto-detecting city and state based on ZIP code, using a single full name field (eliminating the need for multiple fields per line), and matching the payment field sequence to how it’s printed on the physical card.
Help Users Comprehend the Form-Filling Process Quickly and Accurately
Most sites already have twice as many form fields as they need, which hampers their performance for users before they’ve even begun inputting their information.
While the total number of form fields should be reduced to as few as possible, it’s also important that these fields are laid out so that most users immediately grasp the overall process for how to fill out the form, by using a single-column layout.
Otherwise, users spend precious time trying to figure out the relationship among fields, or making errors with their inputs and having to correct them, instead of quickly moving forward in the checkout.
And yet 13% of e-commerce sites still use multi-column layouts.
This article presents the research findings from just 1 of the 667 UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” cart and checkout user experience.