Horizontal navigation menus rule!

We have recently performed a website audit for one of our clients and one of the proposed items for review was the positioning of the navigation bar. The design we proposed was leaning more towards changing the website’s vertical navigation menu to display the product categories horizontally across the page, and it posed the interesting question of whether there is still a case to use top level left hand vertical navigation menus in modern web design.

In my search for answers I found this web article published in Smashing Magazine and written by Louis Lazaris: http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation.  The web author explains his case against vertical as follows:

a) It Discourages Information Architecture

A Web designer should always consider the purpose, potential goals and other architecture-related factors when creating a website. The design should encourage Information Architecture and horizontal menus often allow for a more organised web structure which can be communicated more clearly than in vertical top-level menus. In the author’s opinion sites that use left-hand vertical navigation menus do not require site architecture or related usability analysis because, as he states, sites built in that manner will often lack depth and fail to communicate the purpose clearly.

b) It Wastes Prime Screen Real Estate

The author references Eyetracking research which explains the F-Shaped pattern in which web readers read web content. The study concluded that users generally read web pages in a ‘F’ pattern:  first horizontally across the top part of the page; then horizontally a bit further down the page and lastly down the left hand side of the page in a vertical movement. The author warns against crowding the left side of the page with vertical menus since – based on the scanning movement – it will draw the reader’s attention and distract him from navigating. These spaces are better used for call-to-action areas and for primary content that will contribute to users accomplishing their goals on the website and help the website owners achieve conversions.

c) It does not conform to real-life reading

The author states that people are generally accustomed to reading content that spans the entire width of the reading area, or contents which is broken up into boxes or columns within the reading area (as in magazines). Reading vertically down a page does not conform to traditional reading and is contradictory to modern web design trends to conform a little more to the design and layout techniques found in traditional print design. Based on the traditional way of reading, readers are not used to using left-side menus. The vertical navigation bar is an unusual and unique element in web design that doesn’t conform to anything in the real world outside of the web, and thus can be an interference to users.

d) Fly-Outs Aren’t as Usable as Drop-Downs

Sub-menus will always point in the opposite direction of the direction of the top-level navigation option (i.e. on a vertical navigation bar the sub-menus will fly-out while they drop down from horizontal menus). Drop-down menus are more natural to use and do not clutter the middle-left side of the page where the user’s eyes are more likely to be focused as illustrated in the Eyetracking study.

e) It’s Not as Successful, According to Studies

The author sites a study called ‘Eyetrack III: What We Saw When We Looked Through Their Eyes’, which concluded that top navigation performed better than left-side navigation. Left-side navigation is almost ignored and the study claims that top sections of the pages were more successful in drawing users’ attention.

f) The Few Benefits Are Negligible

The author argues that the benefits often cited in favour of the use of vertical navigation bars are negligible. The author feels that the flexibility to use longer link names and the ability to easily increase the number of primary links (which are 2 benefits often cited in the case for vertical navigation bars) can indicate that the site lacks purpose and a well structured content layout. The fact that a vertical menu solves this problem should not be considered as a benefit and case against horizontal navigation.

The author acknowledges that there are exceptions to the rule that horizontal menus are better and also state clearly that most of his points are debatable, but I tend to agree with his views.

My view

In my view, information contained in our client’s website is now much better organised and represented by the newly created and simplified product categories which span the top of the page in comparison to their vertical presentation prior to the website update. It makes it much more apparent that the website is an e-commerce website with a primary goal of selling products and conforms much closer to the traditional way users read printed material.

Old site

The whole catalogue is now also always visible above the page fold where this was not always the case for users using lower resolution screens.

New site

At no point do sub-menus obscure the left-middle part of the page which means that the user’s focus stays concentrated on the ‘Special Offers’ and other ‘Favourites’ featured on the page and he/she is not distracted with fly-out navigation options.

Since we were forced to review the Information Architecture and rethink its layout, the horizontal menu has contributed greatly to a de-cluttered homepage which now has a clearly defined purpose which should increase conversions and ultimately increase sales for the client.  See the new website here.

References

• Louis Lazaris. (2010). The Case Against Vertical Navigation. Available: http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/. Last accessed 12 March 2010.
• Jakob Nielsen. (2006). F-Shaped Pattern For Reading Web Content. Available: http://www.useit.com/alertbox/reading_pattern.html. Last accessed 12 March 2010.
• Steve Outing and Laura Ruel. (Unknown). The Best of Eyetrack III:  What We Saw When We Looked Through Their Eyes. Available: http://www.poynterextra.org/eyetrack2004/main.htm. Last accessed 12 March 2010.
• Candlecorner. (Unknown). New website. Available: http://www.candlecorner.com.au/. Last accessed 12 March 2010.
• Unknown. (Unknown). Louis Lazaris. Available: http://www.smashingmagazine.com/author/louis-lazaris/. Last accessed 12 March 2010.

Related posts:

1. Search engine marketing: SEM
2. Cross-domain login in ASP.NET
3. Revium’s Part in ANZ Rebranding
4. Popular Content Management Systems
5. Creating deployment packages in SVN