How to Design the Best Navigation Bar for Your Website

Daniel Alves is the design director for the small business web design division at the digital marketing and web design company 352 Media Group.

The navigation bar is the most important design element on a website. Not only does it guide your users to pages beyond the homepage, but it’s also the singular tool to give users a sense of orientation. With this in mind, it’s important to adhere to time-tested design and usability conventions. Doing so will give your users a comfortable and easy reference point to fully engage with your content.

Despite the necessity of an accessible navigation bar, usability studies on navigation across the web aren’t positive. One study by User Interface Engineering shows that people cannot find the information they seek on a website about 60% of the time. While this failure rate might be acceptable for your average blog, a business website simply cannot afford these stats. Even worse, many users often find navigation usability extremely frustrating, citing annoying hover errors and inconsistencies. Another study by Forrester found that 40% of users do not return to a site when their first visit is negative.

So how do you ensure that your users are able to quickly and easily find the information they need?

The Basics

Employ these basic concepts to help users move more efficiently through your website.

Start with content. Believe it or not, most websites start backward, meaning a designer will suggest navigation items before determining all the content possibilities. This isn’t entirely unusual — often the content isn’t ready before the design process begins. Jeffrey Zeldman, a usability guru, suggests, “Content precedes design. Design in the absence of content is not design, it’s decoration.”

It’s important to properly analyze and organize all your content into a logical and highly usable structure before even considering design choices. Once you accomplish this, only add complexity if absolutely necessary for your users.

Don’t overwhelm. The main role of a navigation bar is to provide your user with a choice. Overwhelming a site visitor with too many options impedes his ability to quickly make a choice. A navigation bar with five to seven channel items is sufficient organization for most websites. Plus, it fits nicely in the width of most website designs. Once you reach eight navigation options, you severely limit readability and usability due to width constraints.

Keep it simple. Use precise and recognizable words in the navigation bar. Refrain from long phrases that consume screen real estate by limiting each navigation item to 12 characters or less. Also, don’t use words that an average user wouldn’t completely understand. People are used to conventions; therefore, err on the side of familiarity. For example, use “Contact Us,” not “Get in Touch” or “Let’s Talk.” Finally, leave out unnecessary words that don’t add anything to the navigation item. Instead of “In the News,” consider simply “News.”

Actions on the right. Because people read from left to right, they naturally expect action links on the right-hand side of the navigation bar because moving right suggests moving forward. Use the left side for more informational links. The exception is the “Home” link, which as a backward action, should be furthest left.

Avoid Flash, for the most part. While Flash is generally frowned upon by usability experts, it presents aesthetic possibility. Flash’s biggest problem is that it typically is not implemented in a way accessible to screen readers and mobile devices. And while you don’t want to implement the actual navigation with Flash, you can get away with embellishing an HTML/CSS Navigation Bar with Flash to add visual interest and retain usability. One great example of this is the Atlanta Botanical Garden website (above).

One-Level Navigation Bars

Now that you know a few basic principles about creating a highly effective navigation, let’s learn from already existing navigation bars, including one-level bars, drop-down multi-level bars and mega drop-down bars. While you’ll ultimately decide which type of navigation works best for your website, we can show you what to do and what not to do depending on the type of navigation bar you eventually choose.

Apple vs. CNN

Experts have often heralded Apple as the gold standard in web design. The company has managed to distill everything it does into seven links, not including the logo and a search bar. It’s the epitome of simplicity and straightforwardness — from one of the largest companies in the world.

To its credit, CNN has to cover an entire planet of news, which makes it somewhat understandable that its site features a whopping 16 navigation bar links. While this navigation structure might work for CNN, it’s highly unreasonable for your average personal or business website. Cramming this many links in the full width of the website hinders readability by forcing a small font size and very little negative space on either side of a link. On a practical level, it’s a huge chore to read through every single link to decide where you need to go.

Drop-Down Multi-Level Navigation Bars

Drop-down menus became very popular at the end of the ‘90s during the dot-com boom because they allowed a user to get to any page on a website with one click. While that may seem like a huge advantage at first, the option presents several usability problems if done incorrectly. Many users find these types of navigation bars frustrating because they require precise cursor movements in order to successfully move through deeper levels. With this in mind, it’s best to reserve ample vertical and horizontal space for each link so that users can navigate without clicking on the wrong page.

Denny’s vs. Sony

Earlier this year, Denny’s new website design that was met with mixed reviews. On one hand, the website featured an innovative and technically complex browsing experience, but for many critics, it was overdone. The navigation bar features gimmicky JavaScript “enhancements” that actually slow the user down. For example, when you hover over a link with the cursor, it takes a fraction of a second for the animation to fully reveal its contents. Even that fraction of a second is slower than our mind’s ability to move forward.

Sony, sticking true to its understated style, provides a no-nonsense drop-down menu that gets the job done efficiently. Sony’s helper icons next to links specify parent and action links. Overall, Sony’s navigation bar responds instantly and manages to stay out of the user’s way with its subtle yet effective design.

Mega Drop-Down Navigation Bars

Mega menus are the newest design craze for large sites with a lot of depth and categories, such as Zappos and The White House. These menus are usually only two levels deep, but the second level features a large panel complete with images or multiple columns of links. The benefit to these menus is that a site not only provides more links for the user, but also includes context and hierarchy within those links.

Target vs. Lowe’s

A mega menu’s blessing can also be its curse. Sure, these navigation bars give you more room to include links, but without proper hierarchy and context, mega menus can quickly turn into a sea of unnavigable options. Perhaps the best example of this is Target.com. It doesn’t take long to see that the company has crammed way too many links in its mega menu, without the proper hierarchy or context.

While it might seem convenient that a user can get to Target’s “Spice Storage” department directly from the second level of its menu, is that really necessary? Including links like this creates too much noise and doesn’t let the user focus on the important higher-level category items. Another big no-no is the sheer size of Target’s menu. Some of the mega menu panels exceed the height of a standard 13-inch laptop screen size. The last thing you want is to force someone to scroll down to use your navigation menu.

Target could learn a few things from Lowe’s website. Lowe’s has managed to provide a wealth of links with plenty of hierarchy and context. For every panel of links, the company has made the most popular and timely links stand out by elevating them to large blocks of thumbnail images.

By distinguishing the most popular items, Lowe’s makes it easy for users to access the links they’re most likely to click anyway. The thumbnail images also contribute greatly to context. By providing recognizable images for their most popular categories, the user doesn’t even have to read to understand which part of the menu he’s in. It’s akin to walking by Lowe’s brick and mortar store, and scanning the contents of each aisle to zero-in on your desired product.

Conclusion

When choosing a navigation bar type, start simple. Evaluate your content thoroughly and ask yourself what your users need to access quickly. More often than not, a complex navigation system is an indicator you need better content planning and organization. If you absolutely need to give your users so many options directly inside the navigation bar menu, follow the principles mentioned above to create an efficient and enjoyable experience for your users.

Image courtesy of iStockphoto, mkurtbas

More About: contributor, design, features, How-To, web design, Web Development

For more Dev & Design coverage: