The argument for horizontal website navigation

richardssite

Here’s an example of a website with horizontal navigation designed by MDPM Consulting: Dr. Richards of The Dental Centre of Conroe

Over the past few weeks, we’ve been focusing a lot on the latest standards in SEO (having a responsive, mobile-friendly website, for example). But, a big part of today’s SEO is UX (user experience).

As MDPM’s resident designer, I spend a lot of my time researching and reading up on the latest techniques and best practices for UX-conscious web design so that the design team can create web presences that will not only be loved by our clients for years to come, but that also adhere to the most cutting-edge industry standards.

Lately, I’ve seen a lot of buzz about horizontal website navigation versus vertical website navigation.

According to Slamdot.com, “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.”

As a graphic designer, I agree with the argument(s) for horizontal website navigation; here’s why.

What is content-based design?

We’ve said it before, and we’ll say it again: content is king. As a content-centric marketing agency, we here at MDPM believe in the art of content-based design. This means that the look and feel of your website should compliment and showcase your content, not that your content should be limited by the parameters of the design. Typically, a vertical navigation menu will cut into available space for content, while a horizontal menu will sit neatly across the top of the content area in a suitably prominent spot that doesn’t limit the location, space, and structure of the content.

What about sidebars?

Great question. When used as intended, sidebars on a website aren’t for navigation purposes; they’re meant to 1) include additional content (such as a call-to-action button, mailing list signup, social media feed, logo, or even good old-fashioned copy) and/or 2) direct users to important content. The beauty of a sidebar is that it can be included on some pages of the website and not on others. We can choose which pages to include the sidebar on and which to leave it off of. We can even move a sidebar from the left side of the page to the right side or vice versa if the need arises. A vertical navigation menu doesn’t offer that flexibility.

huffstutlersite

Here’s another example of horizontal navigation by MDPM: Dr. Huffstutler’s website

But, what if I want more pages included in my navigation menu?

Again, good question. In fact, this is the argument most frequently used against horizontal navigation menus. Although vertical navigation menus can — theoretically — extend down the page endlessly to include every page on the website, horizontal menus must fit into a given space. This is true.

When our clients come to us concerned that everything they want to include won’t fit into the allotted space, I urge them to think about it like this: The navigation is the road map to your website. It illustrates the path users will take to explore your site, and — on the back end — it’s used by Google to understand the site’s structure. Why would you want to clutter it up? Showcase the important pages in a smart, practical, condensed way. That’s how our design, technical, and content teams approach the development of your website and blog, and we want to help you see it that way, too.

What else?

There are several other things to consider when making the argument for horizontal navigation, including:

  • content architecture (how pages interact with each other, the funnel through which users travel from page to page through your website, etc.)
  • content orientation (how the content is presented and consumed on the page)
  • usability (e.g. a drop-down menu option is arguably easier to use than a fly-out menu option, especially on a mobile device)
  • and more

There’s some data out there to back this up:

  • “In a study called Eyetrack III: What We Saw When We Looked Through Their Eyes, results showed that top navigation performed better than left-side navigation. Interestingly, according to the results, even right-side navigation had better success than left navigation.” Another quote from the same study states that “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.”
  • Various studies show that a horizontal navigation with 7 or less items above the fold shows the best results for User Experience in cases of A/B testing.

Of course, there’s an exception to every rule. Vertical navigation menus aren’t always a bad idea. They can work in certain contexts, however, we work hard to stay up-to-date on industry standards, and horizontal navigation is the standard we currently prefer to stick to.

Have questions about this web design standard? Want to know more about why we incorporate certain elements into the design of your dental website? The design experts at MDPM Consulting have got you covered. Give Jill a call at (972) 781-8861 or shoot us an email at [email protected].