Response to “In Defense of Vertical Navigation”

It’s been quite a start to this week since the publication of my article on Smashing Magazine called The Case Against Vertical Navigation. I really didn’t expect this type of response. I assumed that what I was stating was a fairly commonly held view among designers.

Since there have been a lot of criticisms of Smashing Magazine over the past year (mainly because of endless “list” posts), Vitaly Friedman was more than happy to publish an opinion piece on a specific aspect of design. So, if you haven’t read the original article yet, please do. And please read Kyle Meyer’s response to my article, which I will be responding to here.

I’m glad Kyle posted his response; as Jacob Gube mentioned in both SM’s comments and on Kyle’s site, this type of discussion is good, regardless of who is right and wrong.

My main beef with Kyle’s response to my article is that I don’t think he quite understands that my original article agrees with him on many points. I think a lot of people got a little sensitive over the title of the article. But, let’s be honest here. If I had called the article “Pros and Cons of Vertical Navigation” (and approached the theme from that super-objective angle), it would not have elicited the response it did. Let’s now consider what Kyle had to say.

Item One: It Discourages Information Architecture

He begins by responding to my heading “It Discourages Bad Information Architecture”, then displays a screen shot from Black Estate Vineyard. I love that site, it’s beautiful, and he’s absolutely right that the aesthetic would be lost with a horizontal navigation. But that doesn’t mean that the site is better architected, or properly focused on content.

What’s interesting is that this site has only one page. Yes, it has a left-hand navigation menu, but those links are internal page anchors that trigger an animated scroll to different parts of the page. I think a better case study would be a site that has more depth, content-wise.

Also, Kyle is fully aware that I posted 6 “exceptions” to my “rule”, one of which was “a minimalist design”, which means this site would fully qualify as an exception since I personally consider this to be a minimalist design. So, does my original article disagree with this site’s use of vertical navigation? Absolutely not.

Item Two: It Wastes Prime Screen Real Estate

In the next section he discusses my heading “It Wastes Prime Screen Real Estate”. His argument here is weak and is not very well thought out. To quote him:

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.

Okay, sounds fine so far. But then he says:

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.

I’m having trouble confirming exactly what his point is, but it doesn’t sound like a very good argument. He’s saying that with a horizontal model, the content that would normally be under a vertical sidebar would be forced either above the content, below, near the footer, or else somewhere in between, causing a distraction. I disagree completely, and think he’s using a very rare circumstance to provide a weak counter argument. I’m going to quote directly from my original article to counter this point:

In paragraph 3 of my introduction, I said:

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.

So, what this all boils down to is that I agree with Kyle: There will be content in left and/or right sidebars, in addition to the primary content beside those bars, except this would all be found underneath the primary horizontal navigation. There is no need to move any of that content to the top or bottom.

I don’t think his argument in this regard is very strong at all, and I’m a little surprised he would even make it. Of course, what he said was a tad confusing (possibly because he rushed to publish it, which is fine), so maybe I’m misunderstanding his point.

He next discusses a screen shot from Shea, saying that it conforms well to the F-pattern hierarchy, which it does. But I don’t think he understands how much more can be done with the left side of the page. Yes, that site is beautiful, but would it be less beautiful if it was planned with a horizontal bar? It actually has a horizontal bar, which could easily hold the links in the navigation, and allow more important things (like sidebar calls-to-action) to be included on the left side instead. Of course, the design would have to be reconsidered, so I’m not saying here that a horizontal navigation would fit well with this layout and design. I’m just saying that when a site is planned, if the left side of the screen is viewed as prime screen real estate, it is best to avoid putting common page elements in that area.

And if you visit the sub-pages on that site, you’ll notice that all the space below the navigation is completely wasted, proving my point that prime real estate has been ignored, and countering his argument that vertical navigation still allows for placement of content below the navigation.

Also, although the Shea website is attractive, I get a dated feeling from it. When I look at that site, I don’t think “modern web design”; I think “old school”. But of course, that’s just my opinion, but I don’t think that site compares to most of the beautiful and modern-looking sites you see in CSS galleries nowadays.

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

In the next section he discusses my heading “It Doesn’t Conform to Real-Life Reading”. This is one of the points that I really think got lost on almost everyone, as proven by the argument he attempts to make in rebuttal:

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?

Maybe I didn’t make myself clear enough in the article, so I apologize for that. But my point on “real life reading” has nothing to do with things being stacked vertically, which I completely agree with as a common thing found in everyday reading. I’ll quote from my article to explain myself here:

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.

My point here is not that “vertically stacked” menus are rare; it’s that content with a “vertically stacked menu” next to it is rare. Of course, I’m not expecting content to span the entire width of the page anyhow, but I think it’s more common to find varying content to the left or right (in real-life reading) as opposed to a vertical “menu”.

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

The next section I will concede to his points, because, as many people in the comments pointed out, the studies are difficult to use in this context. I probably should have thought that through more, but I guess my point was this:

One study showed that horizontal navigation was more successful, and since people read content in an F-pattern, it’s best to use horizontal navigation and use more important elements to form the “F”. Also, I would like to know if there’s ever been a study that shows vertical navigation to be more successful than horizontal. Of course, he makes many good points about white space, and drawing the eyes, and the significance of looking at something longer, and whether that should even be viewed as a good thing.

Conclusion

In his conclusion, he states:

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 agree wholeheartedly, which I think I stated indirectly in my article when I gave 6 possible exceptions to the “rule”.

I hope some of what I said in the original article was made clearer here, and I encourage everyone, as Kyle did, to continue considering reasons for your design choices, and not just following trends for the sake of trends.