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.

Would it be better to have one long form, and let the user scroll down the page, or split the form into 2 or more pages?

Usability wise, one disadvantage I can think of for having multiple pages, is changing info from previous pages is more tedious than just scrolling up and changing the info.

Aside from that, will it make my form seem shorter if it is split to two pages, with each page being about the length of one screen? (Please see my image below)

Click for image

share|improve this question
1  
Now why didn't you just include the image in your post? You have enough rep to do so? Even if it is tall, it helps make stackexchange stand on its own two feet. And of course saves us an extra click :-) –  Marjan Venema Mar 24 '13 at 8:42
    
From your image, I would rather put the fields, their labels and the descriptions into one line instead of three lines. Like e.g. in this image. Doing it this way would reduce the scrolling and enhance the overview, IMHO. –  Uwe Keim Mar 24 '13 at 20:00
2  
@MarjanVenema: because I didnt want the image to fill the entire page. The image also needed to be viewed full size because the question is about the length of the form, I wanted you to see it 1:1 scale. –  Rich Mar 24 '13 at 22:40
add comment

5 Answers

up vote 14 down vote accepted

In ecommerce usability studies that I've reviewed related to checkout screens, what matters most to users in long forms is how many fields are visible on the screen at a time, not the total number of fields on the entire form. This finding was in a discussion of multi-column forms vs long scrolling forms.

Based on this research, (found here http://baymard.com/checkout-usability NOTE not free) the conclusion is that long scrolling forms are ok.

Based on your image, I'd say you are on good footing and should not break it into pages.

This question is really very much like another one already answered here http://stackoverflow.com/questions/1974925/best-design-for-a-long-html-input-form

share|improve this answer
2  
Nothing better than an answer backed up by facts. Shame those facts aren't free... –  nimrod Mar 24 '13 at 0:03
    
This aligns with my own experiences when testing forms. I have also seen multi-stage forms fare poorer than single step ones when the means of continuing between tabs or pages is unclear. –  Jimmy Breck-McKye Mar 24 '13 at 17:30
    
I think as long as the user knows the steps it takes to checkout, there shouldn't be any problems (for the sake of simplicity). Having other ambiguous and obscured elements is a different issue. Great link and feed back, plus 1 for that my good sir. –  Majed Oct 4 '13 at 13:35
add comment

From a data capture view, it is better to separate many questions into multiple pages. This is because each time the user clicks 'next' you can save the data and other contextual input such as timestamp. Also, this allows the user to exit and return to a survey. Or god-forbid if a server crashes you have some data saved.

However, because this question is asked in UX, you are asking about the user's perspective. It would be good to keep all these fields to one page because they are relevant fields. Maybe dim each section as a user finished it. Or highlight the current section.

Suggestion: Would it be possible to align text fields side by side, like first name on left and last name on right? That would shorten the look of it while still capturing all data fields.

Example: http://www.lukew.com/ff/entry.asp?941

share|improve this answer
    
I had considered having a 2 column layout, but then I read this: baymard.com/blog/avoid-multi-column-forms –  Rich Mar 24 '13 at 10:20
    
Hence you use background colors to group the items together inside boxes (divs). Also, proper spacing between and among the entities can help your user group the items better. –  rk. Mar 24 '13 at 11:43
add comment

There is another solution. Accordion can be used in order to make a form footprint smaller and provide some kind of grouping.

enter image description here

It is likely user will take such grouping as a quite natural and useful. BTW, in such a way it might be possible to provide some useful guidance.

share|improve this answer
    
I'm always in two minds about this solution. It makes for a better overview and a shorter scroll, but it involves more clicks in order to reveal the other sections (unless the user is tabbing and there's some JS thing to expand the next bit). Also, you never quite know how much is left to complete under each heading. –  Matt Gibson Oct 4 '13 at 14:48
add comment

Try to build a multi-step registration page. I mean you can try to break your registration into 3-4 steps as shown in below image. And all these steps can be made using JQuery Accordion. So it keeps your form clean and everything is on one page(means that the page does not load again). Also, the user feels that there are only 3-4 steps and not a long form(Although the entries he makes are same). There is this very good article on "Pagination in Web Forms" on this web-link.

enter image description here

share|improve this answer
    
Can you provide any data that multi-step registration pages are more optimal than the alternatives? –  Jimmy Breck-McKye Mar 24 '13 at 17:29
    
@Jimmy probably you can look at the article "Pagination in Web Forms "on this web-link –  Ankit Mar 24 '13 at 18:59
    
Could you add that link to the body of your answer? –  Jimmy Breck-McKye Mar 24 '13 at 20:33
add comment

In this particular case the form looks tall because of the single-column layout, i.e., labels on top of input fields, leaving an unused void of about half the available real estate to the right (while hiding half of the form under the fold).
If is was a two-column layout (labels to the left of inputs) then it wouldn't be so tall, it would fit nicely into a single page and this question wouldn't have been asked. Examples and help should be to the right of the input (making it a 3-column form in fact).
There is a generalized belief that single-column forms are more usable. This is not so. Additionally IMO single-column is worse in that usually calls for smaller font labels, which can be an issue for audiences with users aged 50+ years.
This form is 15 fields worth, it can't be regarded as daunting, and it can well fit in a single page.
Setting the fields in two columns with labels on top is not a good two-column layout. Such a layout would call for user confusion. You can set more then one field in a single row when the fields are related, like thus:
Vehicle: model [______] series [__] year [__]

As an additional comment, I'd avoid setting all the inputs with the same size. The input field size should convey a hint about how much data you expect. It also breaks the regularity that would call for user errors (the user looks at the supporting paper documents and when coming back to the form chooses a wrong target field because they are all so alike).

As of the question, I had an experience with online forms containing 100 to 200+ fields, and breaking them in pages was a must.
The forms were well organized in sections, so the sections were the "natural" splitting points for us. The splitting thing converted a really daunting form in a laborious-like task.
The user would focus on a section at a time, and the paging actions prevented the system to timeout the session, which is something that has to me accounted for in such cases: when the user submits after working for quite a while the system tells that the session expired a while ago.

share|improve this answer
add comment

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.