By Andrew Tetlaw

Left-Leaning Layout Conventions Rule!

By Andrew Tetlaw

When I started my career as a web developer in the nineties, the convention of the day was a two-column approach: a table-based layout with a vertical navigation menu on the left-hand side, and a content column. These days we’re more likely to see the main navigation in a horizontal configuration across the top, starting on the left. Left-to-right and top-to-bottom is a long-standing convention among English-speaking websites — unsurprising, since that’s how English speakers read.

Last month Jakob Nielsen published a very interesting report titled Horizontal Attention Leans Left. Nielsen’s group has done testing that confirms the validity of a convention that began in the mid-nineties. What was surprising, though, was the amount of users’ attention given to the left-hand side of the screen: 69%. This leaves little time for the stuff on the right-hand side; hence, that right-hand column of miscellaneous stuff on your blog is hardly ever read.

So, what about your work? Do you design for left-to-right consumption? Does this study reinforce your approach or change it? Are you dismayed that few visitors care about what you put in your widget column?

  • This is interesting, as a LOT of design blogs and such place their advertising et al in a right-hand column…

  • I’m not sure I agree with Jakob. I like right-hand navigation on 2-column layouts because it does not distract from the main article content. Surely the page content is more important than links elsewhere?

    Three-column layouts are a little different because people expect navigation on the left and ads on the right. Swapping them around could increase ad revenues but might confuse users.

  • Anonymous

    Great article. I tweaked my navigation bar and put the most important links left — instead of center.

  • Of course attention goes to the left! All modern OSes place their navigation links there! Every native file manager (Windows Explorer, Mac Finder, Linux Nautilus or Dolphin) puts a list of shortcuts on the left, and so does every file open/save dialog. iTunes, Vuze, Miro, gPodder, and so many other apps also place navigation to the left. That’s a common thing!

    Not using this on the web is stupid.

  • DaVince

    Interesting. I have long felt this way and when I can, I design my code to have the important stuff on the left, so someone can scan down the left side and get the gist of what I’m trying to do.

  • Anonymous

    I’m pretty sure that JN has done other studies (eye tracking?) that show users have a better experience when there in no left hand navigation that they constantly have to skip over as they read the main content.

    In this scenario right hand navigation works best. When you think about it it’s kind of obvious: big binders and dictionaries have page tabs on the right so you can jump to the section you are interested in.


    think different
    Think Open Source

  • arts-multimedia

    It makes sense to have navigation on the left. Most of us use our left hand to turn a page, it is something we have been doing literally for ages.
    I alway place navigation either at the top or left, never on the right.
    But you have to be careful with conclusions. It is not because folks seldom click that they do not read stuff on the right. Iit depends what you place there. Nothing is black or white in this world.

    Hey guys, I can’t login on firefox since your new design. Pressing login button doesn’t do anything, so I am anonimous now. Can you fix this?

  • matthijsA

    There’s something weird going on in the argument here. The article says that because people pay attention to the left hand side of a webpage, we should put important content/navigation there.

    It’s the other way around. Because a lot of websites put important navigation on the left, people pay attention to it.

  • This is not clear! Do we know about the layout(s) that users are viewing? Are those all left-nav. layouts, right-nav. layouts? If mixed what is the percentage?

  • simonnz

    this has come at a good time for me as I have been studying this while doing a redesign of personal project that I sell a little advertising on.

    I guess I have gone unconventional more out of experimentation and to give my sponsors better exposure by placing advertising under a small section navigation on the left that takes up about 1/4 – 1/3 of the page width. there is a top navigation for the main sections but think that users will see the left navigation more, I hope this will keep people on the site(stop bounce) and have a look at other content, I guess time will tell once I put it live.

    I guess I have come kind of used to the design over the last week but feel that I can concentrate on the content in the body with no distraction from the left. I guess I should note that the top navigation is only above the main content block and the left navigation looks like it goes full height, there is a definite division.

    One question I can’t find much on is what the thoughts are on centred to left aligned layouts. I personally like left aligned as it gives the user something to see instead of a margin however most the work I do for clients now is centred and even my own portfolio site is centred with a right navigation, I guess the many flavours are good and there is no wrong, but when it comes to selling advertising maybe left hand will be better?

Get the latest in Front-end, once a week, for free.