Field and label alignment with whitespace

Question

I'm designing a form with a typical 970px wide page. I've been trying to read as much as possible for label alignments. What is the best way to solve an abundance of white space to the right of the form?

For example, top labels look like:

Whereas the right-aligned labelled form looks like:

The advantage of the top labels is that it's very easy/quick to process, however there is a very large amount of white space to the right of the form and makes the form taller. Considering the web application is very form driven, what can I do to "reduce" this white space? Does it even matter?

I like the right-aligned labels to "fix" this problem, however the header "Create User" looks very out of place. If choosing right-aligned labels, how is this quirk solved?

Answer 1

There's a variety of ways to go about this. Here are some examples:

---

Wordpress uses massive fields:

---

Vimeo has an interesting picture

---

Twitter has a column solely for the call to action and for help mesages. Actually I think this is a powerful and impressive use of whitespace in the design

---

Moo centralizes everything in a box and makes the whitespace a design feature

---

Lee Munroe gives a little alternative information

---

Animoto goes double width

---

Facebook separates the header/call to action away from the form

---

But - PayPal completely fails to address the problem ! Dull isn't it?

Answer 2

See Handcraft's signup page and Sign in screen for two examples of how I solved this problem.

• Both examples, first of all, don't use the same 970px template the rest of the site does. It's simply unnecessary to claim all that space if you're not going to use it.
• Secondly, since the focus of the page is to fill out the form, I removed everything that isn't related to that (this is because we're designing for conversion which you might not be, so keep that in mind).
• On the signup page, I split the fields into two columns to reduce the overall height.
• I also centered the body and the header within the window to solve the header alignment problem you're describing.
• I didn't right align form fields because the forms are incredibly short (intentionally) and the space is better used in this format. I think right aligned fields on your form work better, though, as it's a longer form.

So in short, use whitespace as a design element and don't be afraid to mix up some of the conventions you come across.

Answer 3

I don't think, that large whitespace is problem - user focus is this way much better. However sometimes there are some design aspects, and in this case (form is not that long) right aligned labels are also okay. Top aligned labels are much more scannable, but use whatever you want, in this case both are appropriate.

Answer 4

I usually have the lables left-aligned.

Another alternative is to have the lables to the right of the input boxes, like in the SE blog comments section: blog.stackoverflow.com