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.

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.

registration form wireframe

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..

share|improve this question
    
If marketing had it's way, you'd use the space between the fields for product info also. :-P –  Bill Dagg May 28 at 16:50

5 Answers 5

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.

share|improve this answer
    
Need to be careful using pages, though. If more needs to be added to this process later, the increasing page count could make Users feel that the whole process is cumbersome. If there are only ever going to be the two pages though, then it's a decent solution. –  caackley May 27 at 11:40

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
1  
+1 Balsamiq is wonderful software! –  Mr. Manager May 27 at 18:07

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.

Stepped signup

share|improve this answer
    
This is clear and also solves the related issue of how to decide when to make the account details visible. Validation logic on the personal details can be checked and used to enable access to account details once valid. It's basically multi-page, but more streamlined. –  Dan Bryant May 27 at 17:51

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.

share|improve this answer

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.
share|improve this answer

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.