2

For a form consisting of about 100 fields that are divided into 6 categories and none of the fields sets are dependent on previous ones (i.e. not a checkout process or the alike)... When should you create steps instead of using a single page layout? Keep in mind that we want to give the user the freedom of filling the form in any order he/she wants.

Just to clarify, this is a form for which prospective students of high schools and colleges already aproved in selection must fill. A gigantic form with personal data.

2

2 Answers 2

3

A gigantic form will take some time to fill up whether you throw it out in a single page or break it down for the user.

The advantage of breaking it down is that you make it 'feel' less daunting a task. You are providing some guidance to the user and structuring the form to make it as frictionless as possible.

  • Divide the form into sections. You are asking for personal data for admission purpose, you can group the items together in a logical fashion.
  • Depending on the number of fields per section, you can have multiple sections or single section per view
  • Use a wizard (tab) layout with the section names are the labels for the tabs to make for easier back and forth navigation
  • Try to make the experience smooth - use subtle animation between tab changes and maybe use ajax for the form so the page is not reloading every time.
2
  • 1
    haha we're on the same page! yay!
    – rubysoho
    Jul 12, 2013 at 18:21
  • @rubysoho hah :)
    – rk.
    Jul 12, 2013 at 18:58
1

For 6 categories, you should put them into stages/steps even though the information being asked are not dependent on each other. This is because we as humans process information better in chunks. Even though there may not be relationships between the data being entered, you should be able to figure out a logical way to order them so that it makes sense to the prospective student.

Also, you can always provide the 'back' functionality so they can fill out one part first and go back and fill out another part (as you had mentioned as a specification).

You can still achieve the above within a single page layout. For example, you could design them so each categories are a 'slide'.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

mockup

download bmml source

At the very end when they have completed all fields, they can press SUBMIT. Otherwise if fields are missing, an error message should appear in the right sidebar.

mockup

download bmml source

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