Two column form layout

7 Oct 2008 - 2:47pm
4 years ago
15 replies
4552 reads
Hugh Griffith
2007

Hello everyone,

Does anyone know of any data, or have an opinion, about laying out forms in
multiple columns?

At my job, the business is constantly complaining about all the white space
on the right side of a long form when I lay it out in the standard way.
Arranging the labels and inputs into two columns, flowing from left to
right, seems an obvious solution to the problem. (I lay out my forms with
the labels above the inputs, by the way.)

So in this scenario, a form would look like this:

Label Label
[input] [input]

Label Label
[input] [input]

Any feedback would be greatly appreciated!

Thanks,

Hugh Griffith
Interaction Designer
www.design-spectacle.com

PS. I plan on testing this soon in our Ulab. I'll share the results when I'm
done.

Comments

8 Oct 2008 - 2:49am
Yohan Creemers
2008

A more obvious solution to your problem is:
Label [input]
Label [input]

The lay-out of the form should contribute to the understanding of the
form.

I see no problem or in putting related fields in columns
Phone Extension
[input] [input]

or in putting tabular data in columns:
http://www.ylab.nl/images/portfolio/litecad-timesheet.png
http://www.ylab.nl/images/portfolio/litecad-transactions.png

- Yohan

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=34016

8 Oct 2008 - 8:50am
Oleh Kovalchuke
2006

Hello Hugh,

It depends on the task:

If primary task is filling new form field after field from linear data
stream (copying data from paper form, for example), choose single column
layout (with labels on top).

If form processing is non-linear (as in editing partially filled forms) or
copying data from a source with a different data flow from online form,
choose layout with multiple columns to increase information density/reduce
information hunting. You might also consider three column layout, if data
presented is uniform (multiple date fields, for example).

If data comparison is important (as in Yohan's examples), present data in
tables.

I am very much interested in the results of your usability study, by the
way.

--
Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

On Tue, Oct 7, 2008 at 2:47 PM, Hugh Griffith <hgriffith at vfs.com> wrote:

> Hello everyone,
>
> Does anyone know of any data, or have an opinion, about laying out forms in
> multiple columns?
>
> At my job, the business is constantly complaining about all the white space
> on the right side of a long form when I lay it out in the standard way.
> Arranging the labels and inputs into two columns, flowing from left to
> right, seems an obvious solution to the problem. (I lay out my forms with
> the labels above the inputs, by the way.)
>
> So in this scenario, a form would look like this:
>
> Label Label
> [input] [input]
>
> Label Label
> [input] [input]
>
>
> Any feedback would be greatly appreciated!
>
> Thanks,
>
> Hugh Griffith
> Interaction Designer
> www.design-spectacle.com
>
> PS. I plan on testing this soon in our Ulab. I'll share the results when
> I'm
> done.
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

8 Oct 2008 - 12:38pm
Caroline Jarrett
2007

>From Hugh Griffith

> Does anyone know of any data, or have an opinion, about laying out forms
in multiple columns?

I'm really keen to see your results from your testing.

Meanwhile, I wrote an article called "Two column forms are best avoided"
http://www.usabilitynews.com/news/article2992.asp

so you can guess from the title that I advise against two-column (or extra
column) layouts.

There's a longer version of the same views in our book, available from
mid-November:
"Forms that work: designing web forms for usability" (Jarrett and Gaffney)

http://www.amazon.com/Forms-that-Work-Interactive-Technologies/dp/1558607102
/ref=pd_bbs_1?ie=UTF8&s=books&qid=1223486164&sr=8-1
http://tinyurl.com/3mo3sl

By the way, I completely agree with Oleg's observations:
- you need to match the layout of the online form to the layout of the
source material
- if users are using the form all day for data entry, then there's benefit
in crushing as many data entry fields onto the form as possible.

I'm not quite so sure about tables. I've seen them work well for trained
users in intensive tasks, but I've also seen them fail badly for
approach-and-use users on occasional tasks.

Best
Caroline Jarrett

8 Oct 2008 - 1:30pm
Oleh Kovalchuke
2006

I should clarify that the recommendation, I wrote, was for data processing
application, where pretty much the same forms are used all day long, not for
casual web registration forms.

Ah, context...

Still interested in usability results.

--
Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

On Wed, Oct 8, 2008 at 8:50 AM, Oleh Kovalchuke <tangospring at gmail.com>wrote:

> Hello Hugh,
>
> It depends on the task:
>
> If primary task is filling new form field after field from linear data
> stream (copying data from paper form, for example), choose single column
> layout (with labels on top).
>
> If form processing is non-linear (as in editing partially filled forms) or
> copying data from a source with a different data flow from online form,
> choose layout with multiple columns to increase information density/reduce
> information hunting. You might also consider three column layout, if data
> presented is uniform (multiple date fields, for example).
>
> If data comparison is important (as in Yohan's examples), present data in
> tables.
>
> I am very much interested in the results of your usability study, by the
> way.
>
> --
> Oleh Kovalchuke
> Interaction Design is design of time
> http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm
>
>

29 Mar 2010 - 4:52am
Tony Wu
2010

I think Oleh's suggestion again proves that the best response is always "it depends".

I used to have (until five minutes ago) a strong feeling against two-column form, but Oleh's right: it does depend on the application and the process that one is going through.

I have been advising my client to use the 1-column layout as suppose to the 2-column layout that he is quite interested in having, until I realised, that the particular process we are trying to have people going through does require an overview of as much information as possible.

Having said that, it's still important that the basic design principles are used here to make sure there is sufficient spacing to fit between each field, and as guidance for which direction they should read (across and down vs. down and across).

8 Oct 2008 - 4:09pm
Hugh Griffith
2007

Thanks so much for all of your input. It's very helpful!

Currently, I'm designing a registration form for a health-care related web
site where users will be asked to provide a lot of information like doctor
and insurance info. I think the best approach here is to stick with a single
column, but group certain fields (like first, middle, and last name)
together on one line where I can.

In the past I've worked on internal apps that had huge forms, and I utilized
the two, or even three, column layouts to maximize space. We've never done
any formal testing on them, but so far there haven't been any complaints
from users that I've heard. However, I do plan to test these types of forms
in the future as well.

Like I said, I'll share results from both tests when they happen.

Thanks again!

Hugh

On Wed, Oct 8, 2008 at 12:30 PM, Oleh Kovalchuke <tangospring at gmail.com>wrote:

> I should clarify that the recommendation, I wrote, was for data processing
> application, where pretty much the same forms are used all day long, not for
> casual web registration forms.
>
> Ah, context...
>
> Still interested in usability results.
>
> --
> Oleh Kovalchuke
> Interaction Design is design of time
> http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm
>
> On Wed, Oct 8, 2008 at 8:50 AM, Oleh Kovalchuke <tangospring at gmail.com>wrote:
>
>> Hello Hugh,
>>
>> It depends on the task:
>>
>> If primary task is filling new form field after field from linear data
>> stream (copying data from paper form, for example), choose single column
>> layout (with labels on top).
>>
>> If form processing is non-linear (as in editing partially filled forms) or
>> copying data from a source with a different data flow from online form,
>> choose layout with multiple columns to increase information density/reduce
>> information hunting. You might also consider three column layout, if data
>> presented is uniform (multiple date fields, for example).
>>
>> If data comparison is important (as in Yohan's examples), present data in
>> tables.
>>
>> I am very much interested in the results of your usability study, by the
>> way.
>>
>> --
>> Oleh Kovalchuke
>> Interaction Design is design of time
>> http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm
>>
>>

9 Oct 2008 - 9:39am
Jack L. Moffett
2005

Caroline,

I read your column, and I agree with your reasoning to a point.
However, you seem to be assuming that the two columns run the length
of the page. I design a lot of forms for applications—not really web
forms, but most of the rules of form design should apply the same. I
use a two column layout to make the most of the screen real estate.
But I don't do it blindly. I logically group the fields and I section
the form. In this way, the two columns don't run the length of the
page, and fields are grouped in a meaningful way. And, as pointed out
earlier, the fields are not filled out sequentially, so having more
fit on the screen at one time makes them easier to find.

So, while your reasoning does apply in many cases (and certainly in
the example given at the beginning of your article), I can't agree
with the statement that "two-column forms are best avoided."

Best,
Jack

On Oct 8, 2008, at 1:38 PM, Caroline Jarrett wrote:

>> From Hugh Griffith
>
>> Does anyone know of any data, or have an opinion, about laying out
>> forms
> in multiple columns?
>
> Meanwhile, I wrote an article called "Two column forms are best
> avoided"
> http://www.usabilitynews.com/news/article2992.asp
>
> so you can guess from the title that I advise against two-column (or
> extra
> column) layouts.

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

To design is much more than simply
to assemble, to order, or even to edit;
it is to add value and meaning,
to illuminate, to simplify, to clarify,
to modify, to dignify, to dramatize,
to persuade, and perhaps even to amuse.

- Paul Rand

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

It's not about the world of design;
it's about the design of the world.

- Bruce Mau

9 Oct 2008 - 11:22am
Caroline Jarrett
2007

Jack Moffett
>
> I read your column, and I agree with your reasoning to a point.

Good!

> However, you seem to be assuming that the two columns run the length of
the page.

Yes, I was pretty much assuming that.

> I design a lot of forms for applications-not really web
> forms, but most of the rules of form design should apply the same. I
> use a two column layout to make the most of the screen real estate.
> But I don't do it blindly. I logically group the fields and I section
> the form. In this way, the two columns don't run the length of the
> page, and fields are grouped in a meaningful way. And, as pointed out
> earlier, the fields are not filled out sequentially, so having more
> fit on the screen at one time makes them easier to find.
>
> So, while your reasoning does apply in many cases (and certainly in
> the example given at the beginning of your article), I can't agree
> with the statement that "two-column forms are best avoided."

Applications are an interesting complication. My experience has been that
users can either perceive them as 'this is really an application' or as
'this is really a web page'. (I'm sure that most people don't articulate
those thoughts, I'm just referring to the subliminal way in which users
respond).

My advice on avoiding two-column layouts on paper came from watching lots
and lots of users being confused by them. On a typical web form, it's
astonishing how little they look at outside of the primary column of fields
to fill in.

And now, applications. I'd love to have a chance to do some eye-tracking on
applications. My gut feel is that there's a greater tendency for users to
take in the whole of the page when it presents itself as an application
page. In the olden days, when paper and applications was all that I did, I
recall quite a lot of confusing application layouts but now you come to
mention it, I don't recall specifically two-column application layouts much.
They tended to be more all over the place.

/aside - the columnist's lament
In terms of the bald statement about 'two-column forms are best avoided' -
this is a perennial problem for me as a columnist/provider of advice. If I
come out with a moderately strong, straightforward statement then I get
dinged (and not inappropriately) for failing to consider some of the
complications. If I write another 'it depends on' piece, then I get dinged
(and not inappropriately) for being wishy-washy and writing 'it depends'.
/end aside

And now back to me learning more: It would be great to see some examples of
your two-column application layouts. Have you had the opportunity to test
any of them with users?

Best
Caroline Jarrett

----------book out mid-November
"Forms that work: designing web forms for usability" (Jarrett and Gaffney)

http://www.amazon.com/Forms-that-Work-Interactive-Technologies/dp/1558607102
/ref=pd_bbs_1?ie=UTF8&s=books&qid=1223486164&sr=8-1

http://tinyurl.com/3mo3sl

9 Oct 2008 - 12:02pm
Jack L. Moffett
2005

On Oct 9, 2008, at 12:22 PM, Caroline Jarrett wrote:

> Applications are an interesting complication. My experience has been
> that
> users can either perceive them as 'this is really an application' or
> as
> 'this is really a web page'. (I'm sure that most people don't
> articulate
> those thoughts, I'm just referring to the subliminal way in which
> users
> respond).

To clarify, I work on both web and desktop applications. In both
cases, one of the main tasks of the user is filling out forms. These
are data logging and reporting type tasks. So, it is very much a form
within the context of an application—not just application screens that
include form widgets.

> ...I recall quite a lot of confusing application layouts but now you
> come to
> mention it, I don't recall specifically two-column application
> layouts much.
> They tended to be more all over the place.

Have you ever tested a well-designed two-column layout against a well-
designed one-column layout? And of course, the next question is, how
do you first assure that you have "well-designed" forms to test
against each other? And, if the two-column form fails, is there such a
thing as a "well-designed" two-column form to begin with? Obviously, I
would argue that there is.

> /aside - the columnist's lament

I completely understand. "Two-column forms are best avoided" is a much
better title than "Two-column forms are best avoided for web forms
that are sequential, single-session interactions." That's the
difference between a column and a CHI paper. ;)

> And now back to me learning more: It would be great to see some
> examples of
> your two-column application layouts. Have you had the opportunity to
> test
> any of them with users?

I'll see if I can dig up an example of one of my screens that I can
share. I have had the opportunity to observe people using the forms in
field trials, but no formal testing. The feedback and observations
from those trials, however, was geared more towards bigger interaction
issues and functionality—not so much about the details of layout. At
the least, there was nothing especially annoying about the layout to
cause them to comment, and no unexpected behavior I noticed that I
linked to the layout.

Best,
Jack

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

You could design a process to catch
everything, but then you're overprocessing.
You kill creativity. You kill productivity.
By definition, a culture like ours that
drives innovation is managed chaos.

-Alex Lee
President, OXO International

9 Oct 2008 - 12:16pm
Todd Warfel
2003

On Oct 9, 2008, at 12:22 PM, Caroline Jarrett wrote:

> And now, applications. I'd love to have a chance to do some eye-
> tracking on applications.

Well, we haven't done eye tracking studies on this, but have used a
two column approach a number of times for applications. It's not so
much the two columns that makes or breaks it as it is the visual
design of the thing. When we do a two column approach, we use the
fieldset attribute in HTML and place a visual border around the
sections. This makes it pretty clear that these are "sections" of the
application.

We have done usability testing, not eye-tracking, and found that this
model has been very successful a number of times, increasing
efficiency, accuracy, and satisfaction.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

9 Oct 2008 - 4:01pm
Marilyn Matty
2008

I haven't done any formal studies of 2 column layouts either, but all the
white space as well as having to scroll are personally annoying when I have
to deal with the single column format.
Marilyn

10 Oct 2008 - 3:49pm
Jack L. Moffett
2005

Caroline,

This is a simple example, but it is a screen that I was able to
easily scrub for public display.

http://gallery.me.com/jackmoffett#100025/JobForm

Best,
Jack

Caroline Jennet wrote:
"And now back to me learning more: It would be great to see some
examples of your two-column application layouts. Have you had the
opportunity to test any of them with users?"

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=34016

10 Oct 2008 - 3:55pm
Jack L. Moffett
2005

Oops. My link broke. Let me try that again.

http://gallery.me.com/jackmoffett#100025/JobForm

And Caroline, I apologize for somehow getting your last name wrong on
the quote.

Jack

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

If there's anything more annoying
than a machine that won't do what you want,
it's a machine that won't do what you want
and has been programmed to behave
as though it likes you.

- Don Norman

9 Oct 2008 - 4:59pm
Markus Nordin
2008

I also agree with the general idea that two columns would work nicely,
if grouping them logically by fieldset for both visual and code
understanding.

I would like to bring into the discussion in which order the fields
should be ordered, when using a two column layout. Let me draw you an
example, and number the input fields in the order they will be focused
when tabbing through them.

[input 1] [input 4]
[input 2] [input 5]
[input 3] [input 6]

I would personally find this solution to be more fitting then using a
1, 4, 2, 5, 3, 6-approach. I hadn't payed this issue any attention
what so ever until stumbling upon a signup form which used just that
(the latter) and I remember feeling it was a bit weird.

But that's just my personal input, and I haven't tested or made any
queries about it at all.
Markus

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=34016

9 Oct 2008 - 5:01pm
Anonymous

Hi all - great discussion. I've designed a one-column presentation -
in an application and am currently designing a two-column screen in
an application. The decision to go with one-column was based on the
mental model the users had of their paper form - where they simply
moved down the page to fill in more data. The decision to go with
two-columns was to increase information density/reduce information
hunting as Oleh mentioned earlier. Testing will be done next year -
I'll keep you posted on results.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=34016

Syndicate content Get the feed