CodeinWP CodeinWP

Response to “In Defense of Vertical Navigation”

Response to In Defense of Vertical NavigationIt’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.

8 Responses

  1. Kyle Meyer says:

    Thanks Louis, for posting this response.

    I would agree with you on my later arguments for section two, in a bit of a rush to write the piece–which ended up being more of a stream of consciousness–I certainly lost some of my usual clarity.

    At the end of the day, I’m very excited to see a reaction from the design community which can sometimes feel as if we’ve fallen in to a lull and put our learning and critical thinking on cruise control. As I said in the comments on Astheria, I’d love to see Smashing Magazine post more thought provoking opinion articles. Though, I do hope they label them as such in the future.

    Cheers!

    • Great, thanks. I hope I wasn’t too harsh in this response. I’m sure you could formulate a much clearer response with some more time. I guess in the end, we agree on the most important aspects of this topic: That content and design will dictate which type of navigation to use.

      I definitely think you have a great eye for design and I appreciate that you tend to favor minimalism and proper use of white space, which I think gets lost on many ad-heavy sites these days.

      On a side note, I actually have another article that will be published later on another site that discusses white space in design.

  2. mikeo says:

    this has been excellent. no matter where you fall on the argument, this type of back and forth, and actually civil, is what the design community needs more of. let’s keep this type of interaction going.

    .mike

  3. CSC says:

    There is a study that found vertical navigation better than horizontal navigation. This study compares three different navigation methods: index, horizontal and vertical (http://psychology.wichita.edu/surl/usabilitynews/51/pdf/Usability%20News%2051%20-%20Bernard.pdf). The results:
    – Participants had the most difficulty with a horizontal navigation system
    – Participants preferred the index and vertical navigation above the horizontal one.

    Although this study is dated (2003), I hope this gives you an insight about what usability is really about. And that is a lot of researching and testing. Never “expert” opinions.

    When you write an article about what kind of navigation designers should prefer and use arguments that are seemingly based on research, usability practicioners that have a strong background in research immediately see that your arguments are not well grounded.

    If you want to write an opinion article, just give your opinion about something. And if you want to use studies to back your opinion, make sure you interpret the studies properly.

    • CSC,

      Thank you for posting that link, that looks very interesting.

      Before you criticize someone the way you did, you should ensure that the basis for your cricism is sound. In this case, it’s not, because the study described in that document is called “Cascading versus Indexed Menu Design”.

      What that means is that it is a study of how users react to drop-down or fly-out menus (i.e. “cascading” menus), in comparison to the same hierarchy presented without use of a drop-down or fly-out menu (i.e. “Indexed”).

      So, this study is not about vertical versus horizontal, it’s about Indexed versus Cascading.

      There is however, some value to it, because it does provide evidence against my argument that drop-downs are more usable than fly-outs. But considering the age of the study, and the way the web has changed since that time, this study suffers from the same problems as the studies I quoted — opinions can be made, but nothing conclusive can be stated.

  4. Dragomir says:

    I have my own hypothesis on the subject: http://cogsci.stackexchange.com/questions/2056/any-research-on-right-hand-left-hand-based-preferences-when-interacting-with-an

    Basically I think that most usability specialists forget to include mousing in the equation. When you read a printed material it’s all about eye movement, but in front of a computer screen how your hand is supposed to move, I claim, is equally important to what your gaze is going to follow. In other words, the F-pattern is overemphasized at the expense of possibly existing patterns of right-hand cursor movement.

    My own corollary of all this is that we have three essential zones to care about: navigation zone, reading zone, interaction (frequent clicking) zone. I claim that:
    a) navigation elements (menus, crumbreads, etc) should be on the left or the top;
    b) content for reading should be in the middle (and since very broad paragraphs are not comfortable to read anyway, the real estate issue of a vertical menu is not relevant, on 16:9 screens, at least);
    c) interactions (things which require frequent clicking, e.g. changing pricing paramters for a list of items) should stay in the right.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).