Long scrolling form or 3 compact pages?

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

Any chance of offering a toggle?

All on one page | Multiple pages

That way the user can decide.

Answer 7

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.

Answer 8

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.