Article overview

Form Field Usability: Avoid Multi-Column Layouts

· By · 38 comments ·

Don't use multi-column layouts for form fields.

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.

Click for full size. 5 different reading paths for form fields presented in a two-column layout.

When you use a two-column layout for form fields, you introduce the possibility of different interpretations. Are they related? Should I only fill out one column? Or both? Is there a certain sequence to the fields?

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.

(We’ve promised the test subjects full anonymity so the audio has been disabled. All data used are fake identities.)

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).

The before-mentioned eye tracking study also mentions date fields [day] [month] [year] as an instance where multi-column layouts are acceptable.

But otherwise, you should avoid multi-column layouts for form fields.

Vikas Vadlapatla March 9, 2011 Reply to this comment

Hi,
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!

Christian, Baymard Institute March 9, 2011 Reply to this comment

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.

Jocelyn Smith May 3, 2011 Reply to this comment

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

Christian, Baymard Institute June 4, 2012 Reply to this comment

Thanks for sharing. That’s a great study on multi-column readability.

Omar Bennani March 10, 2011 Reply to this comment

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.

Christian, Baymard Institute March 12, 2011 Reply to this comment

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.

Redfish March 14, 2011 Reply to this comment

I like multi-column forms. The use of fieldsets and visible borders, along with decent organization of fields, takes care of this.

Bogdan Pop March 14, 2011 Reply to this comment

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.

Bogdan Pop March 14, 2011 Reply to this comment

  • Liking not linking. Sorry for the typo.

Caroline Jarrett March 14, 2011 Reply to this comment

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.

Christian, Baymard Institute March 15, 2011 Reply to this comment

Great article, and lovely to hear that our findings align.
Thanks for sharing Caroline

Bogdan Pop March 14, 2011 Reply to this comment

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/

Eric March 14, 2011 Reply to this comment

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.

Christian, Baymard Institute March 15, 2011 Reply to this comment

Thanks for sharing Eric. Most basic form usability dosen’t outdate – while it’s 6 years old it’s still very relevant.

Christian, Baymard Institute March 15, 2011 Reply to this comment

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.

Aaron V March 15, 2011 Reply to this comment

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.

Christian, Baymard Institute March 16, 2011 Reply to this comment

Great reflections.

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

andrew boag March 15, 2011 Reply to this comment

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.

Christian, Baymard Institute March 15, 2011 Reply to this comment

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.

magenta4c March 18, 2011 Reply to this comment

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!!!

Webáruház készítés May 8, 2011 Reply to this comment

1 column is the best ;-)
I am using only 1 because it is easy.

Great, thanks.

Guy11288 September 1, 2011 Reply to this comment

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.

Syed July 18, 2012 Reply to this comment

I am in the same boat..any suggestion..?

Christian, Baymard Institute November 4, 2014 Reply to this comment

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

Badmonkey Botanicals September 21, 2011 Reply to this comment

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?

Craig Sullivan April 4, 2012 Reply to this comment

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:

http://linkli.st/optimiseordie/3WIyK

Jay June 8, 2012 Reply to this comment

What if the labels are contained within the form field itself? I think that would be an interesting study.

Christian, Baymard Institute November 4, 2014 Reply to this comment

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:
http://baymard.com/blog/false-simplicity
http://baymard.com/blog/mobile-forms-avoid-inline-labels

Syed July 18, 2012 Reply to this comment

What about complex CRM forms where space is a constraint?

Christian, Baymard Institute November 4, 2014 Reply to this comment

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.

R'phael Spindel February 19, 2013 Reply to this comment

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?

Hugh Madison April 15, 2013 Reply to this comment

hmm interesting research on interpretations )

John F July 8, 2014 Reply to this comment

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?

Thanks.

  • In need of advice or input. :) *

Christian, Baymard Institute November 4, 2014 Reply to this comment

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.

Root Beer July 9, 2014 Reply to this comment

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.

Christian, Baymard Institute November 4, 2014 Reply to this comment

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.

Johnny Boy November 3, 2014 Reply to this comment

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

Christian, Baymard Institute November 4, 2014 Reply to this comment

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.

Post a comment!

Close overlay