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.

Toolkits