User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Our web application has a small header and nav menu at the very top, and below, there is simply a large area of open space. We have no need for an always-present sidebar, so there is just one column. The layout is 100% window width, so it allows those with wide screens to use as much space as possible.

Our issue is that there are often times where certain one-page forms are very small and don't need to take much space. And the form can sometimes look awkward in the potentially huge open space below the header.

For instance, the password reset form below only requires two inputs. It is awkward to make the form 100% of the page width, so we kept it fairly narrow. But then, there is a ton of white space that isn't filled.

I feel that a narrow form should be centered, so there is equal white space on each side, and so you don't have to move your head away from the center of the screen.

But a co-worker feels that a narrow form should be left-aligned, because most everything else (like blocks of text) is left-aligned.

What do you guys think? Are there any principles or guidelines to follow for how to align entire forms? I've found tons of info on how to align labels, buttons, etc., but not on how to align forms when they don't take up the whole page.

The form - centered,

The form - left-aligned,

share|improve this question
Thanks for including the images in the question, JonW. :) – JohnDubya Mar 19 '13 at 14:48
up vote 10 down vote accepted

When the form is too far off to one side it emphasises the fact that it doesn't fill the page more than it would if it were centred. And drawing attention to that element would be drawing attention away from the form that you want to be the focus.

So I would suggest having the form centred.

However I would also suggest not having a stark white background. Try using a subtle pattern, or even just a light grey or off-white colour for the background, which will help draw attention more to the form.

share|improve this answer
Great thought. One question about your last paragraph: why not have a white background? Doesn't it help keep it from being too busy? I'm just trying to figure out if using a white BG is frowned upon for personal reasons or design/usability reasons. Got a link for more info on that? Thanks for the answer! :) – JohnDubya Mar 19 '13 at 14:51
@JohnDubya Brighter colours draw attention more than muted ones. So if the background is white, it competes for attention with the content. That is what you are trying to avoid, not the colour white per se. – JohnGB Mar 19 '13 at 14:56
Got it, thanks! – JohnDubya Mar 19 '13 at 14:57

I actually think both options work quite nicely.

I would choose one which goes best with the design of the rest of your site and take into account the form / shape of your header.

I think the background color suggestion from JohnGB will be very useful in making this even clearer to use.

share|improve this answer

If you plan to have content to the left of the form or right of the form, then either one works. If you do not have any content on the page other than the form, it is best centered.

share|improve this answer

Your Answer


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.