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.

Why do sites like StackExchange, Facebook and YouTube center their content and reduce its width? As opposed to sites like Reddit that go full width.

  • Are they trying to spare the user from too much horizontal eyeball movement?

  • Are they trying to break up the monotony of the page to increase its visual appeal?

  • Is this about some secret design principle that only the big guys know about?

enter image description here

share|improve this question
2  
I guess the reason is that it is just more accepted and more familiar UI pattern than anything else. My Vote goes to the first option. –  ripu1581 Jan 15 '13 at 11:26
    
+1 A question with high potential -- I look forward to the many possible points in the answers. –  Kris Jan 15 '13 at 13:01
    
I've noticed the answers so far are only addressing the three column layout. I hope someone addresses Reddit's single column layout and tries to explain why they do it that way. –  twindham Jan 15 '13 at 14:57
add comment

4 Answers

Here is my opinion about the layout and why it works.

First, we as humans tend to read from left-to-right/right-to-left. We all know that.

Long line lengths are bad for reading, but that doesn't necessarily apply to youtube, unless you enjoy reading the comments while listening to the video.

Even if we take into account our reading direction, that doesn't mean that text should start either on the far left or right. It makes the reader feel as if they've been backed into a reading corner. We read left/right but we scan things up and down along the center.

We humans tend to want symmetry and putting content in the middle is where we'll feel most comfortable looking at content. When we look at someone we don't look at their left or right ears to concentrate on them. At least I don't because I would feel odd if I did. That's why I think the layout works. The content, or what we want to concentrate on, is in the middle.

Reddit could definitely improve it's layout and would benefit from a layout where it's main news content is centered on the page and doesn't suffer from long lines. They could make their menus larger and easier to click on up at the top, and they would have more room for additional content on the sides while leaving their main content in the middle, where we tend to want to look anyway.

Youtube - what feels better, looking at a centered video or looking at a video at the extreme left of the screen? Navigation on the left or right is fine. Navigation is secondary to content. Content is the prime subject. Imagine if you placed your tv on the for left or right corners of your wall? You might have to because of the room constraints but it feels better in the center.

Facebook - content is in the center. The content is the news feed and what our friends are saying. All the stuff on the side is secondary. Who wants their news feed on the extreme left or right? What would be in the middle? menus? navigation? No, the content. And the content is the information about our friends and family members.

Stackexchange - The point is to see what kinds of questions people are asking. The questons are the content and are in the center. All the stuff on the side and the top just enables you to get to questions that are relevant to you. Again, the main content is in the middle.

That's my opinion. Content is king and it should take center stage....not be off on the left of the stage or the far right where you have to look for it.

share|improve this answer
add comment

I don't suppose this is a question that will see definitive answers unless we wrangle designers for the sites you mention. In response to the three questions, I would venture "yes", "yes", "no", but I would also propose some other possible explanations not represented:

  1. We're talking about user experience, of course, but a designer is a sort of user. We must use the sites we create, at least in the process, and as such our user experience as designers has influence on the decisions we make. A centered, constrained layout allows one of two modes of operation on the wider monitors many (most?) of us are designing on now:

    • You can keep your browser/code/utility windows at a small, comfortable size and have several visible when you need to be able to shift quickly between focuses.
    • When you then need to focus on a single task, you can expand it to full screen (or close) and block out the noise with free (if not white) space. (i.e., expanding to full screen gives you more space to focus on the same amount of information, instead of maintaining a roughly static information density but spreading it over the entire monitor.

    When I thumb back through my own design history there's a palpable shift following my own change in screens several years ago. Perhaps I should resist assuming causation?

  2. @lauhub makes some movement in this direction when he discusses designing for the wide array of screen sizes available, but a byproduct of this variety is that multi-screen users will have a more consistent site experience across sessions if the content in the design avoids consuming all available space.

  3. Reddit, while much loved, is a visual mess and we probably should avoid extrapolating their design decisions into prescriptions for good design.

share|improve this answer
add comment

While there some usability concerns around line-lengths, I think there are two main reasons why this layout is so popular.

  1. Design control. Designers have much more control over how the website will look using the popular fixed-width, centered layout as page elements will not move around or change size at the mercy of the users browser window size.

  2. Ease of build. Again this comes down to control. You always know how wide the layout is so its easier to position page elements robustly. Building a full-width, fluid layout that doesn't look terrible is harder work.

share|improve this answer
    
Having a 3 column layout doesn't mean that it's at a fixed pixel size. –  Jerry Saravia Jan 16 '13 at 22:19
add comment

I do not think this is a secret design. Actually, this is a principle that may be inherited from newspapers or magazines: It would be impossible to read articles if they had not that three or four columns layout, just because your eyes would lose on which line you are reading and which is the next to read. This minimizes eyebal movements while reading.

Another reason can also be to avoid dealing with each different screen width on the earth. By fixing a width for the central part, it is easier to manage the look and feel and the GUI behaviour general.

This also bring coherence with other web applications, because having the different functions located on a side or another makes ergonomy coherent inside the site and between different sites.

And actually, it is easier when you develop an application to follow the same principles as the other instead of re-inventing a new thing.

Why some sites do not follow the three-column layout ? Well, it is also a developer's choice to choose which layout to display. And user's choice to use its preferred sites according to the layout or not.

There are many ergonomy principles that you may follow. You can have a look at ISO-14915 standards about this.

share|improve this answer
2  
All that seems to be true, but I would also add that it might also have to be with the human eye. I remember reading in one of Adrian Frutiger's book about how the human eye is always looking for the middle of things and also tries to mirror both sides. For that reason it might be that people find centered websites more beautiful or easier to read. –  Alexis Brion Jan 15 '13 at 15:54
1  
Yes, I agree. I also heard of a scientific work indicating that while the eyes are looking on right or left while driving, the brain keeps some focus on what happens in front of the car. –  lauhub Jan 18 '13 at 13:29
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.