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

enter image description here

Double Column

enter image description here

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

up vote 36 down vote accepted

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.

enter image description here

  • 6
    I would like to add to this answer that accordions are good, but they must stay open til chosen to be closed, i.e. once I move onto part two don't close part one unless I click to – Toni Leigh Mar 7 '14 at 18:16

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!"

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.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.