e commerce - Keep long form, or separate into multiple steps?

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?

Answer

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.