9

We are developing a price comparison website and are struggling with the attached form.

The registration process is:

  1. Eshop owner clicks on "Add eshop".
  2. Registration page 1 shows, with the basic info (name, eshop website and URL for XML file).
  3. "Set password" verification email is sent to eshop owner.
  4. After setting password on a separate page a "Thank you + Registration page 2" shows -> the form mockup attached.

In this form we are asking for more detailed information about the store. Since we have only the minimum viable product (MVP) done, the website is not fully functional, so we need to grab as much information from the eshop owner as we can during the registration and that's why the form is so excessive.

The question is: should the form should be separated into several entities, or should be left like this? I mean, on one hand we need all this information, but on the other it could scare away potential users.

I would prefer to have all these setting on one page. However my colleagues see it differently. Should we leave it like this, or should we separate the form into several pages? If separated, wouldn't it be demotivational for potential users to keep swapping between all the pages?

Registration page 2

  • Thanks everybody for amazing answers, they were all very helpful!! The way I will do it will be probably split it into two pages; 1 for delivery and payment options, since they take circa 70% and 2 for everything else. – Cheree Jun 10 '16 at 11:15
  • aside from the issue of separate pages or not, the design of the form needs serious work. There are wrong controls, alignments etc that need fixed first. – colmcq Mar 14 '18 at 13:31
10

Good question without a definitive answer.

In short, both long page and divided page has their advantages and disadvantages. You will not make a big mistake by using either one of them. Recently I had one publication on that specific topic which was accepted at the CHI conference which is the top HCI conference. Here is a link to download the article. Basically, I used brain scanner and many other performance metrics (time to complete, mental workload and emotional valence questionnaires) to evaluate the difference between all forms on one page and divided on separate pages in an online insurance claim process.

I will summarize the research:

There was no significant difference in time to complete the pages. Single page approach was preferred by most participants - 8, while divided page by 6. Other performance measures, like words written, error rates were not significant.

Divided pages (forms divided on multiple pages)

  • significantly higher mental workload - both objective measure (brain scanner) and subjective (NASA-TLX)
  • users can't immediately check what information they've entered on the previous pages which creates mental workload.
  • participants said that divided pages was more pleasurable to fill (not significant). measured by the emotional valence questionnaire - SAM

Long page (all forms on one page):

  • there was significantly less mental workload. It required less attentional resources.
  • users felt more negative (not significant) while filling all forms in one page
  • All the information that the user has entered is available on single page, so it is easy to recheck at the end of the process
  • Users have the ability to choose from which form field to start filling in information

In short, divided pages required more attentional resources or more workload to complete but were viewed more positively by participants compared to all forms on one page. The reason why divided pages required more workload is that when users fill in forms they always recheck what information they've entered. The additional workload was created because they wondered what information they've inputted 1 or 2 steps back. The advantage of the single page approach is that all the information is on that page and there is no need to go back 1 page to check the entered information, and users can select with which field to start filling. For example, some users started inputting info in the 3 input field.

Recommendations:

  • of course try to exclude as much fields as you can
  • put help tooltips for some of the questions (need to research where users have uncertainties)
  • group questions on topic and follow logical order of questions. Try to think more on which questions to show first and which last, etc.
  • use default values wherever you can
  • use familiar attributes for the name fields (fname, lname, etc) to support browser autofill
  • avoid making users to refill the same information again (save it while they fill it)
  • use inline validation for errors (think you use in your sketch)
  • highlight the active form field (make the background of the input field element grey so its contrasting so that the users can visually find their current form field).

Conclusion

It's not an easy decision to choose between the two approaches but the best option is to test them in your specific context. Both have advantages and disadvantages.

  • 1
    This is a really cool answer with great documentation. However, I strongly disagree with your both are good statement. Furthermore, your answer includes the reason why this specific form should be in separate page rather than an incredibly long, impossible to fill without errors form. Still, great answer, +10 if I could and congrats on your publication :) – Devin Jun 10 '16 at 15:19
  • 1
    Thanks for the good words @Devin. I've removed both are good because it makes no sense :) – Kristiyan Lukanov Jun 10 '16 at 16:06
2

If registration 2 page is just optional information i think you should split that information into multiple pages. This is what we called progressive disclosure. This helps the user to digest the information better and it doesn't feel claustrophobic with a screen full of options.

You can use a wizard style design with a few important points.

  1. Let the user know how long is going to take to fill this info
  2. Give the user feedback every time they accomplished something
  3. Be clear about why this is important and if is not let them skip
  4. Make sure you mark the Required fields if there's one.

There's a lot of studies and info you can find online about this topic online. Google, apple and a lot of new companies are using this methodology to get things done. The best example i can give you is Turbo tax.

this is just my opinion

2

I think the best solution is to split that long form into steps. From users perspective is easier and less scarier for them to handle a form like this.

Also it’s easier for user to get lost in a long form and it’s very difficult to present error, especially when there are multiple errors.

In e-commerce this “step-by-step” behaviour is well known and the user feels that he/she will have to complete only 2-3 steps instead of a long endless form.

Here’s a nice article about this topic (I think it was shared before in similar situations ): Pagination in Web Forms

NOTE: if you decide to go with a split into several pages you should include a progress indicator, so people know much they have left to do;

2

Lots of good advice here. It probably boils down to the following:

Are there lots of fields where the potential for making errors is high?

If you have a long page you cannot rely on inline error validation, because your users may not visit any of the fields and may simply jump to the primary call to action.

If they do this the system will need to report all the errors in the form and the user will need to scroll up and down to locate them, which may be very frustrating for the user.

At least with a wizard approach the number of fields can be split into much smaller groups, and you can trigger the validation for the fields on the Wizard Next/Previous buttons, so if they skip any fields you can suppress the wizard navigation until the errors are resolved.

Thinking about the error states often helps your design thinking.

2

On a long form like this where there are multiple groups of questions there is a good chance something might go wrong for the user.

I would focus on asking one thing per page, eg "Your contact details" followed by "How would you like to receive your parcel".

Having only one thing on a page gives you more space to explain why you are asking for certain information, helps people to understand what they’re being asked to do, find their way through an unfamiliar process, use the service on a mobile device and recover easily from form errors.

I'd recommend taking a look at this post based on research from gov.uk https://designnotes.blog.gov.uk/2015/07/03/one-thing-per-page/

0

depends on length of process. Your form you demonstrate is far too long and would not test well I venture to suggest. As well as being conceptually very hard to understand it also is not saveable until the final submit (unless its stateless, which I doubt)

Having said that, one page approaches for certain things can work, for example payment screens in Ecommerce

https://colmcqux.wordpress.com/single-vs-multi-step-checkout/

"Results: Dropouts down by ~20%; revenue per transaction up by ~18%"

But in your case it really depends on the length and amount of different concepts you're forcing the user through; page for X page for Y is easier to follow than one big list

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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