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: top labelled form

Whereas the right-aligned labelled form looks like: right-aligned form

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?

  • 1
    One simple thing that you could do is to shift "Create User" to be left-aligned with the fields rather than the labels. Aug 15, 2011 at 6:28

4 Answers 4


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

Wordpress uses massive fields:

enter image description here

Vimeo has an interesting picture

enter image description here

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

enter image description here

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

enter image description here

Lee Munroe gives a little alternative information

enter image description here

Animoto goes double width

enter image description here

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

enter image description here

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

enter image description here

  • 2
    Impressive! Now if you added the takeaways from these examples as well as the examples themselves, this would be a class answer :-)
    – Rahul
    Aug 14, 2011 at 22:25
  • Roger - Thanks. I'm going to take inspiration from one of these and go with it. Aug 15, 2011 at 22:30
  • @TheCloudlessSky which one are you going to choose - and why :-) Aug 16, 2011 at 13:37

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.


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.

  • 1
    Header: if you like the right aligned version more, you might add some visual separator (subtle, just like before the Save button) and it will fix the "out-of-place" problem ;) Aug 14, 2011 at 15:44

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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