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.

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,

http://imgur.com/Zc7GJ7H

The form - left-aligned,

http://imgur.com/kzQUj31

share|improve this question
1  
Thanks for including the images in the question, JonW. :) –  JohnDubya Mar 19 '13 at 14:48
add comment

3 Answers

up vote 8 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
5  
@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
add comment

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
add comment

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
add comment

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.