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've got a fixed width layout site much like SE and Twitter and it personally bugs me when my "short" pages don't reach the bottom of the page. I've been wondering if this is a purely stylistic issue or if any research or standards exist for this situation. It seems to me that it would keep all elements at the greatest level of spacial consistency, and I have noticed that big sites like Twitter do tend to fill all vertical real estate with "container" rather than "padding".

Here's an example on a 1280x1024 monitor of a very empty page on the site. As you can see there is a great deal of visible padding. On the other hand a great deal of whitespace would replace it with a "fixed" height solution.

enter image description here

At the moment the footer of the page is unused (it's an intranet site and I guess the client opted against/forgot even simple copyright information at the bottom) so I figured this is less important in this case, but I have noticed most "modern" sites do this so I was wondering if there's formal research/debate on the matter. I would like to make the change but I hate to change the user interface without a solid reason, as I did not create the original design.

share|improve this question
    
I would probably say this is more of a design issue, not strictly UX old chap... –  colmcq Sep 1 '11 at 16:31
    
Design is part of the experience however. Users do have better experiences on better looking sites with the same functionality... –  Ben Brocka Sep 1 '11 at 16:40
    
I think the issue is whitespace more than any specific height here. UI needs room to breath. Your form fields and text is all smashed to the edges of the container. Give it some room. –  DA01 Sep 1 '11 at 17:58
add comment

4 Answers

up vote 3 down vote accepted

I'm not a web designer but it seems to me that the problem here is that even if the container fills the height - there's still an awful lot of empty space to fill. The eye needs to be drawn away from that empty space - you can do that by shading the background so it's lighter at the top.

Also your form is left aligned - it might help to centre align it away from the edge so as to bring focus to the form.

Finally, the main content just kind of stops rather than blending which makes the background all the more stark. Many sites use a drop shadow to help transition.

I've mocked up the changes - but really this is just food for thought - others might have better ideas.

enter image description here

share|improve this answer
    
The site does suffer a bit from that problem as well, I've been thinking of expanding the header/footer bars to better fill in space and make the top menu more reachable/readable. The whole site could use a redesign but I've been trying to make small steps since I'm new. –  Ben Brocka Sep 1 '11 at 16:46
add comment

To expand on my comment of white space, here's a really quick visual of what I was getting at:

Showing whitespace

The idea is to give the elements some room. Don't crowd everything up to the margins. I also gave it a larger SAVE button and made the cancel button (secondary action) less equal in visual weight.

There are a lot of other issues that need to be addressed...the color scheme being one of them (why was pea green chosen? ;) It also has the feel of a modal window, so maybe this would be best handled as an entirely different user flow

share|improve this answer
    
The majority of the pages DO hit the top/bottom so I certainly can't center the whole thing, I will look at widening the margins though. I've been trying to think of a different background color too, but blue, beige and grey are our company colors though...we do sell rocks. –  Ben Brocka Sep 1 '11 at 19:11
1  
There's no reason you need to use your corporate branding colors as a UI theme for your software. They're really two different things. Sure, put a logo in the app and if it makes sense, borrow a few colors, but software should look like software--not a corporate brochure. ;) –  DA01 Sep 1 '11 at 19:41
    
Very true. I didn't expect such a discussion of the site's style, I'll have to look over it for real once I'm finished debugging. Thanks for the suggestions! –  Ben Brocka Sep 1 '11 at 19:54
1  
@SirTapTap - par for the course I'm afraid - it's almost impossible to show a whole page of content and only get feedback on the particular issue you wanted, without some sage advice being given about the rest of it as well. All feedback is good feedback though, right? :-) –  Roger Attrill Sep 6 '11 at 13:56
add comment

The screen is like a canvas of a painter. Why would you only use a fraction of the canvas? Imagine a person, looking at the image above. Do they say, "Oh that looks nice..it's like they made the page with some love."? Or do they think it's ugly and just a form?

Use bigger form elements, make the screen liquid. Make a container that looks nice. Be nicer to your audience and they will be nicer to you. Make a decent looking page. The image above is an eyesore.

Just trying to keep it real...no offense intended. :)

share|improve this answer
    
I firmly agree, I'm just trying not to change everything at once on them. Change is scary too of course :P –  Ben Brocka Sep 1 '11 at 16:39
add comment

In my experience one of the historical reasons for maintaining a full depth container is that it permits a design in which the scroll bar shows consistently. It is disconcerting to navigate a website in which the scroll bar appears and disappears because the content/design shifts slightly to accomodate the extra available width.

Not certain if this is an issue for you here though as your screen shots clearly show an inactive scrollbar even when the content is not at full depth.

share|improve this answer
    
Yeah, I forced a scrollbar as the shifting widths bugged me, and users were used to IE (but we're moving most to firefox). It's as simple as overflow-y:scroll; so I don't know why a fixed height container would be needed just for the scrollbar. –  Ben Brocka Sep 1 '11 at 18:47
    
I've never seen evidence the show/hide of a scrollbar annoys anyone other than a) the business line manager and b) The creative director. ;) –  DA01 Sep 1 '11 at 20:04
    
Out of curiosity, what was the selector you used for overflow-y? Wrapper? –  DannyBoyNYC Sep 1 '11 at 20:11
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.