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:
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
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.
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.
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 850+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” cart and checkout user experience.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
This is quite an interesting study.
Now can you comment or point me to studies on layouts like in the newspaper where you have text in two columns. Is it better than the normal one page layout.
Nielsen has some views on F-pattern.(http://www.useit.com/alertbox/reading_pattern.html)
But it doesn’t really cover the two-column reading problem!
Hi Vikas, Thanks. I’ll try and see if I have some bookmarks in that regard.
As we tested checkout forms I can only attest to form fields in two columns and not text. I believe that much of the problem is because the user have to interact with form fields and therefor need to be absolutely sure of their relation. Since there is a less direct “interaction” with text I’m not sure the problem is nearly as prevalent when reading.
If you’re still looking for this information, I just came across a study that you will be interested in. They compare readability for different numbers of columns and different text justifications. http://psychology.wichita.edu/surl/usabilitynews/72/columns.asp
Thanks for sharing. That’s a great study on multi-column readability.
Hi, I’d be curious if you found this also applies to pre-filled forms. What I mean is, not a situation where a user is purely giving information (like a shipping address) but where they’re changing existing information. An example would be application settings.
Hi Omar, very interesting point. As we only tested checkout processes where the fields are empty I can’t really say.
The multiple ways of interpreting how the form fields relate might still be there, but probably it isn’t as problematic as the user will most likely scan the page for a single field (containing the info that he wants to change). But for scanning purposes two columns will always require result in a more scattered eye-fixation path than a single column, simply because the eye-gaze also have to travel both vertical and horizontal.
I like multi-column forms. The use of fieldsets and visible borders, along with decent organization of fields, takes care of this.
This is not an issue of linking. The fact is that the more columns and the more form elements ( labels and inputs ) are dispersed and away from each other, eye movement goes up, time required to finish the job also increases and unfortunately conversion rates too.
Whether or not you like them, the research presented in this article points to it being a bad decision to use them.
Thanks for a great post with recent evidence.
I’ve been campaigning against two-column layouts for some years now. Example: my article from 2006: “Two-column layouts are best avoided” http://www.usabilitynews.com/news/article2992.asp
My observations totally align with yours. Two-column layouts create problematic reading orders. Don’t do them. And don’t even think about more columns.
Great article, and lovely to hear that our findings align.
Thanks for sharing Caroline
You should totally read Luke Wrobleski’s web form design filling in the blanks. fabulous book.
Also a very nice article with awesome comments with regard to form design: http://www.webia.info/articles/usability/forms-cant-live-with-them-cant-live-without-them/
I love Luke’s articles, another one is http://www.lukew.com/resources/articles/web_forms.html which is fairly older but still very relevant to the topic.
Thanks for sharing Eric. Most basic form usability dosen’t outdate – while it’s 6 years old it’s still very relevant.
Hi Bogdan, yes Luke is the man when it comes to form fields. If you want another book solely on forms then I would recommend “Forms That Work: Designing Web Forms for Usability”.
Thanks for sharing the article, it’s a great read.
Thanks for sharing, this is quite interesting. I do agree that if you have a single form, then a one column layout is easier to use. But in this case we have to separate forms in an Option A / Option B situation.
“…even though there’s actually a dimmed “or” instruction between the two columns.”
First, the “or” is not dimmed, seems to be fairly bright purple actually. Second, there are two quite clear headers above each column: “New Customer?” and “Returning Customer”. Third, the first form only has two fields and then a sign in button, so clearly only for returning customers – a quick scan would reveal this (or so you would think – obviously what the designers thought anyway).
So one question is, what level of responsibility does the User have in all this to actually pay attention to what they are doing? It seems like the person didn’t bother to actually read anything, and simply started filling in form fields. Do we then absolve them of this responsibility and lay all issues where someone doesn’t “get it” at the foot of the design?
If the same design had been stacked vertically would it actually have made a difference? Logic would seem to say that if they didn’t read the headers in this case, they wouldn’t in a vertical layout either. But perhaps the mere fact of the vertical layout being easier to scan really does dramatically help? Or maybe simply having larger headers would also have solved the issue?
I do feel that as Users we have some level of obligation to pay attention to what we are doing, but I certainly do not believe in pawing off a bad design/experience on the user “not getting it”. That’s a bit crap and hopefully not what I was implying. As a designer I find this quite interesting (since sadly we are so rarely involved in this end of things), and the next time I encounter this scenario I would like to get it right.
I also would be interested to know how many users (if any) successfully negotiated example two compared to the those who didn’t.
It seems like the person didn’t bother to actually read anything, and simply started filling in form fields.
The overall behavior for all the test subjects was to focus very intensively on filling out the form fields with what they instinctively though was the right information and then only when in doubt they began to really read headlines and other text. I think it’s a general problem that users focus primarily at the task at hand; meaning the form field and the labels. If you look at the these images from the CX partners eye-tracking study you’ll see there is surprisingly little attention paid to the headlines, only form fields and labels get real attention: http://www.cxpartners.co.uk/wp-content/uploads/ebay-and-hotmail-heatmaps-with-messages.png http://www.cxpartners.co.uk/wp-content/uploads/mandatory-formm-fields-heatmap.png http://www.cxpartners.co.uk/wp-content/uploads/ebay-and-yahoo-sign-up-form-gaze-plot.png
In this specific case I see you point with an Option A / Option B situation, and I have no magic bullet solution. The “or” is a graphic element, which might get ignored because it looks like general styling. But it would certainly be interesting to test the exact same form just oriented in a vertical layout
Two column layouts are very useful in situations where the form requires dual-completion – two people applying for a mortgage for example. Clear use of design and structural elements can be used to clearly visuall distinguish the two columns.
I’m glad you point this out. Yes, there are a few edge cases where it isn’t necessarily hurtful to have two columns. The above is meant to be a guideline, not a rule.
I would suspect the main reason two column would work in you specific case is because there will be two identical set of form fields (Name 1, Name 2, etc.) – and the chance of misinterpreting how the two columns relate is therefor greatly reduced.
I think as much as we want to influence the user experience just by laying out the fields, we can’t ignore the role of the designer to put emphasis on items by colour, weight and general treatment.
a login box can look like a login box right beside the registration form when it gets the right treatment, but in wireframes they will have the same weight on the page.
i think the key to this is in the smooth collaboration of IA/UX and designer to make it work visually and to give components the expected – previously learned – look.
in the pet shop example there was just not enough structure. i think the main issue there was that the user was altogether overwhelmed by the amount of copy and the tiny radio buttons to choose the payment method.
if this page would have been broken up into payment method selection first and then a single screen for the fields to fill, the security code would have not been that lost amongst the clutter.
generally i agree, that vertical order on the web is the way to go, since pages scroll vertical. so don’t make the user go back up.
i think this needs be assessed on a case by case basis as everything in IA/UX.
there are best practices, but always exceptions to rules.
thanks for sharing!!!
1 column is the best ;-)
I am using only 1 because it is easy.
I work for a company that sells on web-based financial product. We have search pages with really long forms, up to 50+ control items sometimes. This allows the customer to search for all kinds of data.
I don’t like our forms because I think they are difficult to use. Is it advisable to group 20 checkboxes into 4 columns, 5 rows each? Or should we list everything in a single column thereby having a 2-screen long form? Right now many of the forms already require scrolling and that’s with horizontal (right aligned) labels too.
At what point does the one-column rule get put aside due to other usability issues, ie length of overall form, too much scrolling, etc? Assume for now we can’t reduce the number of control items on the form.
Also, this isn’t a web site, but rather a web app used internally by employees of the companies we sell the product to.
I am in the same boat..any suggestion..?
As mentioned in other comments as well the study tested forms that users would only visit once or visit infrequently (e.g. a checkout process or account signup). If a well defined group of repeat visitors will use the form a multi-column form design will have a much higher chance of success as users will have the time to learn the correct was to interpret to flow of the columns. For example, an intranet form for employees at a specific department. CRM forms will often fall into this category, as long as the only target audience for the page is an audience who will use it frequently (e.g. daily or weekly).
With that said I’d highly recommend looking into open-text search instead and then providing filtering options on the search results page. See our research findings for on-site search usability: http://baymard.com/research/ecommerce-search
It would have been nice if that information was written in the article, it does not explain the exception to the rule. In fact, there are no articles that I’ve been able to find written about CRM form design, where you can have up to 70 fields and there is no way around it. Your comment, here in the Q & A section, and in the questions section below is all I’ve been able to find.
I wish there would be an article dedicated to this. Should it only be 2 columns, or is 3 ok? and should the fields in left and right columns be top aligned? Which results in vertical gaps between fields when you have for example, a comment field on the left, and a checkbox field to the right of it. Or should the fields on the left and right columns have equal vertical spacing? There is a lot to this topic which I can find almost no information on.
Or should the fields in the left and right columns have equal vertical spacing?*
I agree, from a design perspective, one eye movement across the page is much better than the eye changing direction to see a different part of the page. Can you hand me the TV remote pls?
Form design is an art in itself – a discipline of conversion rate optimisation that looks to systematically weed out anything that could contribute to dropout rate.
Two column designs suck, because the eye, mouse and hand coordination required is higher friction. More people will leave – they probably won’t even use tabs (some of them) so they’ll be pushed through more workload.
There are many factors and I’ve compiled a complete list of articles here, which is all the stuff I’ve used to optimise forms for about 5 years. I have not failed to get more than 10% out of nearly every form I’ve optimised – and it’s a combination of usability testing, session recording, analytics and very very important – browser and mobile testing.
Hope you enjoy reading these – they took a while to curate, but they are only the best and most useful resources I can give you:
What if the labels are contained within the form field itself? I think that would be an interesting study.
Hi Jay, inline labels doesn’t address the issue of misinterpreting the flow and context of the field.
We tested inline labels and you can see some of the findings here:
What about complex CRM forms where space is a constraint?
The study tested forms that users would only visit once or visit infrequently (e.g. a checkout process or account signup). If a well defined group of repeat visitors will use the form a multi-column form design will have a much higher chance of success as users will have the time to learn the correct was to interpret to flow of the columns. For example, an intranet form for employees at a specific department. CRM forms will often fall into this category, as long as the only target audience for the page is an audience who will use it frequently (e.g. daily or weekly).
Sorry for not making this clear in the article.
What about ZIP/Postal field, it is short and should that be on same line as country, state?
Also what about CVV field in credit card forms?
It also is short and does it need to be on same line or alongside expiration date?
hmm interesting research on interpretations )
I can see/understand that a single column is the most straight forward use.
Is it possible to have or use 2 columns on any input form? I am by no means an expert, and I certainly don’t understand the flow examples listed above (e.g. I would not like using a site with navigation like #4 above).
It was stated in a comment above, “therefor need to be absolutely sure of their relation.” The examples in the video do a really poor job of this (IMO). Again, I’m no expert, but I would never put CCV in a separate column from the rest of the CC information. That seems simply illogical?
Is it possible to group data (logically), limit the scrolling, and have 2 columns? e.g. Column 1 has CC information (grouped, bounded or bordered), and next to it Column 2 has Address information (grouped, bounded, bordered)? Or Column 1 has Demographic data (name, date of birth, gender, veteran indicator, etc.) and Column 2 has Address?
If it doesn’t work, I guess it doesn’t work. Most checkout forms I have used are single column, and I understand the simplicity. I’m curious about other forms where there may be a lot more information than a typical checkout form.
Does the single column apply to viewing data as well?
Hi John, thank you for your question.
As mentioned above the study tested forms the user would only visit once or very infrequently (e.g. a checkout process or account signup). If a well defined group of repeat visitors will use the form (e.g. intranet form for employees at a specific department) a multi-column form design will have a much higher chance of success as those users will have the time to learn the correct way to interpret the flow of the columns.
For checkout forms where the columns are clearly styled as separately boxed groups of fields (as you describe) we still observed issues with both correctly interpreting and filling the form.
We don’t have any test data in reading/reviewing text in multiple columns.
Ran a test showing 2 different designs. 1 was single column and one was multi (4) where each column was a segment of related data. The test volunteers, who are people who would have to use this multiple times a day, all said they liked the multicolumn layout better because they could see more of the fields/data at a time even though they could not see ALL the fields/data on one screen.
It puzzled me because watching them do the data entry they went down column 1 and then had to scroll back to the top of the browser page to get to column 2, down column 2 and back to the top to get to column 3, etc. They didn’t find that frustrating or slow. But what they did find frustrating is when it came time to review the data they entered. They universally said the 1 column was harder to verify the data they entered. It was too much scrolling. We plan on having a left nav to quick link the user to a particular section but none of them tried using it.
Hi, thanks for sharing you test data. Much appreciated.
As mentioned in other comments, our study tested forms the user would only visit once or infrequently (e.g. a checkout process or account signup). In your case a well defined group of repeat visitors will use the form and will therefor have the time to learn the correct way to interpret the flow of the columns/fields.
Was the second user illiterate? Or simply a moron? New User/Existing User. Very easy things to read using our brains.
“Me go click here and thing don’t work good!” -User #2
“Me used to stuff and don’t like new thing!” -User #2
Try and sit down and watch some of you users interact with your website (or any website form that matter). You’ll find that when users are faced with task oriented webpages (i.e. a page with form fields on it) they focus intensely on the fields, and seldomly read any text or instructions (only as they get stuck). Multiple eyetracking studies confirm that users only scan webpages. In fact our latest large-scale eyetracing study of checkouts revealed that the avg. user mainly scan the field labels, even large headers are ignored.
The video proves only that you can scamming some zombies. The test forms are deliberately misleading and confused.
None the less, real user behavior when encountering live form designs from some large companies ;)
Most users aren’t “web professionals” (web designers, developers, working at web companies, etc.) like us, and have behaviors as seen above. For example, some users still double click on links: http://baymard.com/blog/users-double-click-online and we also commonly observe that a proportion of “real normal” users don’t know how to take a screenshot, etc.
This is a great example for ecommerce sites. What happens with enterprise backoffice applications though? We always tend to hear about consumer facing sites, and proper form design – but there are a ton of enterprise apps with the same issue – and single column forms simply won’t work. I run a company that builds software for energy utility companies, and we run into this all the time when designing our app – and I’ve yet to find someone that can provide a solid answer.
Hi Adkins, we mainly test e-commerce sites in large scale and therefor only report on the test results that applies there.
That being said, there’s a very big difference in B2C websites and e-commerce sites where we need to support a very large diverse userbase that will only encounter a checkout for once a every few weeks or even months (or just once ever).
For B2B enterprise apps it will be a much more well defined user group, using it on a daily basis. The ability to immediately understand the interface the first time around is in that context less important than how efficient the interface is for repeat daily usage.
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 email@example.com