Blog - Daily Thoughts

29/03/2011

Which is bet­ter for users, a top or left nav­i­ga­tion? Web design­ers have debated this issue for a long time. Many have drawn their own con­clu­sions. Many have mixed feel­ings. How­ever, the truth is that there is no absolute answer. When it comes to design­ing for users, con­text is king.

 

A nav­i­ga­tion that works well in one con­text, may not work as well in another. To fig­ure out which nav­i­ga­tion is best for your site, it’s impor­tant to under­stand the dif­fer­ent con­texts where the top and left nav­i­ga­tion work best.

 

 

 

Scan­ning

A left nav­i­ga­tion is faster and more effi­cient for users to scan. In just three visual fix­a­tions, users scan six items in the left nav­i­ga­tion com­pared to the three items scanned in the top nav­i­ga­tion. The left nav­i­ga­tion also facil­i­tates a ver­ti­cal scan­ning direc­tion that is nat­ural for peo­ple, while the top nav­i­ga­tion forces a hor­i­zon­tal scan­ning direc­tion that peo­ple often use when they’re reading.

Page Space

A top nav­i­ga­tion con­serves more ver­ti­cal page space than a left nav­i­ga­tion. With a left nav­i­ga­tion, the nav­i­ga­tion links occupy the left col­umn of your page. This shrinks and nar­rows the con­tent area of your page, which means you will have less space for your con­tent. A top nav­i­ga­tion, how­ever, uses min­i­mal ver­ti­cal space, which allows you to occupy the con­tent area of your page with con­tent only.

Item Pri­or­ity

Items in a top nav­i­ga­tion do not have equal weight. The left­most items carry more visual weight than other items because of its place­ment in the pri­mary opti­cal area (top left). Items in the top left area get more expo­sure and are often seen as more impor­tant than other items. The items in a left nav­i­ga­tion, how­ever, do have equal weight because they are all placed on the left with no other items in its oppos­ing direc­tion on the right. Because users read items from left to right, the pri­or­ity direc­tion for read­ing items are stronger hor­i­zon­tallythan ver­ti­cally.

Vis­i­bil­ity

Top nav­i­ga­tion items are more vis­i­ble because they are always above the fold and are eas­ier to find. Left nav­i­ga­tion items are not always above the fold because some­times if you have too many items, some of them can get pushed below the fold. Top nav­i­ga­tions are also eas­ier to find because they are usu­ally accom­pa­nied by the header and logo, both of which are visu­ally dom­i­nant objects on a web page.

Web­site with Broad Top­ics and Interests

There are strengths and weak­nesses with both top and left nav­i­ga­tions. Given these dif­fer­ent strengths and weak­nesses, this implies that the type of nav­i­ga­tion that is best suited for your site is depen­dent on the type of con­tent your site has.

If your site pro­duces a vari­ety of con­tent for a wide­spread audi­ence (e.g. eCom­merce sites) then a left nav­i­ga­tion con­tain­ing dif­fer­ent top­ics would be best for your users. Because your users have a range of inter­ests, they are the ones who decide which items in the nav­i­ga­tion are most impor­tant to them. There­fore, it’s impor­tant to place your items in a left nav­i­ga­tion, so that the visual weight and pri­or­ity of the items are neu­tral. This is why most left nav­i­ga­tions order their items alpha­bet­i­cally. This lets users decide what’s impor­tant to them by allow­ing them to effi­ciently scan for the item of their inter­est in a broad set of interests.

Web­site with Spe­cific Top­ics and Interests

How­ever, if your site pro­duces a spe­cific topic of con­tent that’s tar­geted towards an audi­ence with a nar­row set of inter­ests (e.g. niche web­sites), you will have cer­tain nav­i­ga­tion items of higher pri­or­ity than oth­ers. Because the user’s top­ics of inter­est is more lim­ited in this con­text, plac­ing nav­i­ga­tion items in a top nav­i­ga­tion with the most impor­tant items on the left will allow users to find their items of inter­est faster and eas­ier.The abil­ity to scan items isn’t needed here. What’s more impor­tant is the abil­ity to spot the high pri­or­ity items quickly. A top nav­i­ga­tion allows users to do this more effi­ciently and effec­tively 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. Find­ing the approach that is best for you and your users, calls for an under­stand­ing of the con­textinvolved. If you don’t under­stand con­text, you won’t under­stand design.