Menu Search
Jump to the content X X
Smashing Conf San Francisco

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

The Case Against Vertical Navigation

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 Link

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 Link

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 Link

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 Link

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.



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 Link

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 Link

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 Link

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.

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, 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 indicator 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 Link

In a study called Eyetrack III: What We Saw When We Looked Through Their Eyes, 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 Link

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 Content20

F-Shaped Pattern for Reading Web Content21

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 Link

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 Systems22 and Elderly Woman Behind the Counter in a Small Town23. 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 Link

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 menus24) are incorporated.

Effective Use of Vertical Navigation Link

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.



Auxiliary Design Co.27

Auxiliary Design Co.28



Poli Maraton29

Poli Maraton30

Resource Design [rede]

Resource Design [rede]

Chapters Indigo Books31

Indigo Books & Music32

House of Spy33

House of Spy34

Jodi Arnold

Jodi Arnold



From The Couch

From The Couch

Envira Media Inc.37

Envira Media Inc.38

Conclusion Link

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 Link

By the way… Link

Smashing Magazine is offering a student trainee position42 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. Details43.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43

↑ 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.

  1. 1

    Very glad you had the exception to the rules at the end there ;)

    Just to reiterate, left hand nav’s shouldn’t be avoided – when used correctly they can make for a great top nav!

    People shouldn’t automatically assume top-level horizontal nav just because of trends or because it’s what they’re used to. Obviously needs to work with content on a per-site basis.

  2. 2

    I don’t do horizontal scrolling because my mouse wheel isn’t horizontal.

    Tbh it’s a gimmick.

  3. 3

    I think the effective use examples really highlight that the main problem is the number of links and the separation – often vertical menus feature more options than a horizontal one and these can become a monotonous set of links. There are too many vertical menus that stick a site map on every screen, where the space limitations of horizontal menus force you to consider where the user will want to go above all else and order that logically.

  4. 4

    Design Informer

    January 11, 2010 2:08 am

    I think these vertical menus are great for sites that don’t have too many links. The reason why I don’t like them too much is because often, clients would want to fill those out with more pages, while on a horizontal navigation, you are limited on the amount of menu items you can put so you tend to think about it more carefully.

  5. 5

    @ James

    Have you read the article???? It has nothing to do with scrolling


    Why do people post comments like that when they clearly have no idea what they are talking about….

    Interesting article, I might forward it to some of the hopeless print designers I have to work for who can’t escape from the A4 sheet of paper thinking patten and just cant grasp navigation and site structure relationship.

  6. 6

    As an engineer, the Thora website seems perfectly clear to me. It says right there in the text that they are a supplier, and one column displaying their product categories is about as useful to me as it could be. If there was a large number of categories, it would get confusing, but with a restricted product line it’s fine.

    You’re doing yourself a disfavour by using it as an example of poor design, especially as it was one of your first jobs.

    • 7

      I agree with Louis here.

      Someone coming to the site without knowing what they are looking for would be lost without having to read that paragraph. If your links can describe some of the services offered it does make it easier and less time consuming – you could effectively determine quickly whether you have arrived at the right ‘Thora’ website for example.

      On more than one occasion I have found myself thinking i was at the right place until three pages later I realize it’s a completely different line of business.

      • 8

        I’m going to agree with Paul. It is not necessarily good design practice to cater for the widest possible audience.

        In this case, if you don’t understand what a ‘wet process system’ is, then burying the link under a products and services page is not going to help your understanding. The business is not targeting mass-market consumers and catering for them instead of the target market could equally be described as bad design.

        For mine, the main design features of the primary navigation area are – it needs to be immediately visible and it should not have too many items (admittedly the Thora page borders on too many). Vertical or Horizontal for me is a matter of visual aesthetics.

        • 9

          I’m going to partially disagree with both Paul and Allen here. The goal of a design is to communicate to its intended audience, of course, but doing so with disregard for a possible wider audience is somewhat short-sighted. Ostensibly, businesses are looking to acquire more customers, and focusing on only your current market could hurt you down the road.

          If you don’t understand what a ‘wet process system’ is, then burying the link under a products and services page will indeed help your understanding, because you now know that it is a service offered by Thora (rather than just some process the company purports).

          The human mind is naturally attracted to grouping and organization. “Filtration equipment” and “tanks” may be products that Thora offers, but is “Contact Us” a product as well? It’s in the same hierarchy of the navigation, isn’t it?

          The main navigation should be as streamlined and simplified as possible; the idea is to get you in the direction you want to go, not give the user every option possible just in case they might know exactly what they want. Navigation should be considered more of a set of highway signs than an atlas.

  7. 10

    I agree with this article however one point isn’t imho correct.

    ‘It doesn’t conform to real life reading’

    True and urm…nah.

    True in that we normally read left to right but that is for content only

    False in that since books have been printed (some little time), indexes and tables of contents have been vertical.

  8. 11

    The comments in the ‘It Doesn’t Conform to Real-Life Reading’ section were interesting however neglected to acknowledge Content pages in books and magazines. There is a clear parallel between vertical navigation and content pages as both are structured similarly and used as reference to find the piece of information required further on the book/website.

    • 12

      That’s a really good point. It makes me wonder how many other arguments can be made for vertical menus.

    • 13

      Absolutely. I came to this page looking for arguments as to just WHY my company is forcing my department to change to using a frankly sh*tty and unreadable template with horizontal navigation.
      No real world example of a structured, printed (natural reading) thing with a vertical menu? How about an address book? A lever arch file? A financial ledger?
      The pro for a horizontal navigation is that it’s at the top of the screen where the menu bar is (or used to be according to M$). The con is that it does not conform to English reading thought patterns. When we are searching for category information, we read down the left hand edge, exactly like a contents list. We scan a few words, then saccade back to the left whilst what we just read is processing and being discarded if it didn’t match. If the category matched what we were looking for, we continue to read along, left to right for specific information within that category.
      Look at a library shelf. Left to right gives small variations in title, up to down gives large variations in subject. The index on the end of the row is also arranged vertically.

  9. 14

    Everything nice but…

    unfortunatly I allmost allways use a vertical menu. I work in company where is no any process like “Careful Content Analysis” :/ in most cases there is no any content… it appears after designing process and all I get from client is a list of links (just like it was 10 years ago).

    so I am forced to use vertical menu :/

    oh. and sorry about complaining :)

  10. 15

    My biggest worry for creating websites with top navigation only is the filling of content using a CMS. Most of our users want to edit their websites theirselves. In an ideal world, we could create either 1, 2 or 3 columns. But most CMS vendors only support one. This makes it hard to layout the dynamic text without it being 900+ px wide.

  11. 17

    Other than the eye-tracking studies mentioned in the article, there’s limited evidence to back up your argument – it seems based more or less entirely on opinion. Why can’t left hand navigation be used based on sound IA? I think the answer to why horizontal nav is more prevalent these days is the bias towards fixed-width designs, ergo it’s a trend.

    • 18

      Yep, just like Rob said.

      The argument that vertical nav = poor IA is totally bogus. It is perfectly possible to create good IA and use vertical navigation just as it is possible to create terrible IA and use horizontal navigation. The two are unrelated.

      In fact, isn’t that what the Zeldman quote you used is saying? Content should come first and the design it around it. Doesn’t that go against your primary argument (albeit with a huge caveat at the end) that navigation should be horizontal?

      I think you kind of proved it yourself with the gallery of sites that use vertical nav and work very well.

      While I’m at it…
      The CNN example is, as given, quite correct. But one would have to consider that if the navigation was vertical and on the left side of the page would the designer have used that arrow?

    • 19

      I have the feeling the eye-tracking-study doesn’t really backup the claim that horizontal navigation is better. It shows that people to not look at the vertical menu as long. But why must that be bad? The article here claims that the navigation should not distract from the content. So that would make it _good_ if people don’t look at it too long. Perhaps it was easier for them to understand so they _needed_ less time to check it out as opposed to the horizontal navigation?

  12. 20

    I think a vertical left hand navigation does conform to real-world reading. You can think of the navigation as a “table of contents” of the site; and in the real-world, ToC’s are typically arranged in a vertical fashion because it’s easier to show the parent-child hierarchy of pages/sub-pages.

    Also: to base a rule using a 4-year-old eye-tracking study that doesn’t cover navigation usability but rather, content reading, as supporting evidence is dangerous – even if it was done by the Jakob Neilsen. Why is that?

    First, the study tasks the readers to read the page content; the study was not about site navigation – so the use of it in this article’s context is misrepresented. If the study asked readers to “Find the About page of this website”, the results for the first screen shot would be different because, as web users, you’re going to look for the area that most resembles the primary navigation (which typically looks like a list of links).

    Second, usability studies are very subjective and dependent on the study design. They’re behavioral studies so it’s hard to set up a control versus test case scenario, like you’d do in a science lab or computer simulation. The results depend on the five people that just happened to volunteer for the study. Are those five people representative of the global 1.7 billion’ish internet users?

    Third, it’s hard to come with conclusive evidence from usability studies; the best we can do is guess using our experiences; not unlike, in my opinion, what this article has done. The Myth of Usability Testing on ALA discusses this where several usability teams were tasked to work on the same issue and the results and suggestions were very different from each other:

    It’s a well-written and well-articulated article – but I feel it should’ve given more emphasis on the fact that this is an opinion-based article. I can make 20 arguments FOR vertical site navigation, and call that a “rule”. They’ll mostly be my opinion based on my experience. For example, I personally like the list of links on Smashing Magazine’s right sidebar to find content versus the top horizontal nav. That’s my preference, that’s my opinion. In the end, it depends on project requirements and what the most effective way of presenting content is (and I think that’s what Jeffrey Zeldman meant about that tweet).

    • 21

      Jacob, great points here, thanks for your feedback. Couple of responses to what you said:

      You’re right that tables of contents in print are vertical, but they’re customarily on their own page. Websites are not like that, so I don’t agree with your point on that. I think my argument in that regard is sound.

      And regarding the “studies”, there were two studies that I mentioned. The first one specifically says that horizontal navigation performed better. And the reason I mentioned the Neilsen study was to emphasize the “F-pattern”, not necessarily to say that the study was about navigation. I think it’s fairly common knowledge now that such a pattern in users’ habits exists, and it’s definitely better to keep “common” site components out of the most important areas.

      You also mention that we should “guess using our experiences” instead of relying on studies, but I think that is just wrong. I can’t agree with that. A 4-year old study is much more authoritative than what I can personally “guess” at.

      And of course, as you mentioned, all of this is my opinion. I hope people start to understand that there’s nothing wrong with formulating an opinion on design that is not necessarily held by the blog that publishes the opinion. I’d love to hear yours or anyone else’s opinions in this regard. I suppose SM could post a notification on these types of articles, to show that it’s an opinion piece, but I don’t think that’s necessary. The comments to the article will certainly make that clear, as you’ve done here. :)

      Thanks, Jacob!

      • 22

        Brad Czerniak

        January 11, 2010 6:39 am


        Your print design analogy is problematic. Obviously print design and web design are two different things – I think that’s lesson #1 in web design class.

        In order to claim that your argument is sound regarding tables of contents, you would have to agree that a design that only allows you to page forward and backward through content with a link to a table of contents is an appropriate and effective navigation method based on reasonable web information architecture for all sites.

        I generally assume that navigation (regardless of position and layout) is an inherent part of a website, which itself is a break from print design.

        Additionally, your example of the LTR nature of print design happens to be a good vertical reading example – Cookbooks list ingredients vertically, and it would be weird if their lists were horizontal. In fact, lists tend to be vertical by nature. And what’s (as semantically illustrated by the markup) more of a list than site navigation?

        You can’t have your cake and eat it too by mentioning the F-pattern of the eyetracking studies, then presenting images that show that the f pattern starts to the right of the left-hand vertical nav bar. Which is it? Is left-hand vertical navigation less viewed, or is it taking up screen real estate where users’ eyes naturally go? Maybe it’s just me, but that appears contradictory. Are you throwing the proverbial spaghetti at the wall?

      • 23

        Jacob is right, this is entirely your opinion- and that’s ok. But several statements you made were positioned as fact, when instead, they’re your opinion. Smashing Mag needs to vet this sort of misrepresentation in the editorial process before publishing. If you have data to back up your claims (which you do a couple of times, so kudos for that), cite your sources. Otherwise, these need to be clearly presented as opinion.

        ‘In general, people are accustomed to reading content that spans the entire width of the reading area’

        ‘the vertical navigation bar is an unusual and unique element in web design that doesn’t conform to anything in the real world’.

      • 24


        The first study was demonstrating that there is at least one study showing higher success with horizontal navigation.

        The second study (about the F-pattern) was showing the value of the left side of the screen. Thus, the point is: If horizontal is more successful and the left-side is more valuable, then the answer is clear: Use horizontal.

        I know that point seemed contradictory. I spent a lot of time thinking about that to make sure I communicated my point clearly, but maybe it could have been clearer, I don’t know.

        Anyways, thanks for your feedback.

      • 25

        re: Print analogy versus web design – You cited my main issue with that section right here – print != website. If I were to make an argument for or against vertical navs, I’d leave out the print analogy all together because it’s apples versus oranges in this context. BUT, if you insist on making the analogy, then I think the better analogy would be more similar to a Table of Contents. Remember – you brought up the analogy in the post, not me.

        re: two studies – I know, and to clarify, what I meant was “as one of the supporting evidence” which would’ve disambiguated what I said. I did read the first study, and again, personally I believe the “The Myth of Usability Testing” on ALA applies there (especially when the site the study was on uses vertical navigation, at least, as a secondary nav).

        re: F-shaped pattern – but the F-shaped pattern, if the study was designed specifically for evaluating site nav instead of site content (e.g. Task: “read the list of navigation links and find the About page link”), would also appear on the vertical nav if the list of links had headings (similar in structure to From the Couch).

        As users scan the vertical list of links, you’d see an F-shaped pattern that’s more dominant on the left-hand navigation of that screen shot. So in that respect, the F-shaped pattern doesn’t exclude the vertical nav if the context was “evaluate the site navigation” instead of “read the content”. But the argument above seems to imply that because of the F-shaped pattern, a vertical navigation is ineffective, when in fact, it is also applicable to it and would actually support a hierarchical vertical navigation under the correct context.

        re: 4-year study more authoritative: yes, if it was applied in the correct context, definitely. Otherwise, my guess based on experience and other studies on the subject would be as good, if not better. And I have not stated nor implied that guessing is better than usability study results; only that, in the end, you’ve got to evaluate your choice on a case-by-case project basis.

        And I must say that despite what I’ve said, this is one of my favorite articles here and hope that Smashing Magazine continues to go towards more of these opinion-based articles that foster discussions like the one we’re having now.

        This is one of the few times I’ve been compelled to comment here. This is one of the few times that I’ve come back to an article on the same day to see how the discussion in the comments is progressing (other than the articles I write on Smashing Magazine, of course, which I tend to check neurotically).

        Whether I agree or not with the content is moot because it’s an opinion. You have an opinion. And I have an opinion. It’s better to have these types of posts because it gives you a reason to critically think, explore, and react to the topic more fully than articles that simply tell you what you already know or can find on Wikipedia.

        On Six Revisions, I’ve been trying to get more of these types of opinion/experiential “blog” posts that facilitate constructive discussions among the readers instead of being only informational. This transition has been happening more recently, but I’m not satisfied with the ratio of informational versus opinion/experience posts on the site yet. This post, more than anything, has inspired me to progress further in this new direction.

        I commend your resolution to your argument; it’s much easier to play it safe than to provoke thinking, discussions, and counter-arguments like this post has. Well done.

  13. 26


    January 11, 2010 5:00 am

    What I have found is that a horizontal over time can become just as bloated as vertical. I think we as professionals needs to start looking at navigation in a different way then the norm. I’m actually working on a similar article which looks at new navigational patterns outside our traditional “accepted” forms of navigation.

    I’ve even seen entire sites where navigation and wayfinding were thrown to the curb in favor of a google search appliance…

    Regardless this debate has been on going for years.

  14. 27

    Get real. This is ignorant, opinionated nonsense. You should know better.

    • 28

      Wow, another constructive comment!

      Great Article Louis, I think different opinions are great.

  15. 29

    An insightful post. I’ve avoided using left-hand vertical navigation for a long time now, simply because I never thought it to be user-friendly at all. Glad to see I’m not alone in this viewpoint.

    I’d also like to comment on something that it seems most people who think that, when it comes to navigation on a web site, that one should use print magazines, etc. as good examples for ‘why left hand navigation is OK’.

    One point – yes, we read left to right … but! Most of us are right-handed and reading a web page is not the same as picking up a paper magazine or book.

    When we read web pages we also use one of our hands, not just our eyes. For most of us, that is our right hand to navigate the page.

    Placing navigation on the left-hand side of web pages forces the majority of users to travel their mouse over to the far-left of the page to navigate the site. Hey, this was OK when we did not have large screen resolutions (way back in the ‘olden days’).

    Nowadays users are on resolutions larger than 800×600 and 1024×768 and left-hand vertical navigation, imho, is simply user-UNfriendly in such cases, i.e. making the user do an uncomfortable swing to the left to navigate through a site, with every link *sigh*.

    Think about it, try it for yourself and see if you’re comfortable doing that, especially on a large site.

    On another note, regarding the exceptions to the rules part of the post:

    Recently I’ve had occasion to use a vertical navigation system for a client’s site, and the reason was for one of the exceptions you listed at the end of your article: The primary links have, by necessity, long titles, and try as I might, I could not shorten these suitably to fit on a horizontal navigation bar.

    I fixed the problem by creating a right-hand navigation system that adequately accommodated the link titles. It does a good job of being user-friendly + the navigation doesn’t look like a big foot stuffed into a too-small shoe just for the sake of using horizontal navigation.

    To solve problems one has to think outside the box, and be flexible, this is true for any situation, not just web design. The current ‘trends’ are not always the best solutions in every scenario, so I’m glad to see you mentioning the ‘exceptions to the rule’ – there are always exceptions.

  16. 30

    Zeldman said it best: “Content Precedes Design”?
    No he didn’t.
    Louis Sullivan put it better: “Form follows function”.
    But I’m just being contrarian. Nice article.

  17. 31

    I was pondering a while about this before finally finding I wanted to share in my comment. And I’ve to say Zeldman’s phrase said it all.

    Based on the examples here, it’s not really about which is better; vertical or horizontal. It should be really about which best fits the presentation of the content to fulfill the user experience.

    Monitors may be wider, but user’s attention span and focus would tire easily when eyes have to track too far a width. Therefore, we’ll soon reach a maximum width which we’d feel most comfortable and not make websites any wider.

    And because we can’t go wider, content can only go downwards. Thus, it’s not about whether it’s horizontal or vertical but how should the content be best presented to the user. :)

  18. 32

    So, you show an ugly webstie saying the reason why its bad is because of the type of navigation. Then you show more peer-friendly sites that use left navigation and say that its an exception.

    Your exception list seemed to indicate that your thesis shouldn’t be to NOT use left navigation, rather HOW to use it and expand more on those rules based on the more successful sites.

    I give this article an A, for almost ;)

  19. 33

    Those eye-tracking studies are worthless in this context, as you’re not testing two versions of the same site against each other. As someone pointed out, the aim of that study was for the user to read the content, not find information on the site.

    Get back to me when you do a real world A/B test.

  20. 34

    I love how smashing always finds a way to post an article about something I argued with my boss a week before. I think we’re being stalked!

    Great article. I would love to see more on websites from a usability standpoint, as it’s a very expensive thing to test yourself. I especially love the eye charts.


↑ Back to top