Location, Location, Location: Where Your Navigation Bar Works Best

Last month I posted about organizing your website for a better user experience. An organized website, of course, includes a well thought out and intuitive navigation menu. Today we’re going to address a corresponding issue about the navigation menu - where to put it.

<figcaption id="caption-attachment-2203" class="wp-caption-text">Wondering where to put your navigation bar?</figcaption></figure>

Spoiler alert: we think you should put it at the top. If you’ve looked at any of our websites (and man, you should! We’ve got some awesome ones!) this won’t come as a surprise. We use horizontal navigation as a standard, and we’re far from the only ones. There is a lot of research out there about horizontal versus vertical navigation menus, and the majority of the articles on the subject lean - sometimes strongly - towards horizontal.

Vertical navigation menus along the left-hand side of a site used to be much more common; in fact, they used to be used as a standard. As web design has changed, however, and sites have become more consciously content-driven, most modern web designers have adopted the horizontal navigation model instead. Let’s talk about why.

Content is King. Don’t Let Navigation Dethrone It.

If there’s one concept that I lay into like the proverbial dead horse, it’s that your content is the most valuable aspect of your website. Vertical navigation menus cut into the available space for that content. A horizontal menu sits neatly across the top of your content area in a suitably prominent spot that doesn’t force your content into a narrower space.

Our web designs do frequently utilize sidebars, generally on the right-hand side of the page, but those sidebars are not used for navigation purposes, they’re used for (wait for it … ) content. Sidebars might display call to action buttons, a mailing list signup, social media feeds or logos representing especially impressive awards that the business has received, to name several possibilities. The decision of which elements deserve valuable sidebar real estate will vary from business to business, of course, but all of these examples constitute content rather than navigation, and are deserving of content area space if your business chooses to focus on them.

Another important distinction between vertical navigation and a vertical sidebar is that a sidebar can be removed from certain pages on a case-by-case basis - this can come in handy when a page’s purpose is to display a single large element, such as an embedded calendar or a photo gallery. The Row Custom Design & Fabrication site, for example, utilizes a sidebar for call to action buttons, a mailing list signup and a Facebook button. The sidebar is disabled, however, on the gallery page, in order to give the thumbnails more space and to avoid a squished look. A vertical navigation menu, however, wouldn’t have that versatility - disabling it on any given page would remove the users’ ability to navigate on that page, which would be extremely bad for user experience.

Use Your Most Valuable Space For Your Most Valuable Content

Not only does vertical navigation take space away from your content, but there is evidence that it also devalues the space it uses. This study on eyetracking gives us some useful illustrations of this. If you look at the heatmaps, you’ll notice that the search results page, the only example without a left-side navigation bar, you’ll see that the users looked at a larger overall area of the page. On both of the examples that use left-side navigation, the navigation areas are far from the users’ main focus. The top left area of the site, which otherwise would be a main focus area, is all but ignored.

In general, users aren’t going to focus on the navigation menu until they need to use it, so it makes sense to put it in a spot that is prominent and easy to find, yet not taking up what would otherwise be your website’s most prime real estate.

Less Space = Less Clutter

One argument sometimes used against horizontal navigation is that it limits the amount of items that can be listed at the top level. Where a vertical menu can be continually extended down the page, a horizontal menu has a set amount of space. While there are certainly situations where a business truly needs more top level menu items than will fit in a horizontal menu, frequently the desire for that many top level items is a sign of a poorly focused or disorganized site structure. Yes, your site should have as much rich, useful content as possible, but that content should be neatly organized, and a sprawling top level menu is generally going to offer users more options than they need to be presented with initially. A limited amount of space forces more thoughtfulness when planning the layout of your content, which generally results in a more usable website.

There’s A Time and Place for Everything. Well, Most Things.

Vertical navigation menus aren’t always a bad idea. They can work in certain contexts. Our designer used a vertical menu as a secondary menu for the About page of the Standard Kitchen & Bath site. The main navigation menu is at the top, but that page had enough subsections that using a secondary vertical menu made sense.

But is using a vertical menu as the primary menu always a bad idea? “Always” is a pretty strong word. Yes, there are well-designed sites that use vertical main menus, but you’ll find that those are the exception. Frequently, high quality websites using vertical menus are highly custom designs. Google, never one to follow rules, uses a vertical navigation menu for their Google Ventures page, and it works very well - but, as you’d expect from Google, the site is as custom as they come. Another example is the Arbor Restaurant; another extremely modern and elegant design that uses vertical navigation, but yet again, not a design model that is going to work for many businesses.

So no, vertical navigation isn’t evil, but keep in mind the challenges it presents. Unless you’ve got a concrete design plan and reasons for choosing that option, the benefits are unlikely to outweigh the drawbacks.