tags:

views:

262

answers:

12

i have a few choices here:

  1. single page long form and users have to scroll down
  2. multiple pages where you have to click "next . ." for each new page
  3. use some tab ajax interface http://www.noupe.com/javascript/37-great-ajax-css-tab-based-interfaces.html to organize the form inputs but tabs.

any research or best practice here?

A: 

while I can cite no research, I have seen many multi-part forms popular in use.

some of the best online forms that i've seen have always had:

  1. easy user friendly validation
  2. if overly long, it had tabs (rather than scrolling down endlessly)
  3. One nifty feature I've seen only once: to save the form as a draft.

That, I would say, should be the best practice :)

Here Be Wolves
The question asks for research or best practices; you open up with "while I can cite no research." Sort of defeats the purpose.
delfuego
Also, Ajax calls for validation/saving are doable in a long form as well.
DVK
+1  A: 

As a user, I definitely prefer Option 1.

Everything else is a lie. You think you have completed the required bureaucracy, and then there's more.

On the other hand, as a web site owner, you often want to trick a user into the registration process, tempting him with a simple Screen 1 of the form.

Tab interfaces are priceless for navigation, but are, IMO, almost never useful for sequential input.

Pavel Radzivilovsky
This is a bit black-and-white, Pavel; there are incredibly well-designed multi-page forms that don't have the issue you cite as their problem, because they have clear markers for how much of the form you've completed (and still have left to complete), and even contextual clues about the contents of the remaining sections that aren't on-page.
delfuego
A: 

Combine 2 and 3.

Guide the user thru the pages with next and back buttons, and set some interface elements (tab are great, but also labels as breadcrumbs..) to let the user jump directly to the pages.

PA
A: 

Let users scroll. If you use a "wizard" approach, users will have a hard time reviewing or modifying informations already entered.

Alsciende
A: 

I like option 1 the best. You can group things logically in divs or fieldsets then users can tab their way down the form.

With multi-page forms it's always annoying to have to click next then get back to typing.

John Boker
+3  A: 

The U.S. government's usability.gov site has an interesting article on the outcome of a National Cancer Institute study of form usability, but it doesn't exactly cover your options; it focuses more on the design of the form elements themselves.

Alsol, Dey Alexander Consulting has a list of form design usability resources that might be of help to you.

Update: Looking at a lot of the other answers, there's a lot of "this is right and the other options are wrong" going on here. The ultimate answer is that there is no one correct approach here; a bit of context can help guide you to a good solution for you, though. As an example, dividing a form into multiple HTML pages might be ideal if you have to do a good deal of validation and decision branching (e.g., what appears on page 2 of the form is entirely dependent on the answer a user gives to a question on page 1), since this allows you to keep the validation and branching code 100% server-side. But even then, there are alternative options that might be better in your case, but it's hard to answer without knowing more about your case.

delfuego
+1  A: 

First off, a good article is, as usual, Nielsen.

A good analysis also can be found in this post.

My own thoughts (many years of web app design plus grad level UI design and usability studies in the past as basis):

1. Pros and cons

Long HTML forms:

Hard to navigate by clicking on scroll bar (very narrow) but pretty easy to navigate using scroll wheel on a mouse.

Multiple pages with "next" links

Worst of both worlds. Hard to click ("next" is a small target), no random access to any part of the form (should it make sense). This option is ONLY useful when you MUST complete the form parts in specific order and going back is not an option.

Tab interface

This is a good option but with drawbacks. The only downside is not seeing all the form info at once (and you have to remember which question was on which tab if you want to navigate back/forth).

2. Conclusion

So it's a toss-up between #1 and #3 depending on what your users find easiest (scroll long vertical page vs. click on tabs).

3. Notes

  • Please note that Windows GUIs almost universally use tabbed forms, so most likely research showed that it is better usability wise, thought I don't have any references to cie at the moment.

  • Please note that having "opportunity to do validation/checking/saving/etc..." via AJAX calls has pretty much NOTHING to do with the choices above - you can initiate an AJAX call once any element you choose on a form looses/gains focus.

    The only benefit of the tabbed interface for that is that it's user-driven signal "I'm done with this set of form elements" - which can be intelligently done via JS without having the tabs and without the user telling you he's done explicitly (e.. he focuses on next element).

    You can also disable "not yet ready for you" form elements till all the preceding required elements are 100% filled out.

4. Side notes

Why exactly DO you have such a long form? One of the MAIN points of usability research is that filling out of any forms is long, hard and hateful for users. So, unless you MUST obtain the information, do not ask for it. This especially applies to registration forms - see Nielsen and other references.

DVK
A: 

Personally, I use the multi-page approach, but it could also be adapted to tabs. Here are a few of my reasons:

  1. Keeping all of the input elements in a single, non-scrollable viewport is more convenient and less intimidating for most users.
  2. If the particular page has some validation problems, they are easier to see and correct if they are immediately visible on the screen.
  3. If you have dependencies between the different components, you have easy access to the previous information to use for the later information and can ensure that they are entered in the correct order.
  4. If the various parts can be completed at different times, it makes it possible for the user to complete the form in stages.

That said, you should take care to ensure that you include some sense of how much progress the user has made if the number of pages is more than 2-3. You should make it possible to navigate both forwards and backwards through the form. It's definitely more work for you but, I think, a better user experience for most.

If you decide to go with a tabbed form. I would use AJAX and do validation on tab navigation. This way you're validating a tab-at-a-time and can more easily show validation errors. You can enforce tab-order by only enabling tabs as previous tabs have been completed, if necessary. I think that your tabbed interface ought to degrade to the multi-page variety if javascript isn't available.

tvanfosson
A: 

For a long form used to do data entry all day long, users quickly become familiar with the layout. Those who are proficient on the keyboard won't like navigating among the controls with a mouse. If you set the tab order and use a long vertically scrolling form, that may please the data entry people. They will be able to fill in the data fields much more quickly than if they have to use the mouse to click around among tabs or Next buttons.

The best of both worlds: One interesting hybrid I used allowed the user to choose the display style. Data entry people could view the long, vertically scrolling version. Other users who were just viewing the data (and possibly editing selected fields) could see a tabbed version that avoided vertical scrolling. We used personalization to set the user's preference for the default view.

DOK
A: 

I prefer (1) the simplicity of scrolling html with clearly defined sections.

Many commercial websites prefer the dumbed down approach of (2), with maybe a bit of (3) to allow customers to review their options. (2) keeps everything on-screen, makes sure the user is reading what you want them to read.

A: 

We have similar forms in our company, and we end up with the combinations of 2 and 3, that is, show the tab on the top of the screen, also include a Next button to go to the next tab. Here are some reasons/considerations, 1, use ajax to load each tab, to make the form smaller on client side, usually the user just view/edit one or two tabs each time. 2, we can show different tabs when the form is loaded, base on the different scenario. 3, similar to 1, we can show/hide some tabs base on the user’s privilege. 4, some fields are related, so when the previous tab is updated, we change some settings on the other tab accordingly. 5, and sometimes, the form is just too long to work with if you don’t separate into tabs.

Estelle
A: 

with partial views, i am basically building both #1 and #3 and am going to get feedback from my users. My initial feeling is that #3 is going to be more scalable as i add more and more data.

ooo