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