How to Design a Website Navigation Bar
It's easy to get excited about designing—or redesigning—your website. It's a chance to showcase your products and services to an almost limitless audience—and put your creative chops on display, too.
But before you get caught up in graphics and colors, you'll need to consider a few other basic elements. Chief among them is how you want visitors to move around your site, which will be largely driven by the navigation bar running along the top or the left rail of each Web page.
"Anytime we start a project, we sit down with the client and, before you ever settle on design, you really have to think through the navigation," says Lindsey Marshall, a marketing executive with Red Clay Interactive, a Web development firm based in Atlanta. Red Clay was a 2009 Inc. 5000 honoree. "That's crucial."
We've talked with experts about best practices in developing this essential online tool.
Designing a Website Navigation Bar: The "Super" Nav, Main Nav, and Side Nav
First, let's go over some terminology. The primary navigation tools on a website include the "super" navigation, main navigation and side navigation, though you don't necessarily need all three.
The "super" nav runs all the way at the top. You'll notice on the Inc.com site that it includes tabs for Home, Magazine, Blogs, etc. Outside of the Home button, these are the product categories Inc.com offers. For a service-oriented business, this is where you want to keep your "call to action" items, or the things that get users communicating with you, says Gabriel Shaoolian, CEO and founder of Web development and online marketing firm Blue Fountain Media, which is based in New York City. "If you have something that you update frequently like a blog, keep that in the super nav," he says.
Next is the main nav, which in the case of Inc.com breaks down the overarching editorial topics we cover: start-up, running a business, money, etc. Shaoolian says to look at the main nav the same way you pitch your clients. "If you're selling a service, what are the steps you go through when giving a sales presentation? Do you open with About Us? A case study?" he says. "Go through that flow."
Inc.com doesn't use a side nav, but you can simply imagine the main nav running vertically on the left side. This might be preferred if you have a lot of topics to cover since it gives you more real estate with which to work. As an example, look at Amazon.com's homepage, which has too many departments to run across the top. In some cases you may not have a side nav on your homepage, but will on the topic pages where you want to offer a more detailed breakdown of the product or services.
Instead, Inc.com uses a drop-down navigation style to provide these details. If you hover your cursor over a topic, more subcategories will appear. A special note: if you think you'll get a lot of traffic from mobile devices, a drop-down bar may not be the way to go. Additionally, Shaoolian says they don't perform particular well with search engines.
Designing a Website Navigation Bar: Think Usability
When thinking about the specific topics that will go in your nav bar, the most important things to consider are usability, what you want to accomplish with your website, and who your audience is.
On usability, Marshall says: "This is not the place to get creative. If you want to stand out in your industry, there are tons of ways to do it. But there are certain things people expect to see across all websites to make them usable. Just like when you go to a store, you expect the cash register to be up front."
You'll also want to be consistent on every page, always keeping the navigation bar in the same place with the same information. This is particularly important because many, if not most, of the people who come to your website aren't going to enter through your homepage, since a search engine might push them directly to a contact or product page. "You need to think of every landing page as a homepage," advises Marshall.
In terms of objectives, you might have a variety of goals. "Maybe it's purchase a product or getting them to contact you or getting them to fill out a form," says Marshall. As such, make sure each goal is represented.
Those objectives may differ due to the audience you're trying to reach. You'll want to talk through all your audiences, laying out who they are, what they're looking for, and what you want them to do on your site. You might have different tabs for each audience. Think of a bank that serves both retail and commercial customers.
Generally speaking, some things you'll want to include are who you are (the About Us section) and how to reach you (Contact Us). If you're selling a product, you'll want to have a Check Out section.
You'll want to consider how your products and service offerings are split up. Do you have multiple locations servicing different areas and needs? If so, you'll likely want one tab that lists services and another tab listing locations. This offers users multiple ways to get to content, which also gives you the opportunity to cross-sell, says Marshall.
"If someone comes in looking for one particular service, you show all the different locations you offer it at, or, vice versa, they just want to know where their local store is and you can show them that you also offer all these services there," she says.
Marshall says there is no specific number of topics that should be included in the nav bar. The objective is to efficiently divide up your content with the objective of getting a person to their goal in as few clicks as possible.
Designing a Website Navigation Bar: Test and Constantly Monitor
Despite the earlier plea to not get too creative with the nav bar, people will inevitably try to build a better mousetrap. Perhaps you think putting the nav bar on the right side is actually more efficient. That's fine, but don't put your site live without putting such experiments to the test in order to make sure your users understand how your site functions.
With that in mind, it's never a bad idea to solicit feedback from your customers and test your site on people who don't know anything about your business to see how they intuitively use it, recommends Shaoolian.
And don't stop the testing and observing once your site is up and running. Shaoolian insists to his clients that they have Google Analytics set up for their sites to monitor where traffic comes from and where it goes on their site.
"Your nav bar is like shelves in a store. If you have a shelf that nobody is buying from, aren't you going to change that shelf? That's valuable real estate. Always measure," he says. "See what pages are people going to and if no one is going to a page, do something about it."