Left vs. Right-side Navigation: Which Big Sites Use Which?

By Daniel Miessler on July 10th, 2010: Tagged as Blogging | Design

leftisright

I’m thinking about redesigning my theme again and I’m considering a few key design options: single vs. dual sidebars, and, if I go with a single, which side to put it on.

First I started reading about the prominent opinions on the matter but quickly realized that I preferred the “what are people actually using” approach. One of my favorite blogs is Daring Fireball, and he uses a single sidebar on the left, but I’m sure there are other brilliant sites that do something different. So I decided to look at some big sites and do an informal tally.

The Sites

Of course, even deciding what to sample is a big problem, so I decided to start with with a top-25 list of blogs from ebismba, which was a top Google hit for “top blogs” and then just hit a few others that I though were noteworthy because they focus on design.

  1. Huffington Post: three content panes
    This is what I call the modern style of content display, where you don’t really have a pure division of content between a main area and a sidebar, but rather use multiple main content areas–usually with some doing more text and some doing more video, etc.

  2. TMZ: single sidebar on right

  3. Engadget: single sidebar on right

  4. Gizmodo: top and left nav

  5. Mashable: single sidebar on right

  6. Techcrunch: single sidebar on right

  7. Gawker: top and left nav

  8. Lifehacker: top and left nav

  9. BoingBoing: right nav

  10. Daring Fireball: left nav

  11. Daily Koz: two right sidebars

Meh, I’m not really getting much out of this it seems. The one thing I can kind of see is that pure nav on the left is pretty rare, so I guess that’s something. ::

Notes

1 I’ve always found left sidebars to be really intuitive because you first pick what you want to do then you do it–>flowing left to right. But at the same time it also seems logical to give people content first if they come directly to an article of yours, with navigation to the right of that.

  • Nii

    Left or Right?

    Well there is a number of factors that you should seriously consider.

    The main question is "who is the target user" & "what type of site is it?"

    I noticed that nealry all the sites you mentioned have a primary and secondary navigation. The primary being the top horizontal one. Some of the secondary navigations on the right are not really listings or a dominant way to to navigate, they seem to be adverts, links, menus which lack the structure of a Proper navigation.

    You will notice that ecommerce or product selling websites tend to follow web conventions which flow left to right. They do this because conventions are tried and tested (dont fix what is not broken). Ecommerce site UI designers understand that most people are used to shopping in a certain way/method and will make it as easy as possible for users to navigate. Conventions are simple things like Logos in the top left, logos click to home page, left nav product filters (office depot) etc

    Right navs have become more popular of recent times but notably for a different style of site. I have personally noticed blogs, design tutorial sites, wordpress etc use right navs effectively.
    This particular site makes use of the right nav well.

    I always give the user 3 options to navigate as a rule of thumb. This way they have no excuses to complain..lol I usually add a top nav, left nav and a search box.

    So its really about what the site is intended for. If it is a creative project then be experimental whilst sticking to only obvious web conventions.

    If the site is intended for users or paricular type of user you have to be in their shoes when designing and also sticking to what most sites use as convention, design, layout and structure.

    I tend to prefer my 3 navigation rule of top, left and search.but it all depends on who its for and what the site is intended for.

  • Bill

    For an ecommerce site with the products navigation bar. What is your conclusion on where this bar should be? Im also indecisive as nearly all ecommerce sites put it on the left.

    • Shaiz

      My personal opinion. For an ecommerce site, its always good to put the navigation (I am talking of the categories, the other things can be on the top or wherever, as long as they are separate from the categories section) on the left for two reasons:

      a. if the browser window is of a smaller width than your site container, the visitor will still be able to view your entire range.

      b. when you see the list of products, your eyes go from left to right finally landing at a “view product” or a “buy now” button. The last thing you want is to distract them with more categories sitting just next to button.


Top

Popular

Information Security / Technology

Politics

Philosophy & Religion

Technology & Science

Culture & Society

Miscellaneous

Arguments

Projects

Collections

Twitter

What I'm Reading

Favorite Books and Essays

Top Blog Categories

Inputs