Best practice for form layouts?

Question

Is there a best practice for forms, or is it conditional on the length of it, and what it's for?

I have a registration page with about 10 different input fields, and not sure if I should do two columns side by side, or just one column.

Single Column

Double Column

Is there any research to prove that either one is better than the other in terms of aesthetic pleasure/good user experience?

Answer 1

Single column layout you have is definitely better, but there are several other options. I'm not going to say my approach is the best. Just try to apply it to your problem and see the result.

Basically, there are several ideas:

• enhance readability
• try not to mix field names and entered values
• optimize form length
• introduce some logical structure (if needed)
• provide some help
• do not forget about validation

Usually I use accordion in order to manage length and provide an easy to understand structure, but this is matter of taste.

Answer 2

Single column layouts are better because:

• They are more streamlined.
• Inline suggestions can be provided if needed.
• The labels are more scan-friendly.
• They make the user think less by providing a definite order to fill up the form. Remember, the user always says: "don't make me think!"

Answer 3

Luke Wroblewski wrote a really good article: Web Application Form Design. It's old but still quite valid.

He reviews pros and cons of various layout types, including vertical and horizontal variants. His analysis includes annotated screenshots of forms. Some very clear points are made about benefits and implications of each technique. His closing note indicates the need for testing to be certain of the right choice:

Though these guidelines can help better position a form for your specific purpose, the combination of layout, visual elements, and content that's right for you should still be verified through user testing or data analysis (completion rates, errors, etc.).

Emphasis mine.