A lot of websites these days have content area's which are center-aligned: User Experience Stack Exchange is an example.
However some sites are left-aligned, e.g. Adobe Support Community, Area 17, Jeff Finley.
Is this just a design preference or is there a genuine usability reason for it?
I have yet to meet a client who, when presented with a centered layout, says "can I see it left-aligned?" so, of the theories offered up in the Centered Layout vs Left-Aligned Layout thread at the IXDA discussion board, this one seemed to make a sensible case for the improved readability of a centered layout:
Left-aligned may not be evil but on a wide monitor when one has a number of items open and the windows are not maximized, a centered-content design has more visual "white-space" around it and it makes for an easier reading experience. I've run into too many left-aligned sites which have poor padding allowances on the side margins which cause the eyes to work harder in trying to separate that site from the rest of the screen content.
--Ferg
Anecdotally: there's a moment of confusion when half (or, in the case of outlier QSXGA users, most) of a maximized window is painted with whitespace; plus the edges of the display tend to distract from the task of reading.
You might test this on yourself by dimming the lights and trying to read a 1000px left-aligned block of text at the edge of your monitor versus the same text centered. I tend to notice some refocusing/eye strain whenever the focal point of my vision rests at the edge of the display.
Another reason to center a site's content - it seems that some people could not stand having a huge chunk of white space, and must resize their browser to eliminate the white space before focusing on the content.
From Choosing the Right Search Results Page Layout: Make the Most of Your Width:
In my field research, I’ve observed people’s reactions to the large, empty spaces that appear on the right in fixed-width layouts. All that space devoid of content causes what I can only describe as pixel agoraphobia. When that space first opens up, people usually grimace and attempt to reduce the width of the window to remove some of the empty space. Most Windows users who have maximized their browser window do this by clicking the Restore Down button on the window title bar. This sometimes results in a window size that is too small for a site, so users must then adjust the window size manually. When your customers are busy fiddling with the width of the browser window, they’re not shopping or looking at ads on your site. In fact, they’re usually becoming more and more irritated—and that’s before they’ve even begun interacting with your Web site’s fabulous functionality!
Please oh please stop left-aligning websites. I have a 30" monitor and reading a left-aligned website means that I have to keep my head turned by some 45 degrees. That is highly uncomfortable and either makes me leave the site or, if it's really important, center the whole browser window.
I understand that I am certainly a minority, but bigger monitors are becoming more and more mainstream lately and it may be a good idea to account for this change.
Improving Usability with Fitt's Law mentions this.
Towards the end of the article it talks about the five "magic pixels" (the current pixel the user's cursor is located, and the four corners of the screen).
Unfortunately web design usually cannot take advantage of the corner, so an average of these prime locations is taken which ends up being close to the center of the screen.
I encountered this page whilst searching for statistics on the topic of left aligned versus center aligned page layout. It seems there is only anecdotal info and personal preference on discussion.
IMO left aligned content connotes something alive, such as a forum which holds lots of text which require much more fluid use of the screen, and centre design connotes a more passive reading experience possibly associated with a consumer engagement.
It does make me wonder if media-queries may offer a new opportunity to design left-aligned pages but use the right side of the screen - previously empty - with large imagery on large monitors or smaller inline images as the screen shrinks down to thumbnails on smart-phone.
Yes center aligned pages are better from the usability perspective, as with the varying screen resolutions the empty space on the right & left keep adjusting and the user does not get any horizontal scrolls. Plus from the perspective of look ‘n’ feel, I find center aligned pages more elegant then page aligned left or right.
Regarding the system - maybe not, except situations where you have some special features on it, e.g. a game, which needs users to click around the content quickly, and some clicks may occur in the very side of it.
However - since usability in general is about making the system reflect user expectations better, it gets quite important. I believe most of the users have some sense of balance, and aligning the layout to one of the sides abuses the feeling of a website being balanced, this making it - in user's perception - not perfect. This may lead the user to perceive it as "worse" and "less handy", which is very close to being less usable.
On a second thought. As a right handed person I prefer to keep my cursor in the right part of the screen. It may be silly preference, but it is so. So, moving it to the left part of the screen is less handy for me. This becomes even more important on tablet. I ususally hold it in/on my left hand and operate it with right hand. So, the more to the left the content is, the more I need to move my hand. At some point it becomes important.
I don't know much about ergonomics beyond what can be deduced from experience. That said, I think the most comfortable, natural position for a seated persons head and eyes is looking straight ahead. If they care about posture, their head will be aligned with the center of the screen when in this position.
So it's perhaps less effort to view a site with centred content.
For the most part I would say that it's a design preference, but one grounded in the fact that (as @pelms points out in his comment) it looks "right" and meets users expectations.
If you look at books and newspapers their content is centred on the available space.
Even the sites you link to (e.g. Area 17) have a margin to the left.
When we humans read, we prefer to look at the text perpendicularly to the surface that displays it.
One great advantage of printed books is that we can set them in position automatically, with ease, automatically.
As a test, read some text from a surface not perpendicular to your line of sight, and also try with the text lines not perfectly horizontal: you will notice that you need extra effort.
The diagonal view happens when one sits close to a many-inch-wide monitor and the text is not in front of your eyes.
Centering the content puts it in the place that will most probably be in front of the user's eyes.
Ancillary text not intended to be read in detail during lengthy periods, like navigation and the like, can be set off-center.
This is also the reason why text lines must not be longer than about 90 letters, and CSS allows us to specify the max-width property. The relationship happens because when you are reading the tips of a too long line, you are not enough perpendicular to the text, You read long lines slower and get tired faster.
One disadvantage of a centered layout is that the available horizontal space may depend on the presence of a scrollbar. If that is the case and the user navigates from one page without a scrollbar to another page with a scrollbar (and vice versa) the content area will jump to the left (or right). With a left-aligned layout the content area will never move.
