Best design for long HTML input form

Question

I am developing a long HTML input form and discussing several design options:

• The duration of one page and users should scroll down.
• Several pages on which you need to click "next ..." for each new page
• Use the AJAX interface tab to organize the input of the form, but the tabs.

Any research or best practice here?

Answer 1

The usability.gov website of the US government is an interesting article about the results of a study on the use of the National Cancer Institute, but it doesn't exactly cover your options; he focuses more on the design of the form elements themselves.

Alsol, Dey Alexander Consulting A list of design usability resources that can help you.

Update . Looking at many other answers, there is a lot of “this is right, and the other options are wrong.” The final answer is that there is no one right approach; However, a little context can help you find a good solution for you. For example, splitting a form into several HTML pages might be ideal if you need to do a lot of validation and branching of solutions (for example, what appears on page 2 of the form depends entirely on the answer that the user asks the question on page 1), so as it allows you to keep the verification and branching code 100% on the server side. But even then there are alternative options that may be better in your case, but it is difficult to answer without knowing more about your case.

Answer 2

Firstly, a good article, as usual, Nielsen .

Good analysis can also be found in this post .

My own thoughts (many years of web application design plus gradient-level user interface design and usability in the past as the foundation):

1. Pros and Cons

Long HTML forms:

It's hard to navigate by clicking on the scroll bar (very narrow), but it's pretty easy to navigate with the mouse scroll wheel.

Multiple pages with the following "links"

Worst of two worlds. It is hard to click ("next" is a small goal), no random access to any part of the form (if that makes sense). This option is ONLY useful when you SHOULD fill out the form details in a specific order, and return is not an option.

Tab interface

This is a good option, but with disadvantages. The only drawback is that you don’t see all the information about the form at once (and you should remember what question was on the tab if you want to move back / forward).

2. Conclusion

So this means that between # 1 and # 3 depends on what your users find easier (scroll through the long vertical pages and click on the tabs).

3. Notes

• Please note that Windows GUIs use tabbed forms almost universally, so the most likely studies have shown that they are better suited for ease of use, and I think that at the moment I have no links to cie.

• Please note that the presence of "the ability to perform validation / verification / saving / etc." through calls AJAX is not particularly relevant to the above options - you can initiate an AJAX call as soon as any element that you select on the form loses / gets focus.

  The only advantage of the tabbed interface is that it is controlled by the user with the “I'm done with this set of form elements” signal, which can be reasonably done via JS without tabs and without the user telling you that he (for example, he is focusing on the next item).

  You can also disable the "not yet ready for you" form elements until all previous required elements are 100% complete.

4. Side notes

Why do you have such a long shape? One of the main points of usability research is that filling out any form is lengthy, difficult and hateful for users. Therefore, if you SHOULD NOT receive information, do not ask for it. This is especially true for registration forms - see Nielsen and other links.

Answer 3

As a user, I definitely prefer option 1.

Everything else is a lie. You think you have completed the necessary bureaucracy, and then even more.

On the other hand, as the owner of a website, you often want to trick a user into the registration process by seducing him with a simple 1-form screen.

Tab interfaces are invaluable for navigation, but they are IMOs that are almost never useful for serial input.

Answer 4

Allow users to scroll. If you use the “wizard” approach, it will be difficult for users to view or change already entered data.

Answer 5

I like option 1 best. You can group things logically into divs or fieldsets, then users can contribute to the form.

With multi-page forms, I’m always tired of clicking on and then returning to input.

Answer 6

For the long form used to enter data throughout the day, users quickly become familiar with the layout. Those who own the keyboard do not like to move around the controls with the mouse. If you set the order of the tabs and use a long vertical scroll, this may please people sending data. They will be able to fill in the data fields much faster than if they had to use the mouse to click between the tabs or Next buttons.

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

Answer 7

while I cannot cite any research, I have seen many many-part forms popular in use.

Some of the best online forms I've seen have always had:

• simple convenient check
• if it is too long, it had tabs (rather than scrolling endlessly).
• One great feature that I saw only once: save the form as a draft.

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

Answer 8

Combine 2 and 3.

Direct the user through the pages with the next and reverse buttons, and set some interface elements (the tabs are great, but also the inscriptions are like breadcrumbs ..) so that the user can go directly to the pages.

Answer 9

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

• Saving all input elements in a single, non-scrollable viewport is more convenient and less intimidating for most users.
• If there are some verification problems on a particular page, they are easier to see and fix if they are immediately visible on the screen.
• If you have dependencies between the various components, you have easy access to the previous information, which will be used for later information, and can ensure that they are entered in the correct order.
• If different parts can be completed at different times, this enables the user to fill out the form in stages.

However, you should ensure that you include some idea of ​​how much progress the user has made if the number of pages exceeds 2-3. You must make it so that you move forward and backward through the form. This definitely works more for you, but I think the best user experience for most.

If you decide to go with a tab. I would use AJAX and do validation in tab navigation. Thus, you check the tab by time and can more easily show validation errors. You can ensure that the tab order is respected only by enabling tabs if previous tabs are completed. I think your tabbed interface should degrade to a multi-page sort if javascript is not available.

Answer 10

I prefer (1) the ease of html scrolling with well-defined sections.

Many commercial websites prefer a rigged approach (2), perhaps a little (3), to allow customers to browse their options. (2) keeps everything on the screen, verifies that the user is reading what you want them to read.

Answer 11

We have similar forms in our company, and we get combinations of 2 and 3, that is, we show a tab at the top of the screen, also turn on the "Next" button to go to the next tab. Here are a few reasons / considerations, 1, use ajax to load each tab to make the form smaller on the client side, usually the user simply views / edits one or two tabs each time. 2, we can display different tabs when loading the form, based on a different scenario. 3, similar to 1, we can show / hide the database of tabs on user privileges. 4, some fields are related, therefore, when the previous tab is updated, we accordingly change some settings on another tab. 5, and sometimes the shape is too long to work if you don't split it into tabs.

Answer 12

with partial views, I basically build both # 1 and # 3, and get feedback from my users. My initial feeling is that # 3 will be more scalable as I add more and more data.

Answer 13

I wrote a plugin for this specific purpose - mainly for use in the healthcare and legal sectors - but it works for any long html form requirement:

Awesome Forms - multi-page jQuery HTML form plugin

Answer 14

I don’t like really long forms on one page. I find it difficult for them to navigate that it is difficult to find one field among many when you are trying to check your notes. Another thing I don’t like about them is that in some cases it may take some time to finish the form and what will you do if you are interrupted? Another possibility is that if the session is dropped, or the browser crashes, or the network goes down, or there is a nuclear war, etc.

I prefer tabs for each section with the next and previous buttons. Another thing I add is when the user moves from one section to another, he saves the data. Another option is to enable the auto save function.

Shorter forms are better, but sometimes you just need data and don't provide an alternative.