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?

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.

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 FabianAug 14 '11 at 15:44