How Do You Align Your Form Assets?

There are three things that keep me up at night:

  1. Did Juliet really reset the island?
  2. What ever happened to Clusters cereal?
  3. How should I align things within my web forms?

While not overshadowing options 1 and 2, the form alignment thing is a decision that probably effects a lot more people than the awesome Clusters squirrel commercials. Most websites I’ve ever designed have some kind of form on them, so this is something that constantly comes up.

My options on form design are basically,

  • Line everything up on the left:

    The issue I have with this is that your form just kinda blends in with the page. A less obvious sense of hierarchy.

  • Align the options (radio buttons, check boxes, whatever) with the paragraph text above it while aligning the submit button with the option’s text:

    I start to like this option because the submit button appears to go with the form options above it, but the options still aren’t separated enough from the paragraph text for my liking.
  • Indenting the form options based on my design’s grid calculations, and aligning the button with the text:

    This is getting cleaner because you have an obvious “headline” of paragraph text compared to the options. But indenting the submit button is too …. “indenty”.
  • Indenting the form options, like above, but aligning the submit button to the form option input boxes:

    This has potential because, like above, you get the obvious distinction between “headline” paragraph text and the options associated with it. But now, your user can click-click-click in a straight line all the way to the submit button.

Truth be told, I usually go with the last option, but all of them run through my head when I start on a new website design. I ran A/B testing on all of these designs at a previous job and form submissions were basically equal across all four design.

How do you typically design your forms?