Ideas on what to do with the white space available when hiding sections of a long form

Question

I'm currently working on a new user registration page containing two sections - personal details and account details. The account details section must remain hidden until the personal details section is complete. There are various reasons why we can't show the account details section at the same time as the personal details section, but while its hidden, there is a large amount of white space where it should be.

In terms of UX (and development) is it good practice to simply hide the white space? Its been suggested I use the space to display product info, but there are about 3 sections above the registration which do that..

Answer 1

We don't know the entire context here, but typically, when a user is filling out a form, they're not interested in reading about 'product info'. Sounds like a suggestion from the marketing team. :)

I'd definitely hide the white space since it'd serve no purpose. But when you expose the new form fields, make it an intentional and obvious process...perhaps with an animation or fade-in or the like.

The catch, however, is what will trigger the exposure of the new form fields?

It may make more sense to make this a multi-step process. Have a 'NEXT' button. Fill out this page, then NEXT, then the new additional Account Details on the next.

Answer 2

I'd hide the white space without adding additional info. This is crucial in getting people to sign in, you don't want them distracted by anything else than the task at hand.

You could implement show/hide functionality which would work semi-automatic. If additional detail is needed - show the form; if not - hide it. But allow user to open and close the form if they want to.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

It depends on the amount of questions, but why not divide the process in steps? This way, you give the user a heads up what to expect next, without revealing the questions.

My 5 min mockup, missing "some" details.

Answer 4

Its recommend not to put any other thing like product in the signup page. User don't want to see that in this page. You can make the form as a two level form like when user will post its personal detail and click submit the data will store and the user details form will appear in a fade in fade out animation format. Make the form middle align to the page.

Answer 5

When you say "hidden fields" there can be two interpretations to that..

1. Fields that belong to different section of information, not to be displayed unless that section is being dealt with. If so, it is a case of not displaying the details of the section all together. I would suggest the use of an accordion, where you can group the fields into various sections and open one section at a time. Something similar to what Benny has mentioned above. You can keep the default behavior as only one section open at a time with an explicit option "expand all" to view the complete information.

2. Fields that are displayed based on the information entered in a section. In that case the information entered in one section will directly drive the fields displayed later and the information has to be entered in a specific order. Eg. If you select gender as male you ask the user to fill in their favorite sports and for female you may ask for favorite music. Here a decision point will be whether you want to display the information of the previous section also on the same screen as the user moves forward to different sections.

   1. If the previous information is not to be displayed in the immediate screen you can use a layout like a 'payment and checkout' cycle we see while shopping online. Each section is displayed one after the other with quick links to access information of previous sections.
   2. If the previous information is to be shown on the immediate screen then you may use next/ more option and slide the action(signup) button down and display the fields in that section. This will also create a dynamic generation effect.