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, but others have mixed feelings. 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.
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 is 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’re 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 lets users decide what’s important to them by allowing them to scan among 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 items with higher priority than others. Because the user’s topic of interest is more limited in this context, placing items in a top navigation allows users to find what they want faster and easier.
The ability to scan items isn’t needed here. What’s more important is the ability to spot high priority items quickly. A top navigation allows users to do this more efficiently because leftmost items carry the most visual weight.
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.
Book
Affiliate
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.
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.
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.
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.
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
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.
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.
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.
yep. I thought exactly the same thing. Though there is some pretty good research done on the site.. I think there jusyt needed to be a visual designer involved somewhere in the process, as Don pointed out, if it looks better it is percieved to work better, therefor it does… (..and this does not mean great visuals will fix bad UX)
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.
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)
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.
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.
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.
As you say at the start of the article context 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.
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.
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!
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.
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.
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.
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.
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.
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 🙂
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.
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
This is specific to nested menu. Biomechanically, left navigation with menu items require greater effort from your body to move in a straight line. The natural movement from your elbow is a pivot. A top menu is easier to select since we don’t have to compensate for our biomechanics. Of course, this also depends on your pointer speed. I haven’t tested this with non-standard mouse nor touchpads, so your mileage may vary on different input devices.
Hello,with the 2020 now,for user experience,do you think Top Navigation vs Left Navigation,which one is better ? with my experience,i feel the left is better to list all the items and easy to find the correct item to click,but the web designer tell me it is old story and top Navigation is the only way.with your exerience,do you think which one is better ? thanks