Article overview

Form Field Usability: Avoid Multi-Column Layouts

· By · 29 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..?

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.

Syed July 18, 2012 Reply to this comment

What about complex CRM forms where space is a constraint?

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 )

Post a comment!

Close overlay