Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
1  
One simple thing that you could do is to shift "Create User" to be left-aligned with the fields rather than the labels. –  Chris Morgan Aug 15 '11 at 6:28

4 Answers 4

up vote 6 down vote accepted

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

share|improve this answer
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 '11 at 22:25
    
Roger - Thanks. I'm going to take inspiration from one of these and go with it. –  TheCloudlessSky Aug 15 '11 at 22:30
    
@TheCloudlessSky which one are you going to choose - and why :-) –  Roger Attrill Aug 16 '11 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.

share|improve this answer

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.

share|improve this answer
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 ;) –  Csongor Fabian Aug 14 '11 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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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