Form Field Usability: Avoid Multi-Column Layouts (13% Make This Form Usability Mistake)

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!

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.

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

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.

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/

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.

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

Great, thanks.

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

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

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

What about complex CRM forms where space is a constraint?

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?

Thanks.

• In need of advice or input. :) *

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.

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

The video proves only that you can scamming some zombies. The test forms are deliberately misleading and confused.

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.