Content area and Sidebar Positions

Wanted to ask this for a while now.
What you think is the correct layout to go with on a website:

a) Sidebar on the left side of the page and content area to the right.
b) Sidebar on the right side of the page and content area to the left.

This is all for user perspective/usability/eyes behavior/etc

Thanks for your opinion!

Hi aplus. Welcome to the forums. :slight_smile:

I guess another question would be—Do you need a sidebar at all? :slight_smile:

I’ve seen heat maps (or whatever they are called) that track users’ eye movements—which, if I remember rightly, tend to indicate that attention centers around the top left of the page. If that’s right, I’d suggest that the sidebar should be on the right and main content left. But TBH I don’t take much interest in such studies.

Personally, If I must have a sidebar, I put it on the right, because (in my opinion) most people will be using a mouse and will be right handed, so it makes sense to me to have it on that side.

There are some research suggesting content should be put where the user focuses first: top-left. Of course, that’s for users in which cultures the reading order is ltr.

I believe them to be somewhat wrong. Yes, a ltr-user would first focus on the top-left point by default. But, after quickly orienting him self, he’d expect some introductory stuff on the left or on the top, and the main part to follow to bottom and right. A sidebar on the right would distract the user, as the content would have to fight for the user’s normal tendency to go over all the way to the right.

Like with reading, you don’t find your self returning to the left page when reading the right one, since you already know what’s there, yet you’ll be tempted to peak at the right page when reading the left one.

Tenancy to start viewing at the top left is one thing to go off, but in reality you’re creating the readers environment (your website) and by extension you’re in control of what they pay attention to. You could easily make a western reader defy their ‘top-left’ tenancies by adding a red-yellow flashing image on the bottom-right of the page. You’re in control of what the user reads.

What you really need to be asking is. What is in my side bar? How much attention is it worth? How much should it compete over the main content? Is it fixed or does it scroll with the page with the page, or independently from the page? Where do the scroll bars appear? Is it navigation? Does it get in the way of other elements?

I have never been irritated by having a sidebar on one side of the screen or the other unless its position conflicted with the way it operated. And unfortunately there no definitive solution to this, especially when taking the content out of the picture. The only way to reach a conclusive solution would be to look at the function & contents of the sidebar itself.

It depends on the context. A fairly standard design model is to have the primary navigation on the left, and associated content on the right. People generally don’t expect the main menu to be on the right, so if that’s what you want in your sidebar, it’s usually better to keep it on the left.

Design Varies with the purpose of website, However Ralph gave a really good reason to put side bar on right hand side, but if you will notice on the behavior of common user they use F shape for scanning any website. If we give emphasis on it then certainly it should come at left section. Some research also says (on the basis of human performance, user preference) pattern of reading that it is always appreciated to have left navigation bar!!

i thinks its all based on design of the page and how it looks like placing the content and images… we need to better perform a/b test in order to pick the exact one

This is spot on. research shows that most people scan web pages using an F shape, i.e. they read the top line, left hand column and 2nd line but very little else unless there is a compelling reason to do so, for example if they are reading an article which continues below 2 lines. Bottom right is a good place to ‘bury’ anything you don’t really want readers to notice, like links to t&c’s, returns info, disclaimers,etc