I have a need to design complex research data web input form. The specification is such, that I have about 7-10 obligatory fields (inputs, dropdowns, etc), and unspecified optional fields. Let's say that 30-40 is normal. On top of that, I might have several blocks like that on the page. All input is manual.

I am seeking a good guideline how to layout form, how to make it easy to move around it, and how to make it as compact as possible without losing clarity.

I am also looking for descent CSS framework to use that would get me layout out of the box. I use bootstrap for my general page layout, but its native control elements are too large.

This is a research database interface so regular "buisness" approach about 1-coulmn is not relevant, neither suggestion to somehow limit input. Think medical interface.

  • As phrased this question doesn't belong in this section especially the part regarding CSS frameworks – Mayo Mar 18 '15 at 15:45

One of the major problems with online form design is that many of us try to simulate a printed form, assuming it is effective because it is familiar to the customer. As I'm sure you are aware, Luke Wroblewski has done some excellent research on online form design (Link to one of his articles is here: http://static.lukew.com/webforms_lukew.pdf)

Even though you are creating a complex form (thinking medical) the evidence shows that forms convert much better when they are simple, with limited visual noise, and permit the user to follow as straight a path as possible down the page. While the "straight down" approach of giving each form field on its own line may appear to "waste space" on the right hand side of the screen, many eye tracking studies show the user remains focused on the left side (where the fields and labels are located) and moves very quickly through the fields. They barely notice the opposite side of the screen is blank.

As a quick visual example, which of these can you read faster?


First name: Middle Initial: Last Name:

Address 1:

City: State: Zip: Area Code and Phone:


First Name:

Middle Initial:

Last Name:





Area Code & Phone:

In my opinion, the more complicated the field types required (as you've described), the simpler and cleaner the actual form layout should be. While a single column may not be completely practical for your application, a "dashboard" layout may not be effective either.

| improve this answer | |

A grid structure layout, using the amount of columns which will help you group your form elements accordingly. Mandatory fields should be marked and tab ↹ index should follow a sequence that users follow when they will fill this form

| improve this answer | |

Your Answer

