Top Navigation vs Left Navigation: Which Works Better?

by on 09/28/10 at 5:20 pm

Which is better for users, a top or left navigation? Web designers have debated this issue for a long time. Many have drawn their own conclusions. Many have mixed feelings. However, the truth is that there is no absolute answer. When it comes to designing for users, context is king. A navigation that works well in one context, may not work as well in another. To figure out which navigation is best for your site, it’s important to understand the different contexts where the top and left navigation work best.

Top Navigation vs Left Navigation: Which Works Better?

Scanning

A left navigation is faster and more efficient for users to scan. In just three visual fixations, users scan six items in the left navigation compared to the three items scanned in the top navigation. The left navigation also facilitates a vertical scanning direction that is natural for people, while the top navigation forces a horizontal scanning direction that people often use when they’re reading.

Page Space

A top navigation conserves more vertical page space than a left navigation. With a left navigation, the navigation links occupy the left column of your page. This shrinks and narrows the content area of your page, which means you will have less space for your content. A top navigation, however, uses minimal vertical space, which allows you to occupy the content area of your page with content only.

Item Priority

Items in a top navigation do not have equal weight. The leftmost items carry more visual weight than other items because of its placement in the primary optical area (top left). Items in the top left area get more exposure and are often seen as more important than other items. The items in a left navigation, however, do have equal weight because they are all placed on the left with no other items in its opposing direction on the right. Because users read items from left to right, the priority direction for reading items are stronger horizontally than vertically.

Visibility

Top navigation items are more visible because they are always above the fold and are easier to find. Left navigation items are not always above the fold because sometimes if you have too many items, some of them can get pushed below the fold. Top navigations are also easier to find because they are usually accompanied by the header and logo, both of which are visually dominant objects on a web page.

Websites with Broad Topics and Interests

There are strengths and weaknesses with both top and left navigations. Given these different strengths and weaknesses, this implies that the type of navigation that is best suited for your site is dependent on the type of content your site has.

If your site produces a variety of content for a widespread audience (e.g. eCommerce sites) then a left navigation containing different topics would be best for your users. Because your users have a range of interests, they are the ones who decide which items in the navigation are most important to them. Therefore, it’s important to place your items in a left navigation, so that the visual weight and priority of the items are neutral. This is why most left navigations order their items alphabetically. This lets users decide what’s important to them by allowing them to efficiently scan for the item of their interest in a broad set of interests.

Websites with Specific Topics and Interests

However, if your site produces a specific topic of content that’s targeted towards users with a narrow set of interests (e.g. niche websites), you will have certain navigation items of higher priority than others. Because the user’s topics of interest is more limited in this context, placing navigation items in a top navigation with the most important items on the left will allow users to find their items of interest faster and easier. The ability to scan items isn’t needed here. What’s more important is the ability to spot the high priority items quickly. A top navigation allows users to do this more efficiently and effectively than a left navigation.

When it comes to design, there are few absolutes where one approach will be 100% effective all the time for all cases. Finding the approach that is best for you and your users, calls for an understanding of the context involved. If you don’t understand context, you won’t understand user experience design.


Top Navigation vs Left Navigation: Which Works Better? Top Navigation vs Left Navigation: Which Works Better?

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

24 Responses to “Top Navigation vs Left Navigation: Which Works Better?”

  1. Mat

    Sep 29th, 2010

    Thanks for the article.
    Maybe i’m wrong but in a “left navigation”, the first top item is, for me, more important and the most seen than the last one.

    • anthony

      Sep 30th, 2010

      It is higher up, so it is more visible, however, that doesn’t mean users will see it as the most important.

      How users process item priority is with priority direction. The priority direction for looking at individual items is horizontal, not vertical.

      The item priority paragraph elaborates this point.

  2. Mauricio

    Sep 30th, 2010

    I disagree with the scanning. Scanning up and down is not natural for most users. People tend to read Web sites in a “Z” type of motion.

    • anthony

      Sep 30th, 2010

      With the Z type of motion, users are still scanning in a downward direction. Even though they move in a Z-like motion, the reading destination is still at the bottom. I think you are being more specific, but essentially we are saying the same thing.

  3. Herman

    Oct 4th, 2010

    Actually, users tend to read in a F shape, starting horizontally left to right – this is based on a case story the Nielsen Norman Group did.

    Which by implication would suggest that the top navigation would be more natural choice for page maximasation.

    Please see link for article:

    http://www.useit.com/alertbox/reading_pattern.html

    • anthony

      Oct 4th, 2010

      Top navigation is usually the best choice and the one that works best for most sites. However, you have to keep in mind of other large sites without specific niches that provide content to a variety of users with a wide-range of interests. WIth those sites, left navigation works better than top navigation.

    • ShellShock Uk

      Mar 10th, 2011

      I was just about to make the comment about F shape reading myself but Norman has beat me to it. Nielsen is pretty much at the top of his game so I take notice of what he has to say, he conducts hours and hours of testing and research.

      • Andrew

        Nov 4th, 2013

        When I first heard about Neilson years ago I went to his website and i found page after page of 100% width body text. Anyone who has ever read a book or used a screen larger than 1024 px will understand why this just poor UX. Good lesson that day, always think for yourself and don’t just trust what others say blindly.

    • Robert

      Mar 19th, 2012

      Your correct Herman the research by Nielsen does indicate that users read a site in an ‘F’ shape. I always tend to put navigation at the top of a site because of this.

      Major websites such as the BBC tend to have their navigation menus at the top which I feel most users are now used to.

  4. Chief Conversionista

    Dec 9th, 2010

    It’s also interesting to consider how menus expand and how that eftects scanning, reading and CTR. Web Arts in germany have made interesting research on how “Mega dropdown” options effect conversion .

    http://www.konversionskraft.de/checklisten/praxistipps-conversion-optimierung-mit-mega-drop-downs.html
    (in german, use google translate)

  5. Jai Nunda

    Dec 9th, 2010

    First of all..great article, but there’s no need to point out a winner or choose a navigation because clients may prefer the top navigation. Test it with your target audience and find out how they can complete their search as quick as possible e.g. providing clear labels.

  6. Victor

    Dec 10th, 2010

    I was wondering: Do you have research that proves those fixations and facts you’re quoting or is it your personal perception? It seems not to be clear, but you seem to state them as facts.

    If there’s no research to prove your propositions, then it might be seen as just another opinion, which may or may not be regarded as expert depending on the reader’s point of view and previous experience.

  7. Simon Whatley

    Dec 12th, 2010

    Do you have any specific research that backs up your discussion?

    There have been a number of articles based around where people perceive web objects such as navigation, search and advertisements be placed. None are conclusive and indeed, as you suggest at the end of your article, context in which navigation is placed is key.

  8. Robert

    Jan 13th, 2011

    As you say at the start of the article con­text is king I have some sites where left hand navigation works better than top navigation and vise versa. It depends on the design and as always the best way is to test the site with users using split testing where possible if you have the time and resource.

  9. Arturas

    Feb 1st, 2011

    Indeed this a topic with no one answer, for one our recent projects we combined the top navigation with mega drop downs and left navigation and have seen very positive results, so context is the king :), though usually there is very few space for any innovation when designing navigation.

  10. eric bieller

    Feb 18th, 2011

    I think that horizontal navs are more pleasing to the eye because that’s the direction we read in. Not to mention it just flows better on the page IMO.. Though there is a time and a place for vertical nav.. Just not usually on the front of a website.. Great article!

  11. Russell Bishop

    Mar 10th, 2011

    I’m not sure that I agree with your statement that all items in a Left navigation hold the same priority. I’d assume that, like me, people assume that the higher the item in the list the more important they are. This also works with your idea about the fold, and some items being concealed form initial view.

  12. Marek | Webcentric

    Mar 10th, 2011

    Top horizontal navigation should remain top level navigation. Saying this, there is no reason not to add various expansions such as pull down or mega menus like on http://www.cisco.com to save on both horizontal and vertical space. This gives the user a richer experience without getting “copy shock” or more correctly navigation shock.. being presented or “bombarded” with with too many options at once, reduces the usability of the navigation and reduces the level of user experience to disappointment and instant fail.

  13. Andrew

    Mar 10th, 2011

    I thought it interesting that noone has mentioned the effectiveness of combining both top and left navs, depending on context of course. Just saying because it seems a little extreme a debate to make it about ‘or’, when ‘and/or’ is more likely.

  14. Pieter

    Mar 14th, 2011

    It’s simple: main navigation goes at the top, secondary navigation goes at the left. It’s what works best, mainly because users are used to it from the big websites.

  15. tyler

    Mar 14th, 2011

    Great article and here are my two pennies:
    I say top is better for a website that has a lot of main menu items.
    I think left is best for websites that have less main menu items.

  16. web designer

    Mar 22nd, 2011

    A good article and one that will cause a difference of opinion I am sure. In my (humble) opinion, the left navigation looks better – as people generally look down a web page (as opposed to looking at the top for the navigation). Just an opinion though :)

  17. Athena

    May 1st, 2011

    Your own navigation got me a little confused. I clicked on one of the comments on the right hand side thinking they were the comments for this article, but was taken to the comments for a completely different article.

  18. Kev

    Jul 11th, 2012

    I think responsive top navigation is the best way to go. I have some with and without a drop-down menu, and semi-transparent nav bars that will match any webpage background.

    Check out this Responsive Top Navigation.
    http://templatz.co/navigation.php

Leave a Comment