Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a form with three sections, each with about a dozen fields:

  • General Product Information
  • Product Details
  • Shipping Options

Should I place all sections on a single page (thereby forcing the user to scroll), or should I break them into 3 separate pages that don't require scrolling?

I've read usability studies that suggest users prefer scrolling rather than navigating between pages, but I believe much of that preference is the result of browser latency when switching pages. Assuming the pages can be rendered without a server round-trip, which would be the preferred approach?

share|improve this question

8 Answers 8

up vote 10 down vote accepted

I'd break them into three pages, but not because of scrolling. Scrolling is not a problem. Having 30-40 fields thrown at you all at once is intimidating, it creates an immediate overload that may scare users off. Dealing with them one group at a time is much easier.

share|improve this answer
1  
Definitely. +1. –  jameswanless Apr 28 '11 at 17:39
4  
But with this approach the user needs to see that there are three pages (progress indicator). Otherwise it's even more frustrating than one long form. –  Phil Apr 28 '11 at 18:59

Our company has done many, many studies to try to determine if users prefer long forms or forms broken up into separate pages. We've found that it usually depends on the nature of the task.

Is filling out this form something that your users do on a daily basis, perhaps many times per day? A long form would probably be preferred in this case. Users that have to frequently perform a task want to tab through all fields and knock it out without having to wait for the browser to load separate pages.

Is this a form for new users, or will users only access this form on rare occasion? Breaking the form into several pages would probably be better for this scenario. As Vitaly said, you don't want to intimidate new users or those who are unfamiliar with a screen. Especially if they are not committed to using your service. After filling out a simple short form, they will be more likely to continue through the rest of the steps because they've already made a small time investment.

Even if you keep it on the same page, I agree with others that the sections should be visually distinct. Just make sure the tab order makes sense.

share|improve this answer
    
+1 With a good use of spacing and forms style to enhance the experience. A long page with lot of element for a day to day task is intersting because you can add anchors for jumping to important fields. Also user can use ctrl+F to find an element –  Marc D May 4 '11 at 9:27

either 3 pages or break your page into 3 visually distinct zones.

Of course it depends on the context of the form, but the method of splitting contents is a type of progressive disclosure or a way of reducing the cognitive burden on the user.

see here:

http://en.wikipedia.org/wiki/Progressive_disclosure

http://www.time-tripper.com/uipatterns/Progressive_Disclosure

c

share|improve this answer

3 visually distinct zones would be my choice. It seems that these 3 sections would be closely related. Progressive disclosure would be great too, like having chevron or link to expand/collapse content.

I think splitting these into separate pages would make these sections feel less related, as it seems they all pertain to the information for one product.

share|improve this answer

I think many of the comments above make really good points, but another issue that favours breaking the form into three separate pages is that of saving progress for later. Do you know that users will always complete the form in one session or is there evidence (explicit or implied) that users will have any reason to complete some of the form in one session and continue completion in a later session? If so then not only do you want the form broken into distinct groups, but the ability to save and return, if possible, might be a worthwhile consideration.

share|improve this answer

Any chance of offering a toggle?

All on one page | Multiple pages

That way the user can decide.

share|improve this answer
2  
Please don't :). Of all the decisions we dump on the user because we can't make up our minds this would be one of the most useless IMHO. I mean, come on, "How would you like this form served"? Why not let them rearrange the fields while we're at it? I hate the reference to Don't Make Me Think which seems to come up in every other question recently, but this one is just begging for it. –  Vitaly Mijiritsky Apr 29 '11 at 7:03
1  
Hey Vitaly. Why "useless"? –  gef05 Apr 29 '11 at 13:35
1  
Because users shouldn't be bothered with this.. Setting up the form they're going to fill? The whole point is to let them go through the form as quickly and accurately as possible, and asking them "would you like this form to be presented as one page or as three pages" seems completely pointless and harmful to me. Usually they aren't even aware that it matters. It's like asking them what typeface they prefer, or whether labels should be left- or right-aligned. The user just thinks "wtf? why should I care about that?". At least, that's what I think. –  Vitaly Mijiritsky Apr 29 '11 at 14:34
    
Thanks for the additional comments, Vitaly. –  gef05 Apr 29 '11 at 14:38
    
@Gary I apologize if it sounded offensive, I didn't mean to. –  Vitaly Mijiritsky Apr 29 '11 at 14:59

I would also like to add that it may depend on the number of steps in the entire process; these three sections cannot be considered independently if they do not function independently. If the process is already 5 steps, breaking this page into three separate sections may not be a good idea. Studies have shown that more steps translate into fewer conversions at a certain point, even if the steps are short.

share|improve this answer

I would use 3 in-page dialogs to gather the information and display it on the main page behind the dialogs once the submit through a ajax action. This gives you the ability to keep the input small with out having to navigate them between several pages.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.