Astheria.com is now an archive and is no longer updated, you can find new writings at kylemeyer.com →


01 11 2010

Browsing through my twitter feed this morning, I happened to notice a headline from Smashing Magazine entitled The Case Against Vertical Navigation. Intrigued, I read through it. I couldn’t agree with anything.

Rather than write a short comment which would be lost within the hundreds soon to be posted, and since some folks on Twitter thought I should expound upon my harsh tweet, here are my counter arguments to the points made in the article, though it’s likely better if you read the article in question first:

Item One: It Discourages Bad Information Architecture

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.

I completely disagree. While a vertical navigation pattern may be more forgiving to an overtly long list of navigation links, the issue here isn’t the choice of layout—it’s the designer. A vertical navigation can contain a short list of well architected links just as well as a horizontal menu, and to say it’s more aesthetically pleasing comes down to the particular design in question and the other content that must be placed on the page.

Consider the example in Figure 1 below, a horizontal navigation bar here would ruin the beautiful top left to bottom right eye-flow the designer has created. The navigation is properly architected for each section, and the navigation is obvious and well placed in the hierarchy so your eye falls across it and recognizes what it is immediately.


Figure 1: Black Estate

Item Two: 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 shown will draw a user’s eyes more often.

It would be ignorant to assume that just because navigation is placed to the left or right of a site in a vertical fashion that no content could fall below it and continue to make use of the space as you scroll down the page. Consider your typical blog template: content in a main column, navigation in a sidebar. More importantly, beneath the navigation, typically lies other sub-content that is less important to the user as they scroll the page looking at the main post content. With a horizontal model, this content would have to be placed above the main content, forcing it lower on the page. Below the main content, forcing it far down the page and demoting it to the footer’s territory, and the lack of importance that may come with this. Finally, perhaps inside the main content, creating a distraction from the title to content to post meta data flow that users are so accustomed to.

Plus, if we’re using a simplified home page to draw users in to the experience, don’t we want them to see the navigation quickly with your usual F-pattern hierarchy? I’d like to use Figure 2 as an example, the content to the right of the navigation is a flash experience to establish confidence with the visitor that the architecture firm creates top notch work. Glancing at the navigation to the left of this experience establishes in the users’ mind where the navigation is when they’re done with the experience.


Figure 2: Shea Architecture

Item Three: It Doesn’t Conform to Real-Life Reading

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.

Now, to be fair, the author mentions this is a debatable point, so I’ll be brief. There are numerous examples elsewhere in the world where a person is asked to read something that resembles a vertical navigation. Restaurant menus, lists in books or emails. In fact, lists in general, which is what we use to semantically mark up navigation menus, no?

Upon finishing a line in a book your eye moves down to the next row. It’s been proven through centuries of roman language based book design that content which spans beyond a certain line-length is degrading the ease with which the reader can interpret the content.

Item Four: Fly-Outs Aren’t as Usable as Drop-Downs

I don’t believe either are usable and truly are the biggest crutch for bad information architecture available. Both have been written about numerous times as design patterns to be avoided.

Item Five: It’s Not as Successful, According to Studies

An excerpt from the quoted 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.”

This is some very subjective research, if a user stares at something longer, does that mean it’s better? If they have to look at it longer to possibly interpret what the item in question is, or which category to pick, is it better? If anything this proves that content on the right side of the screen is seen less often, but the F-Pattern research (figure 3) shown proves that the left-hand side of the page is just as ‘hot’ as the top horizontal, if not more.

The key here is properly designed visual prominence. Whitespace, color, size, and more determine what the eye sees first. While it’s natural to start in the upper left-hand corner it’s the visual design of the page that will determine where the eye goes first. These eye tracking studies are based on information heavy pages such as search results. I totally agree with the research findings when you look at the designs beneath the clickheat maps, my eye goes to where readers would look too. But if that left-hand navigation wasn’t smaller text, lighter colored, and densely packed, my eyes may have done different things.


Figure 3: Quoted Eyetracking Research

Item Six: The Few Benefits Are Negligible

Yes, one of the advantages of a vertical based navigation is being able to fit more in to it due to scrolling. In some cases the flexibility of adding an additional navigation link in the future, without having to rehash the horizontal menu design to include it, is very helpful. While they may be small differences, they have their uses.

Conclusion

The point I would like to make is not that vertical navigation is in any way better than its horizontal counterpart. They both have pros and cons and are situationally more useful than each other. This is part of being a designer. Knowing the design patterns available to you and having the discretion to use the proper one at the proper time.

I hope you enjoyed the counterpoints and encourage you to think critically of such articles in the future. Having thoughtful discussion is an important part of educating ourselves and making informed decisions. I’d love to hear your thoughts in the comments.

Fifty-two

Responses

  1. Kyle,

    To add to ‘Item Three: It Doesn’t Conform to Real-Life Reading’. One should note that there are places in the world (Asia in particular) where people read from top to bottom. There are also places where people read from right to left.

    If anything, the way the eye works its way across the page depends on this. It would seem illogical that that is not the case.

  2. i also thought the article was off on horizontal issue. Either method can be used, it just needs to be used effectively. i all comes down to good design.

  3. I agree wholeheartedly. I thought the article was mostly bs, myself. The claims and the arguments were just so offbase, I wondered if this guy knew what he was typing!

  4. Thank you, thank you.

    I was so annoyed reading that article this morning. Seemed to me that the writer would take logical facts and use them to reach illogical conclusions, nice rebuttal.

  5. I learned from and enjoyed both articles. I never think the “black or white” argument is the right way to go, which is why I liked your conclusion better. The middle way has served me well..

  6. Kyle,

    I like your response, I tweeted it. I’m glad a few people are thinking about what I said and trying to give reasons for their arguments. I think that’s much better than just calling it “ignorant”. :)

    These types of articles are so much better than “here’s a list of 50 jQuery plugins” and similar that add no value to the design community.

    There are a few points I’d like to make in rebuttal, which I might do on my own site later this week, if I have time.

    Thanks again for your thoughts on this.

  7. Thanks for your rebuttal, Kyle!

    I appreciate your dissection, and I agree with your conclusion.

    To me, the placement of navigation should be thought of not in terms of ‘which is superior’, but which benefits the purpose or goal the best (and which is also intuitive for the user).

    In the case of GoMedia.us, the issue of our main navigation was a huge topic of discussion (which also paved the way for a more philosophical, soul-searching conversation about who we are and where we’re going). We realized after a long debate that vertical navigation, along with an absolute placement, made the most sense: it seemed to create both the organization we needed and the look we wanted.

  8. @Louis Thanks for stopping by, I appreciate it and look forward to some great discussion.

    As to their value to the community, I couldn’t agree more and have written about it in the past, the discussion that evolves out of your initial post is invaluable.

  9. Great points, and I agree. Indeed, eye tracking test after test proves the effectiveness of left-aligned information. A vertical list is much easier to scan than a horizontal list of links.

    Thanks for taking your time to challenge the Smashing Magazine article. Unfortunately many designers aren’t using empirical data to build their UI’s.

  10. As one who has been in the plastics biz, I would say that company’s display(navigation) of its wares was spot on. When you are a business it pays to have as much info out for people searching your website as possible.

    I realize this isnt a design issue discussion post by myself, but rather my way of saying the original post was bs.

  11. Amen, Amen, Amen!

    In addition, I’d add that after explaining all the reasons why vertical navigation isn’t effective or useful, the Smashing Mag article goes on to give examples of effective use of vertical navigation…

    THEREBY DEBUNKING THEIR ENTIRE ARTICLE!

  12. Great rebuttal Kyle. You really make a good counter to the original article. While I personally like horizontal navigation better, I shouldn’t be biased about it when designing a website.

    Like you already mentioned, the key is knowing the pros and cons of each one and when to use it.

    Also, I think that a lot of websites/blogs have vertical navigation, we just don’t usually take them into consideration because they are on the right side of the page. Most blogs have their navigation or sub-navigation on the right side of their blog as a sidebar.

    Anyway, great article and looking forward to the other comments and discussions that will spurn from these two articles.

  13. Wow, didn’t take long to write out a response!

    As per the “People aren’t used to vertical navigation” bit, the first thing that popped into my mind was http://www.amazon.com/. Last I checked, it goes back and forth between being the 6th and 7th most trafficked site on the Internet. Guessing people are used to having a vertical nav as well as a horizontal one.

    “It Doesn’t Conform to Real-Life Reading”
    And books and magazines are an example? What about the table of contents?

    “It’s Not as Successful, According to Studies”
    Subjective research indeed. Slicing and dicing of data that agrees.

    I do agree with the original author that drop-downs are friendly than fly-outs, but that’s the personal opinion of one guy.

    In closing, I’d like to agree with everyone who’s said that navigation should be approached on a case-by-case basis.

  14. Due to the fact it is common some people who use the internet less frequently automatically look for vertical navigation. I have seen people miss what I am sure looked to the designer like obvious horizontal navigation.

  15. Verry interesting response to the article. To item four: I have read this many times. Some questions to this. Are Fly-Outs/Dropdowns generally bad? Or depends this on the implementation? And last bat not least: what is the alternative?

  16. I couldn’t agree more… navigation placement clearly (and only) depends on the site’s structure/ flow and overall design layout.

    One of the reasons I tend to lean toward vertical navigation is that it can then still be accessed with scrolling. With the aid of absolute positioning and/or making the links scroll with you on the page, you’re given easily obtainable links no matter how long you venture on. I personally haven’t seen a layout where this is effectively done with horizontal links (correct me if wrong) and get a bit annoyed with I have to pop back up just to go to a new section.

    Anyway, thanks for the rebuttal, Kyle… a good read!

  17. I couldn’t agree more… navigation placement clearly (and only) depends on the site’s structure/ flow and overall design layout.

    One of the reasons I tend to lean toward vertical navigation is that it can then still be accessed with scrolling. With the aid of absolute positioning and/or making the links scroll with you on the page, you’re given easily obtainable links no matter how long you venture on. I personally haven’t seen a layout where this is effectively done with horizontal links (correct me if wrong) and get a bit annoyed when I have to pop back up just to go to a new section.

    Anyway, thanks for the rebuttal, Kyle… a good read!

  18. I agree. That other article was wretched.

  19. Great points you make here Kyle. Glad you took some time to write what was on many of our minds. It’s all relative - navigation, layout, etc. It all depends on what the goals of the site are and should be decided on a case by case basis.

  20. I am glad that the great discussion started here and on Smashing Magazine, the community lacks this kind of discussions.

    I would just echo the others here - it’s not the question which is better, rather which best suits the needs.

  21. Thank you. Exactly what I was thinking when I read Smashing. Appreciate your response here. :)

  22. I agree with you on everything except number four: drop downs are way easier to use in horizontal navigation (at least for me).
    The worst point of the SM’s article is the article itself, one should decide what’s best for every website one by one, not relying on a formula.

  23. Kyle - nice read! I took the path of “write a short comment which would be lost within the hundreds soon to be posted” earlier this morning after reading Louis’s post, and a lot of what I said in the comments over there was stated more eloquently in this post, and down here in the comments by the others.

    I think one point though that shouldn’t be lost is this is the type of discourse we should all be having as a community. Challenge thought, question results of usability studies; even Jakob Neilsen’s idea of the above the fold has been debunked (among other older usability studies they’ve done). This is the only way we can progress.

    I think sites, including mine, have been playing it safe by avoiding the minefields - and we’ve become complacent and afraid of a little bit of discussion. I hope to change that soon.

    I actually liked Louis’s post because of the reactions of the community to it; for a while, it seemed like the community wasn’t talking anymore, all you’d read is “great post. excellent.” comments. If it wasn’t written the way it was, which was in a tone that seemed to say that “Yes, this is fact… always use horizontal navs”, then I don’t think there wouldn’t have been as much great discussion, debates, and critical thinking/reading (like this one).

    Commend Louis for (intentionally or not) initiating some much-needed back-and-forth in the design community. An opinion, good or bad, is better than no opinion; at least for design and its progression.

    I hope Smashing Magazine continues this route of offering opinionated posts more often.

  24. Can I disagree with both views [vertically and horizontally] :P

    What I like in information architecture and web design is that there are no golden rules. Nothing applies to everything. You have to research and test every time what applies better in each situation.

    I don’t buy a generic conclusion based upon some research. Because every design has its own, unique goals.

    There are times where you want to sacrifice a little bit of usability in order to achieve more style, or space for an advertisement. Its all in the game and its not easy to find the balance for a single design, so how can we find the balance for every design?

    What someone can do though is mention some clear benefits and disadvantages of a method on some context.

    Great post!

  25. @Jacob Quite right, it’s great to see the discussion that has blossomed forth as a response, and to see some movement.

    That said, it’s important to keep in mind that Smashing Magazine, with it’s substantial readership, is an influential force on designers in our industry. It is a slippery slope to write opinion as fact and then put it on a site that, while they may post a good number of lesser quality content, does maintain a reputation of credibility in the industry. Portraying opinion as fact can cause ripples in the industry in the same manner of unsubstantiated rumors—the last thing you want is a client who read the article and refuses to use a different navigation layout, even when it’s the better choice in that instance.

    That aside, I would like to see more opinion pieces from Smashing Magazine, but labeled as opinion and not written as manner of fact, though I’m sure that wasn’t Louis’ intention.

  26. @Kyle

    Do you think that Smashing has a very big influence on professional designers? I think that their demographic consists more from the hands on approach photoshop/illustrator user. The people who do what they do for fun or just started out.

    I might be very wrong though, but that’s how smashing seems to me.

    -Arik

  27. @Arik I agree with you, their readership is more geared toward the hobbyist and those starting out, but those people many times become professionals down the road—college students for instance. Clients are likely to find it during researching to learn more about web design before investing in it, etc.

  28. Excellent read! A great article in reply to another article I equally enjoyed. What everyone should get from this is that yes, there are pros and cons of both, but as designers we shouldn’t automatically rule out one or the other, but decide during the design process which form of navigation works best.

  29. Kyle, I posted a response to your article on my own site:

    http://www.impressivewebs.com/response-to-in-defense-of-vertical-navigation/

    Thanks for the interesting discussion.

  30. Well done Kyle, excellent read. We are a dynamic industry and one which is growing rapidly in terms of practitioners. It is only recently in my country that these disciplines are being taught at tertiary level. Before that we were all self taught on the whole. So whats my point…

    What frightens me is the weighting with which sites like Smashing Magazine get in the minds of the less experienced amongst us. I suppose they think if the author is published in such a ‘prestigious’ publication then their opinion must be valid and perhaps more valid than the readers. it is so important for them to have access to counter arguments and alternative opinions if for no other reason than to encourage each and everyone of us to consider more closely every aspect of our profession rather than just jumping on the latest bandwagon.

    I think every author should be duty bound to include links to alternative view points to give the readers wider access to the material. After all it is all about education right?, we’re not trying to brainwash or create false absolutes. Mental note to self in all future writing include links to opposing view points were possible.

    ‘And that is all I have to say about that’…Forrest Gump! lol

  31. I’ve read both articles with absorption and I can see how the argument can go both ways among designers. Nearly all the webpage designs are beautiful.

    In my agency our web design is locked down and we can’t influence it much beyond providing and updating content.

    I can’t even tell you how often I have to tell our staff HOW TO FIND THE LINKS ON THE LEFT NAV-BAR! They just DON’T see them!

    I can’t understand it myself, since I always LOOK at everything on a webpage. Sometimes, though, after I tell them in the email to LOOK for the link in the left nav-bar, they call me and I have to lead them to the link on the left nav-bar BY THE NOSE!

  32. I’m one of the people who agrees with the original post on Smashing, for a couple of reasons. Take my objections (and, I think, those of the original author) with a caveat: in the hands of a good designer, any element *can* be used well. You (and he) included some excellent examples of well-used vertical navigation. But I think primary vertical navigation is a choice a designer *should have to defend*, because:

    First, it allows sloppy thinking. I’ve heard designers on several occasions tell me vertical navigation is better because it lets you shove as many navigation elements into the menu as you like. Having a horizontal navigation bar means accepting a built-in constraint that forces you to make tradeoffs about what options you’re presenting your user in the navigation. Vertical navigation will blithely let you go on forever, unless you have a designer advocating for restraint and consideration of the user—not just during the initial design and revision, but also during the life of the site, as changes are made and the company’s mission changes and expands.

    Second, it’s just in the wrong space. The most prominent space on a web site is the top-left corner of the content well. Placing a navigation menu to the left of the content well threatens to confuse the clarity of the design by muddying where the highest point in the site’s visual hierarchy begins. You can certainly escape this problem with good design (Estate Black is a perfect example of it done well) — but it’s an extra problem to solve.

    Vertical navigation shouldn’t be completely forbidden (nothing should be) — but using it adds design challenges that horizontal navigation systems don’t face, that designers should be aware of, and that make it a less desirable choice and one that requires a defense.

  33. @S_trainer It sounds like the issue may have something to do with the visual design of the sidebar against other elements of the page.

    Consider the visual weight of the left navigation, also consider whether or not it looks like navigation. Many times menus are styled as just a basic list of links, and that doesn’t give them the attention grabbing element they need.

    While you may not be able to influence the layout, consider the color, size, font-weight, white-space, and contrast to other elements on the page (squint your eyes and see what stands out) to help draw the eye where you need it.

  34. Evan

    Just like you said towards the end, it’s a problem…sometimes. Any decision you take is based on the context you take it in. There’s no possible way to write out a formula for design that is applicable to every single situation.

    No it doesn’t allow sloppy thinking, the designer allows for sloppy thinking. Vertical nav’s are a tool, elements, a piece in the puzzle and nothing more. It is the designer’s job to figure out where to use what and how.

    I appreciate all of your criticism, but the main point I’d like to stress is that design is just like women (ha-ha), there is no single formula pick-up line that works in all cases.

    -Arik

  35. NICE JOB! I also had several issues with the Smashing Magazine article. I use vertical navigation in many of the websites I design, and they function beautifully.

    I think it is a case by case basis, and depends on the site and design. I really enjoyed your arguments though.

  36. A worthy debate. I subscribe to David Ogilvey’s views on effective print advertising. However, I once worked for a marketing VP who followed Ogilvey so rigidly that he choked the life out of our communications, ruining successive seasons marketing.

    There are rules, and there are reasons to break rules.
    If a gun fight breaks out at a stoplight, then the rule of the red light immediately ceases to exist, overtaken by the rule of survival.

  37. Thanks for an excellent article. As you say, the visual design and content of elements on a page/screen is just as important as where they are placed.

    Designers should keep questioning the unwritten rules, not blindly following conventions or trusting in dubious research. As new technologies come along, like touch screens, iPhones and portable devices, new ways of navigating are needed, and people’s mental models change. There’s no right/wrong way to do it.

  38. Great article!
    I also disagreed with several of the points the original article made, especially the first one.
    I completley agree with your conclusion and think that a designer always should ask himself what benefits the site I’m designing the most, not what is generally better or worse.

  39. THANK YOU!! THANK YOU!
    I couldn’t agree more! Thanks for the defense of design. I particularly like how you stated: ” issue here isn’t the choice of layout—it’s the designer.” This is so true. Those who do not design and only critique, are missing an important piece of the puzzle: CREATIVITY! Excellent thought!

    keep it up

  40. I’m forty-two :)

  41. verticle, horizontal or heck, diagonal, as long it fits the page and adds to the usability then it’s good. there’s really no right or wrong when it comes to visual elements. every designer has their (or should have their) own interpretations.

  42. I respect that everyone has an opinion, but I recognize when I agree with one’s opinion better, and I agree with your article. I like it. You debunked the previous article with simple reasoning.

  43. Vertical menus are good for vertical or minimalist design.

  44. Excellent article! Vertical, horizontal or even the use of both, have negative and positive aspects. I always try to choose the right one to fit the project needs.

  45. i couldn’t agree more. thanks

  46. Now that most computer monitors are wide-screen, it seems to me that vertical space is at more of a premium than horizontal space. Vertical navigation solves two issues relating to this: 1) it frees up some of the vertical space so more of the valuable content to be seen “above the fold”, and 2) lines of text can only widen so far before readability suffers, thus there is more space now than ever for navigation to be moved to the side of the screen.

    Also, the ability to add new menu items and items with longer text is NOT a minor issue. Clients have been known to change their minds, after all!

  47. Hey thats some pretty interesting stuff. By the way, what blog system do you use? I am beginning a blog site, but not sure which system to have, but yours looks real great. Thank you

  48. I also prefear your point of view than the original, i especialli 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.

  49. Great article. I agree with you. It doesn’t matter whether you use vertical or horizontal navigation as long as it’s well used. A good design is what makes the difference.