The Case Against Vertical Navigation

Advertisement

In a recent article about unusable and superficial beer and alcohol websites1, I made the claim that using left-hand vertical navigation is an out-of-date method in modern web design. In the comments, a few people wondered why I said this. I was surprised that it got any attention at all, because it was a brief comment in the article, and didn’t constitute a substantial part of the argument I had put forth. Nonetheless, I decided to write an article describing what I feel is a solid case against using vertical navigation in modern web design.

Naturally there are exceptions to every rule, and I’ll discuss those briefly at the end. But first I’m going to present five reasons why vertical navigation should not be used and why designers and architects should almost always construct their sites with horizontal navigation in mind.

It should be noted here that when I refer to “vertical navigation”, I’m talking about the top-level, primary means of navigating a website. This would not include left or right sidebars that have secondary links and call-to-action areas that are perfectly acceptable in many circumstances.

It Discourages Information Architecture

Approximately eight to ten years ago when vertical navigation bars were much more prevalent, websites were created using a fairly simple process: The client gave the designer x number of pages, with page titles and content for each. The designer created a one-level-deep website with all pages linked to from the home page. In many cases, the only way to accommodate such a structure would be by means of a left-hand vertical navigation bar. Below is an example of a site created in that manner.

Thora Industrial Plastics2

Thora Industrial Plastics3

Believe it or not, I designed the Thora website in the spring of 2001. It was one of the first sites I ever designed, and it hasn’t changed since — aside from a few small text updates. It was created using the exact method I described above, without any thought given to the purpose of the site, potential goals, or other architecture-related factors. Looking at the site now, it’s not really clear what this company does. Are they manufacturers? Are they a repair facility?

Only after reading some of the content on the site do we see that they manufacture, install, repair and otherwise service various types of industrial equipment. But those facts could have been communicated more clearly by including a simpler navigation bar with links like “Manufacturing”, “Repair”, and “Installation” — instead of the overly-specific “Wet Process Systems”, “Tanks”, and “Air Management”. This would then allow for a more aesthetically-pleasing horizontal bar that would serve to facilitate a more organized structure that’s not just one level deep.

Design Should be Based on Careful Content Analysis

Today’s web professionals have recognized the need for proper information architecture. Thus, before design work begins, a site’s content should be carefully analyzed so that the resulting design will produce a logical hierarchical structure that is readable, usable, and helps maximize conversions and click-through rates.

Jeffrey Zeldman on content analysis before design4.

Zeldman on Content and Design5

A site that uses a left-hand vertical navigation bar doesn’t require site architecture or related usability analysis because, as mentioned, sites built in that manner will often lack depth and fail to make their purpose clear.

The specifics and ramifications of advanced information architecture are certainly beyond the scope of this article, but advanced knowledge in such areas is not necessary in order to recognize the drawbacks and limitations posed by vertical navigation. A basic understanding of what makes a website successful in today’s market is all that’s needed in order to see the advantages of a simple, clear, and usable horizontal navigation bar.

It Wastes Prime Screen Real Estate

As discussed in the previous section, design in today’s market needs to be based on strong information architecture. The navigation paths taken by users should have clearly defined goals and outcomes. A vertical navigation bar that sits to the left of a page’s content on every screen wastes valuable space that could be used for more important things. Yes, it’s true that you want navigation to be easy to find, but you also don’t want navigation to unnecessarily crowd the left side of the page, which studies have shown6 will draw a user’s eyes more often.

In an online world where content is king, we don’t want our users to be fixated on pretty navigation bars — unless they’re navigating. But once they have started to navigate, we want their attention drawn to call-to-action areas and to primary content that will help them accomplish their goal on the website and help us make conversions.

Recognizing its Limitations

Examine the design and style of many of the sites showcased in CSS galleries, and you’ll notice a strong trend towards simplified horizontal navigation while allowing content areas to have strong visual focus. Below are a few screenshots from sites that would be drastically different if they had not designed their site based on horizontal navigation.

Dan Conaway7

Dan Conaway8

Although the Dan Conaway website (above) has a few usability issues, the use of a horizontal navigation bar allows focus to be placed on the page’s content area and on the call-to-action sections (“Recent Projects”, “Consulting”, and “Ranting”). On this site, the user is drawn to these larger elements, while still being able to find the primary navigation bar at the top of the page.

WebDesignGuys9

WebDesignGuys10

The WebDesignGuys website (above) puts strong visual focus on the most important aspects of their business — their products and services. Immediately the user is visually and textually informed that this company provides affordable design, CMS and E-Commerce development.

Meanwhile, functions like browsing their portfolio or contacting them are available through the simple and non-obtrusive horizontal navigation bar at the top of the page. How would this site’s architecture and design be affected if they had opted for vertical navigation?

It Doesn’t Conform to Real-Life Reading

This is a problem related to the previous section on visual focus, and is probably debatable. There aren’t many areas in life where a person is asked to read something that has a “left hand menu” that resembles what we find on websites that feature vertical navigation. In general, people are accustomed to reading content that spans the entire width of the reading area, or else is broken up into boxes or columns within the reading area. In either case, the content is vertically sandwiched between a header and footer. Books and magazines are a good example of this.

Magazine Spread on Flickr by mikeweader11

Magazine Spread on Flickr by mikeweader12

The magazine spread shown above displays its main content and photos between a simple header (“book review”) and footer (page numbering, etc). Although print design and layout are significantly different from that of web, modern web design and layout techniques are increasingly utilizing principles found in print design. The concept of a “header” and “footer” is simply a natural part of that current tendency.

Readers Aren’t Used to a Left-Side Menu

This header-footer tendency is a way of conforming to the user’s desire to read a web page in a familiar magazine format, rather than in a bizarre format that places a common distracting element on the left side of the page (i.e. vertical navigation).

Don’t misunderstand what I’m saying here. I’m not saying that a site will be more usable if it follows print magazine layout methods, nor am I necessarily advocating the recent blogazine trend13; I’m saying that 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 a hindrance to a site’s usability.

Of course, as I pointed out, this issue is debatable. But I strongly feel that the current tendency towards horizontal navigation is partly due to the realization of many web designers and site architects that stronger focus on content will help create more readable and usable web pages.

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

In whatever direction your navigation points, any sub-menus that you include in your navigation will point in the other direction. That is, if you opt for horizontal navigation, sub-menus will drop vertically, and vice-versa. Sub-menus are generally more usable as drop-downs than they are as fly-outs, the latter of which would occur in a vertical navigation bar.

Vertical Navigation Example with Fly-Out Menus14

Vertical Navigation Example with Fly-Out Menus15

Horizontal Navigation Example with Drop-Down Menus16

Horizontal Navigation Example with Drop-Down Menus17

A site visitor’s natural tendency is to find common navigation elements near the top, and if there are sub-menus, they would drop down. Drop-down menus are more natural to use, are more common (therefore are easier to figure out), and do not clutter the middle-left side of the page where the user’s eyes are more likely to be focused.

Drop-Down and Fly-Out Indicators

Also, a properly designed sub-menu system will include a visual indicator of the sub-menus. For horizontal navigation, a downward-pointing arrow, or triangle, is the most common method, and a right-pointing triangle would be used for vertical. While the downward-pointing arrow for drop-downs is universally understood and generally does not provide many usability issues, the right-pointing arrow indicating fly-out menus is not be as easily understood.

A right-pointing arrow on a website does not usually identify fly-outs. In fact, a right-pointing arrow is often used for call-to-action buttons, sliding content areas, and external links. Look at the screen shot below from CNN’s website:

CNN’s External Site Indicators18

CNN's Microsite Indicators19

The “money” and “sports” links in CNN’s horizontal navigation bar (above) have small triangles pointing to the right, which I’ve indicated with blue arrows and circles. These triangles are evidently placed to tell us that those links point to differently-branded sections of CNN.com, indicating that these links are not directly related to CNN.

If these links were in a left-hand vertical navigation bar, the user would most likely think they pointed to fly-out menus — which would cause confusion when the fly-outs didn’t work. I think a Wikipedia-style external link indicator20 would be better in either case, but the method chosen by CNN works better in a horizontal bar because no one is expecting a fly-out menu in a horizontal bar.

What does this all mean? If a site is ever going to incorporate sub-menus into its navigation, a vertical menu might cause momentary confusion, whereas horizontal navigation would provide a smoother user experience.

It’s Not as Successful, According to Studies

In a study called Eyetrack III: What We Saw When We Looked Through Their Eyes21, results showed that top navigation performed better than left-side navigation. Interestingly, according to the results, even right-side navigation had better success than left navigation.

Below is a quote from the published report on the study:

“While testing several homepage designs, we varied the placement of a navigation element: top (under the flag or logo), left column, and right column.

“Navigation placed at the top of a homepage performed best — that is, it was seen by the highest percentage of test subjects and looked at for the longest duration.”

Left-Side Navigation Virtually Ignored

Related to this are the studies that have demonstrated the “F-Shaped” pattern for reading web content, shown below.

F-Shaped Pattern for Reading Web Content22

F-Shaped Pattern for Reading Web Content23

Even though two of the screenshots above show sites that have left-hand navigation, those elements on the pages did not draw the users’ eyes as often. In fact, the top sections of the pages were more successful in drawing the eyes than were the left sidebars. Therefore, expanding the content area to fill the left side of the screen is usually a better approach, since the user’s eyes aren’t going to bother with the navigation bar anyways.

The Few Benefits Are Negligible

Those who would argue in favour of vertical navigation (or at least put it on equal ground with horizontal), usually argue for reasons that are not very strong. One reason to vouch for vertical navigation is that it allows the use of longer link names, even allowing the text for a single link to span multiple lines. So, you could have short link names like “Home”, “About”, and “Contact” as well as long ones like Wet Process Systems24 and Elderly Woman Behind the Counter in a Small Town25. Those last two would be difficult, if not impossible, to attempt to incorporate into horizontal navigation, but are quite feasible in vertical.

Another reason vertical navigation might be chosen is that it simplifies the ability to update primary navigation links. In other words, if you have a horizontal navigation bar with five primary links spanning the width of the site, you would have to restructure the entire navigation bar in order to add a new link. On the other hand, with vertical navigation, adding a new link is quite simple.

The mock images shown below illustrate this apparent benefit to vertical navigation:

The truth is, those two benefits (namely, the flexibility to use longer link names, and the ability to easily increase the number of primary links) may be indicators that a site lacks purpose, is poorly organized, and was designed without much thought given to content or site goals. Boasting about the maintainability of a vertical navigation bar is not a valid benefit if it is accompanied by a vague purpose and poor structure.

In most cases, the long-term benefits of using horizontal navigation will largely outweigh the potential benefits of vertical, making such benefits easy to disregard.

Exceptions to the Rule

If this article constitutes a “rule” that you should never use vertical navigation, then some exceptions to that rule would potentially be:

  • An information-heavy site that will often require changes to the primary links
  • A site whose primary links must have long names
  • A site that uses both horizontal and vertical navigation
  • An e-commerce site with a vertical display of product categories and sub-categories
  • A minimalist design
  • A client who insists on it

There may be other compelling reasons to use vertical navigation, possibly related to design choices or space limitations in the top section of the site, but they would be rare instances.

Of course, the fact that I’ve listed 6 reasons why vertical navigation could be justified doesn’t mean it necessarily should be used in all of those circumstances. In most of those cases, horizontal navigation could still provide a viable solution if the navigation section is designed and coded with flexibility in mind, and if drop-down menus (or even mega drop-down menus26) are incorporated.

Effective Use of Vertical Navigation

As discussed, there will be situations where vertical navigation will be chosen — and it has been used nicely on a lot of current websites. Below is a showcase of some sites that utilize a form of vertical navigation in a respectable way. Most, if not all, of these sites fall under one of the “exceptions” mentioned in the previous section, while they ensure that content has primary focus in the user experience.

Porsche27

Porsche28

Auxiliary Design Co.29

Auxiliary Design Co.30

Sensis31

Sensis32

Poli Maraton33

Poli Maraton34

Resource Design [rede]35

Resource Design [rede]36

Chapters Indigo Books37

Indigo Books & Music38

House of Spy39

House of Spy40

Jodi Arnold41

Jodi Arnold42

mytheresa.com43

mytheresa.com44

From The Couch45

From The Couch46

Envira Media Inc.47

Envira Media Inc.48

Conclusion

Zeldman said it best: “Content Precedes Design”. If site architects and designers keep that formula in mind, they will have a greater chance of producing a successful user experience.

Often when a website is redesigned, the switch will be made from vertical to horizontal navigation, but rarely does it occur the other way around.

In fact, designers and architects are increasingly creating user experiences focused so strongly on content that navigation starts to become indistinguishable from content. This type of seamless experience is more effectively created when a horizontal navigation bar is used because horizontal navigation does not intrude on the content area and it’s still easily accessible visually and otherwise.

More often than not, a horizontal navigation bar will be a clean, effective, and user-friendly choice that can help a site reach its goals without hindrance to the user experience.

Further Reading

By the way…

Smashing Magazine is offering a student trainee position52 in Smashing Magazine’s Office in Freiburg, Germany. We are looking for a motivated trainee student who wants to learn about online publishing and editorial work. You can gather a first hand experience from one of the most successful blogs by working side by side with the Smashing Magazine’s editorial team. Details53.

And for our German readers: Smashing Magazine sucht Unterstützung für die Redaktion54 — Stelle: (Online)-Redakteur m/w. Details55.

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/12/07/the-unusable-and-superficial-world-of-beer-and-alcohol-websites
  2. 2 http://www.thoraplastics.com/
  3. 3 http://www.thoraplastics.com/
  4. 4 http://twitter.com/zeldman/statuses/804159148
  5. 5 http://twitter.com/zeldman/statuses/804159148
  6. 6 http://www.useit.com/eyetracking/
  7. 7 http://www.wakesomebodyup.com/
  8. 8 http://www.wakesomebodyup.com/
  9. 9 http://webdesignguys.net/
  10. 10 http://webdesignguys.net/
  11. 11 http://www.flickr.com/photos/mikeweader/3010747256/
  12. 12 http://www.flickr.com/photos/mikeweader/3010747256/
  13. 13 http://www.smashingmagazine.com/the-death-of-the-blog-post/
  14. 14 http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/
  15. 15 http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/
  16. 16 http://www.brothercake.com/dropdown/
  17. 17 http://www.brothercake.com/dropdown/
  18. 18 http://www.cnn.com/
  19. 19 http://www.cnn.com/
  20. 20 http://en.wikipedia.org/skins-1.5/monobook/external.png
  21. 21 http://www.poynterextra.org/eyetrack2004/main.htm
  22. 22 http://www.useit.com/alertbox/reading_pattern.html
  23. 23 http://www.useit.com/alertbox/reading_pattern.html
  24. 24 http://www.thoraplastics.com/wet.html
  25. 25 http://en.wikipedia.org/wiki/Elderly_Woman_Behind_the_Counter_in_a_Small_Town
  26. 26 http://www.useit.com/alertbox/mega-dropdown-menus.html
  27. 27 http://www.porsche.com/usa/
  28. 28 http://www.porsche.com/usa/
  29. 29 http://www.yourauxiliary.com/
  30. 30 http://www.yourauxiliary.com/
  31. 31 http://www.sensis-studio.com/
  32. 32 http://www.sensis-studio.com/
  33. 33 http://www.polimaraton.si/
  34. 34 http://www.polimaraton.si/
  35. 35 http://rede316.com/
  36. 36 http://rede316.com
  37. 37 http://www.chapters.indigo.ca/
  38. 38 http://www.chapters.indigo.ca/
  39. 39 http://www.shophouseofspy.com/
  40. 40 http://www.shophouseofspy.com/
  41. 41 http://buy.jodiarnold.info/
  42. 42 http://buy.jodiarnold.info/
  43. 43 http://www.mytheresa.com/
  44. 44 http://www.mytheresa.com/
  45. 45 http://www.from-the-couch.com/
  46. 46 http://www.from-the-couch.com/
  47. 47 http://enviramedia.com/
  48. 48 http://enviramedia.com/
  49. 49 http://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/
  50. 50 http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/
  51. 51 http://www.welie.com/patterns/showPattern.php?patternID=main-navigation
  52. 52 http://www.smashingmagazine.com/student-trainee-position-in-smashing-magazine-s-office/
  53. 53 http://www.smashingmagazine.com/student-trainee-position-in-smashing-magazine-s-office/
  54. 54 http://www.smashingmagazine.com/online-redakteur-m-w-gesucht/
  55. 55 http://www.smashingmagazine.com/online-redakteur-m-w-gesucht/

↑ Back to top Tweet itShare on Facebook

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

Advertisement
  1. 1

    Thank you for your insights. While it is difficult to create a hard and fast rule for web design, I can appreciate your clear effort at describing your thoughts. I agree, but the sites I have built have always included a horizontal navigation. Until now, it didn’t occur to me that this was why. I have always designed websites to approach the user kindly, and having to scroll down to navigate seemed like more a of a nuisance than it was worth. I believe in being as concise as possible with content on the landing page, for fear of bogging down the user. Thank you for giving me an explanation for my choices, and giving me an argument for my methods the next time a client backs me into a corner.

    0
    • 102

      Marek Andreansky

      March 14, 2014 4:15 pm

      Funny thing that smashingmagazine actually has quite a long vertical menu :) Removed it in dev tools and all was well.

      0
  2. 203

    I have a real objection to the implications of the eye-tracking study. Some will argue that the eye should track to the navigation of the website or that there’s a problem with the eyes not naturally going in the direction of the navigation. I believe that it’s highly site and context-dependant. In other words, if the landing page (or whatever page the user comes to) happens to have high-quality content, then I want the user to be reading that first and I think navigation slows down and distracts from the content I’m trying to present to the user. If THEY decide that the content isn’t exactly what they are looking for, then they can immediately go to the navigation and proceed to more specific details or other parts of the site as appropriate.

    There’s no denying, most of the sites I’ve built do use horizontal navigation (mostly due to small link names, no hassles with extra float layouts and most of those sites are centered anyway)…But for the one that put a high value on content, I’ve actually felt more confident putting navigation to the side.

    I apologize if I missed somebody else saying this, I didn’t get to skim all of the comments…

    4
  3. 304

    Hi Louis,

    Thank you for a wonderful article. I have a few questions for you, and I hope they have not already been covered.

    1. Do you feel that horizontal navigation is also (as a rule) superior for software programs? It seems to me that the majority of software uses vertical navigation, though it is most definitely done both ways. Microsoft Outlook is a good example.

    2. Have you seen the new Facebook design? It relies heavily on vertical navigation and I personally love it.

    3. For what it is worth I have personally studied this issue endlessly and am convinced it can be done equally well either way. I personally prefer vertical navigation strongly for any program I spend a lot of time in, but I can easily adapt to either method.

    0
    • 405

      David,

      Glad you enjoyed this article. Sorry for this late response — I do check my older articles just in case there are any interesting comments to read or respond to.

      1. I would not be able to answer any questions on software design, because that’s not an area I’ve ever studied.

      2. I hardly ever use Facebook, so I haven’t noticed any difference in their design. But I will say that Facebook would not qualify as a good measuring stick for anything related to navigational design because when people visit Facebook, their purpose on the site has almost nothing to do with a “primary navigation” bar, and more to do with call-to-action areas throughout the site, which may or may not be part of navigation sections, primary or otherwise.

      3. Whatever works for you is fine with me, but when we design things, we shouldn’t be too insistent on what we personally prefer, but instead should consider the audience and the possibilities for improving sales and conversion rates. For the reasons mentioned in this article, I think horizontal works better for web site navigation.

      1
  4. 506

    I totally disagree with the original analysis. First, because eyetracking studies do show that users start reading from left to right, as expected in our Western societies.
    They actually scan content and tend to look for actionable keywords. The scanning movements seem to start from left to right and then from top to bottom and bottom to top, which would promote a left vertical navigation. Besides, April 6th Alertbox from Jakob Nielsen states:
    “Web users spend 69% of their time viewing the left half of the page and 30% viewing the right half. A conventional layout is thus more likely to make sites profitable”.

    I would agree that there are many contradrictory results out there, and besides, there are trends. The top navigation trend did certainly react to the old-fashioned left navigation trend. It is difficult to sort-out guidelines, but many usability experts are putting back the left vertical nav at the day’s order. Ultimately, guidelines are only one set of evaluation of the user experience and more needs to be done to really make a design decision.

    6
    • 607

      I agree with this post. I think what the article says about using top nav makes sense for say, a home page, but to me left nav is what people want to see once they start drilling down content. I see more and more sites going this direction.

      My main problem with the article is that it needs to narrow down to the situations where you shouldn’t use a left nav, its way too broad right now.

      4
  5. 708

    Great article Louis that has sparked an interesting debate. There have been some great comments here, some of which provide additional insight that is useful… you can definitely tell the designers from the marketing and UX crowd…

    0
  6. 809

    Your point is stated very clever. Thank you.

    0
  7. 910

    OT:
    since you guys wrote about them, webdesignguys.net/ have risen their price a lot!
    Smashingmagazine=Oprah :))

    0
  8. 1011

    One exception to the rule that was left out is mobile web layouts. Vertical navigation can be very useful here.

    1
  9. 1112

    Unless you own a site like eBay or Digg, where your audience is broad and interested in a variety of topics, a top navigation will usually perform better. That’s because most people have niche sites.

    However, I think it’s far better to understand why top navigation works better than left, and why, in some cases, left works better than to simply one is always better than other. I don’t think this article really gets down to the bottom of why.

    This article I wrote gives a much deeper analysis, so that you can understand why top navigation works so well and why sometimes left navigation works better.
    http://uxmovement.com/design-articles/top-navigation-vs-left-navigation-which-is-better

    1
  10. 1213

    I don’t agree with the waste of screen real estate.
    Websites are often still designed with fixed layout like 960-1024px, while displays are nowadays more capable than that (a 13″ is 1280px). With the advent of 16:10 widescreens (and now 16:9) and the finally acknowledgement that text-content should be column-ized for readability, there is much more horizontal space than vertical.
    And i think it’s one of the reasons why so many designs are horizontal-scrolling.
    In this scenario a vertical nav-menu steal less screens space, i think.

    The eye-tracking studies are giving a very strong advice, it’s true, but every heat-map i’ve seen was portraying an “old-gen” website, something conceived like a portal, with the same, boring, old 3-col-layout. I think that if you place elements in the right way (blank space is very important for eg.) you can drive the visitor’s eye to the right place in any case.

    0
  11. 1314

    Dear All

    Great post! The best I have read in a long time garnering up useful debate and allowing us to challenge our assumptions.

    We are in the middle of this debate right now whether to go:

    (1)Horizontal Menu with Flyouts on home page with a secondary vertical menu that is displayed only on deeper clicks into the website. Eg of this menu type are http://www.cafepress.com and http://www.marthastewart.com

    OR

    (2) A Vertical Menu wtih flyouts that stay constant throughout the user experience. Eg of this menu are http://www.overstock.com and http://www.walmart.com

    Our internal team have been debating on this and cannot decide. Does anyone have an opinion which one works better for a large scale ecommerce site based on looking at the above mentioned examples?

    Best Wishes

    Sharnee

    0
  12. 1415

    Louis, found this article via a SitePoint link over a year after its publication. Excellent and definitive.

    0
  13. 1516

    Late, I know, sorry. Site nav is only looked at when needing to navigate. Top, left, vertical, or horizontal, I think is somewhat pointless and the eye-tracking studies to support such arguments even more so. Aesthetically main site nav should be made to be obvious as to what is, main site nav. I think today’s users, my elderly mother excluded, need only understand where the main site nav is and once known, they’ll use it when needed. The focus shouldn’t be location as much as it should be function and making that function obvious.

    There’s a couple of comments noting software programs/designs use primarily vertical nav. This is presented in a “compared to web designs” context. I am not sure why this is called out as a comparison to web designs scenario as web sites are easily included in the category. From reading I believe the comments are referring to graphical desktop computer software applications. The standard for design, for 4 decades, for graphical desktop computer software applications is a top horizontal menu of high level organization that flows left to right with vertical drop downs that also usually fly-out left to right. This is a design many web sites try to mimic and the author of this article refers to as easier to use/better than left vertical nav. In his context of “main site nav is better as horizontal”, this seems to fit the bill. I am really curious what software programs/designs these comments are referring to otherwise that are main nav vertically oriented?

    I like the comments about right nav. Ever since Windows designed their excuse of an OS with a “start” bar, I have always moved it to the right side of the screen. Though I read left-to-right, I easily tire of navigating this direction. Navigating right-to-left is far less tiring and far more efficient for me as a right-handed person. I would like to see more user studies with this in mind. Maybe the assumption that reading left-to-right has any relationship to ease of navigation is flawed or out-dated. I always suggest this to my clients, and they never spend any time to think about it before they shun it for the “normal” nav flows. For sites/apps I write mostly for m own use, whether horizontal or vertical I always put the most used navigation to the top and right.

    Lastly, please don’t use Facebook as a guide or example of good design. If ever a site begged for a user-centric design make-over, imho, facebook tops the list.

    0
  14. 1617

    Love the idea, I tried them ,pretty cool!

    Why there are more and more people buying our wrought iron entrance doors in such a bad housing market? Because we never lose the love for the beautiful life.

    Add Beauty to Your Home with our Wrought Iron Doors.

    KOHLIRON IRON DOORS are very nice with high quality! Highly recommended.

    -4
  15. 1718
  16. 1819

    I agree with this post. I think what the article says about using top nav makes sense for say, a home page, but to me left nav is what people want to see once they start drilling down content. I see more and more sites going this direction.

    My main problem with the article is that it needs to narrow down to the situations where you shouldn’t use a left nav, its way too broad right now.

    1
  17. 1920

    Sorry but I don’t find any of the arguments compelling. And the “case” seems to only be a matter of preference and taste.

    I am a translator and I’m setting up my website. According to this article, my website should have a horizontal menu. Do you know what I hate about horizontal menus, and all menus on the web for that matter? I hate having to scroll all the way back to the top of the page when I’m done reading some content. I hate having to drag a slider on a 3-mile long page.

    What is surprising is that the article fails to mention that even dumber than horizontal menus, are vertical menus that waste space of the left hand side: the menu is no longer visible as it has gone through the top of the browser window but the space cannot be reclaimed. THAT is stupid and, in my book, it’s a better argument for the case than all the ones the author listed. Oh, and I wonder how we’ve grown accustomed to having vertical empty space on our web pages without throwing a hissy fit. The perfect example is any blog article à la WordPress with loads of comments. For instance, on this very page, not even half of the page width is allotted to the article and comments.

    In general, it would be so easy to use a navbar that sticks to its position and always remains visible. In all cases, whether horizontal or vertical, the menu is supposed to help users get to where they want to go. It’s a navigational tool. Period. Not a hint about how seriously the content was thought over before frantically hitting the design button. Not a deterrent of “information architecture”
    Sometimes, like for my website, there isn’t that much content! So why bother to treat the small content pages as though they were from the NY Times’ website?

    The exception list lacks an item for websites that showcase independent workers. We don’t have many pages, we don’t need a structure more than one-level deep, but we still offer content to netizens. Your article seems to advocate that if it’s not several levels deep, it’s not useful.

    Moreover, nearly all screens today are widescreens. Which means anything horizontal eats up space that is much needed. No wonder all browsers went through a horizontal-widgets-trimming phase.

    As for “Fly-Outs Aren’t as Usable as Drop-Downs”, it’s just not true. Both are popup windows/areas. What about having the same exact menu shown as a vertical menu AND as a horizontal menu? That would provide a fair basis for comparison. Actually, I don’t see why a “fly-out” would behave different from a drop-down menu area. If you ask me, I would say that “mega drop-down” menus are the real indicator of badly-organized content. And as for the “Drop-Down and Fly-Out Indicators”, I never would have construed the arrows on CNN as a marker of external links if the article hadn’t said so.

    On a final note, I am building my small 10-page showcase website as an Ajax app, with language switching and content loading happening without a full page refresh. I want it to be responsive, easy to use and suitable for most screen sizes, including smartphone screens. There’s no way I’m using anything but a permanently-on-screen vertical navigation bar located on the left-hand side. GMail has its navigation on the left as does Yahoo Mail. Ajax apps are also missing from the exception list.

    Anyway, I think all five reasons can be easily overruled.

    5
  18. 2021

    Great Post – This is a good post full of information you can show to convince a client against Vertical Menus :)

    -5
  19. 2122

    Love the exception: “A client who insists on it” ; )

    Thanks for the post.

    1
  20. 2223

    Excelent article! I was looking for this kind of argumentation for a long time in moments of chose vertical ou horizontal menus.

    -1
  21. 2324

    According to the Model Human Processor, our eyes move in short saccades (when we read), and our fovea span is only 3 degrees wide. Horizontal menu in this respect may require more head and eyes movement (i.e. more time required to perform a task), as compared to vertical menu. Of course, 3 items in horizontal menu would win over 30 items in vertical one, but I do believe that vertical menu tends to be better in terms of performance. I also think of it this way: we have bulleted lists all over but rarely that we see bulleted lists positioned horizontally… Horizontal navigation seems to be a generic invention of the Web, whereas vertical lists exist everywhere pretty much.

    0
  22. 2425

    Thank you for the article!
    Technology having moved on, I am wondering if a wide horizontal menu might be a disadvantage for viewing on smartphones?

    0
  23. 2526

    Interesting how this site now has not one but TWO left-side navs now. The responsive age has really changed this line of thinking. Maybe a follow-up article is in order?

    1
    • 2627

      Yes, this!

      Pointing to an article/study from 2004 doesn’t feel very relevant due to smartphones and lots of other factors.

      1
  24. 2728

    It’s funny to read an article against vertical navigation on a site that actually has a vertical navigation :) I’m aware that this article is from 2010 of course.

    3
  25. 2829

    This is a great article, and I think it applies even more in 2013. For those above questioning how horizontal menus work on smart phones, the best answer is that you convert it to a mobile menu (3 lines that you click to expand) using responsive design. I have a client right now who really, really wants a vertical menu. But they also want responsive design. I have no idea if the two are even possible without taking up an insane amount of precious real estate, and it’s not possible to easily convert the kind of menu they want into a responsive menu.

    I checked out each of the links mentioned above as good examples of vertical menus. Not one of them is a responsive design as pictured, and several have been changed to horizontal menus in order to accommodate responsive (Porsche does a great job of this). A few of the sites are no longer accessible, and the ones that remain the same shrink down so small that they are almost impossible to decipher on a phone.

    I’d love to see an update to this article that addresses the new directions we are moving in web design!

    2

↑ Back to top