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 user misinterpretation.
The consequences of using a multi-column form layout include users skipping form 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
At American Eagle, a multi-column form is used for updating credit card info. Here, a user is seen filling out all the billing address info, completely overlooking the credit card fields in the left-hand column.
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.
When testing multi-column forms, users often skipped fields in some columns. Here, at Walmart, the user jumped from “Last Name” in column one to “Address 1” in column two and then completed the entire second column.
Different users will misinterpret how to fill out multi-column forms in a variety of different ways.
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.
When form fields were presented in two columns, users during testing had difficulties understanding their relationship. This form was interpreted in three different ways: 1) all the form fields should be completed in order to create an account, 2) “email” and the right column should be completed to use guest checkout, or 3) either the left or right column should be filled out.
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.
A single-column layout at Northern Tool eliminates the chance users will misinterpret the form-filling process due to multiple columns.
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.
Users rarely had issues when some of the fields were presented in the same row if those fields were for inputs that would generally be thought of in a linear fashion, as seen here in eye-tracking gaze plot data at REI. Users had minimal issues interpreting fields for credit card details (first image), name fields, or city, state, and ZIP fields (second image) when placed in multiple columns.
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 by Avoiding This Multi-Column Form UX Mistake
At Crutchfield a single-column form layout is used, reducing ambiguity for users.
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 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.
