Suggestions for web form mockup

Question

I'm working on a web application and one of the forms in my application has many inputs. I've tried my best at trying to organize and have them displayed in a manner that saves space and isn't confusing, but I'm still looking for some suggestions. The majority of users for this application are folks that dislike any type of scrolling.

Here's what my current mock-up looks like.

Answer 1

It is best to avoid horizontal and vertical flow in the same document. This can cause significant confusion and should be discouraged.

There are a couple solutions to avoid vertical scrolling issues, which is what you tried to avoid by having a mixed layout. I believe these solutions are better than mixing layout flow.

• Use multiple steps. Have the user fill out a portion, then click Next to see the next part of the form. This is the most common method used, and has a vast body of literature supporting its ease of use. I recommend it. But...

• If that is not acceptable for some reason, how about this alternative? Use a standard vertical flow to your document, but when the focus enters a new section of the form, auto-scroll the document to vertically center that section on the screen.

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

No section should be taller than the expected screensize. When the user reaches the end of a section and focus enters the first control on the next part, the screen should smooth-scroll to center that part of the form. This still allows them to navigate up and down without using the scrollbar, though they still would be unable to see the entire form onscreen at once. This navigation method is related to a vertical Cover flow, but adapted to form segments.

Not that a 'form section' in this context is referring to a chunk of fields, not each individual control. 'Address', 'Personal Information', etc.

Answer 2

looks like you can combine Name and Other Information into a single section without giving up vertical space. try putting the name fields on a single line. Also - other information is not a great heading, especially for a group of fields that have enough importance that they end up in the top right of your form.

Also - switching from a stacked layout (left) to a page flow layout (right) on top and bottom is not a good design decision. It draws my attention to the fact that you are using two different layouts for address, which then draws my attention to the fact that you are capturing different data about each address. Not going to kill the usability of the app, but is a curious inconsistency.

Answer 3

There are a lot of problems with your form, just like others mentioned, and it is far too frustrating. Here are some basic tips for you, which you should consider before planning a registration form.

• ask only the necessary information (least possible), because people don't like to give out their personal data
• avoid two column layouts - people hardly notice the second column and get confused
• consider pagination - if you want to avoid scrolling or you have a long form

My idea: why don't you ask only for a user name and e-mail? Or sign in with Facebook? And convince users to fill out their profile page with additional information you need. After they have tried your service and are satisfied with it, they will provide their personal data.