Examples of Website Navigation Best Practices

By Matthew Edgar · Last Updated: August 24, 2019

One of the trickiest parts of building and optimizing a website is deciding what the navigation should be. Often times website navigation becomes an afterthought, but the implementation of website navigation best practices is vital to users understanding your website. Navigation serves several important roles: it reflects the entire website structure, it communicates that structure to users (not just humans—search robots rely on the navigation as well), and it helps people surface information available on the website. Although there are several factors to keep in mind, let’s cover the important website navigation best practices and the areas where mistakes can easily be made.

Website Navigation Best Practices – Use an Appropriate Word Style

One of the first choices to make when considering a website’s navigation is what word style will be used in the navigation. There are many different styles to pick from, but the most common styles you’ll find around the web are oriented around actions, audiences, concepts, or objects. Each style has its merits and is appropriate in certain circumstances, though no style is universally correct. Let’s look at examples of each—while I’m going to focus on header navigation, keep in mind the wording style is important for all types of navigation, including sidebar, footer, breadcrumb, and in-text links.

Action-Oriented Navigation

An action-oriented navigation link tells users what they can do if they click the link. BlueCross BlueShield provides a good example of this—“access my benefits”, “shop for insurance”, or “find a doctor”. There rarely is confusion among users when considering this style of navigation—if I want to find a doctor, then I click “find a doctor” because that’s the page that will help me in my search.

Of course, the danger with this style of navigation is that the actions specified are too obscure or that the page you arrive on doesn’t match the expected action (that is, if “find a doctor” didn’t help me find a doctor, that would create a terrible user experience).

Audience-Oriented Navigation

Audience-oriented navigations describe different kinds of users—“patients & visitors” and “for professionals” on Swedish Hospital. With this style of navigation, users may not know exactly what they will find in the “patients & visitors” section, but so long as a user can determine that they are a patient then the user will know which link to click.

You need to be very clear in defining navigation styles. It is one thing for a hospital to use it, where the distinction between patient and professional is well known. But if people visiting your website aren’t as clear on what group they fall into this can frustrate users. Even on a hospital website, there is also a concern that users will be afraid they are missing out on important content—you are telling patients one thing, but are you telling professionals something else? This is a key thought to keep in mind to ensure you’re following website navigation best practices.

As well, dividing navigation in this way can quickly lead to duplicate content—after all, there may be kinds of information that both professionals and patients need, so where does that information live? Swedish’s website has an example of this with “Health Education”. There is likely information in this section professionals and patients will need. In this case, Swedish’s website breaks this shared content out into a separate section instead of having it in the Patients or Professionals sections—but that means a patient won’t find everything they need in the “Patients” section and “Professionals” won’t find everything they need in the “Professionals” section. Of course, this is a better choice than duplicating this information within both sections or excluding the content from one visitor group.

Concept-Oriented Navigation

Concept oriented navigations group pages around different themes or topics—”Drugs and Supplements”, “Living Healthy”, “Family & Pregnancy”. WebMD’s main navigation.

Object-Oriented Navigation

Of course, other websites go more basic with object-based text styles—showing basic terms like “about”, “facilities” or “services”. Centra offers this in their main navigation.

Concept vs Object Oriented Navigation

Object and concept navigation are usually grouped together, but there is a difference—in Centra’s case, I’m not sure what specifically I’ll find under “Services”. However, with WebMD’s “Family & Pregnancy” I have a clearer idea of what I might find. As a result, concept-oriented navigation tends to be easier for users who are new to a website to find their way around. However, an object-oriented word such as “About” or “Facilities” is relatively easy to understand and something more conceptual (like “Centra’s Story” instead of “About”) might make the navigation more confusing and harder to use. Ultimately, website navigation best practices requires  reviewing the content you have and understanding how people will want to use that content in order to determine which navigation is right for your website.

Use Clear & Specific Language That Matches How People Talk

The text in the navigation needs to be written plainly and simply, using words people will quickly understand. For your website, think about what tasks people are coming to your website to complete (or, better than thinking through it, interview actual people who visit your website). Although there are plenty of corner cases, there are common tasks large majorities of visitors wish to complete easily and those common tasks are the ones your website’s navigation must support.

Once you have that list of tasks, think about the words people might use when describing those tasks. The more your navigation reflects these words, the easier it will be for people to find their way around your website. This is because simplifying the text and matching people’s language reduces the amount of brain power (or cognitive load) required to use the navigation. As a bonus, matching how people talk will almost always match what people type into Google as well (and, hint, you can research organic keyword usage to find what words would make the most sense to use in your navigation).

Bank of America does an effective job of this. A common task people would want to complete on a banking website is researching checking accounts. If I want to open a checking account, it is clear where I need to click in the navigation without much thought involved. The text is clear and specific. And the text matches how real people would describe the thing they are looking for—in this case, people would quite commonly say “I want to open a checking account.”

In contrast, 1^stBank makes it harder to locate information about checking accounts with language that isn’t as clear and language that doesn’t match how people would talk. Let’s take the same example of somebody looking for a checking account—where do you click? The top navigation lists “Products”. After a little thought, it seems reasonable that is where checking should be located. After hovering over “Products”, the word “Checking” still doesn’t appear though. So a visitor would have to think through it a bit more since the words listed don’t really represent how people would describe the task they are trying to complete. Instead of finding a link to “Checking”, a user would have to click to “Personal Accounts” and hopefully could find information about checking accounts there.

This isn’t a difference in style—“Personal Accounts” and “Checking” are both concept-oriented navigation terms—but one concept more closely matches how real people talk (when was the last time you walked into a bank and said “I need a personal account product”?). As well, “Checking” is a more specific term than “Personal Accounts”. Similarly, “Home Loans” and “Auto Loans” in Bank of America’s navigation are more specific terms than “Personal Loans” in 1^stBank’s navigation.

All of this means Bank of America’s navigation reduces the amount of effort required to understand how to navigate the website, which will make the navigation more beneficial to the end user. As a bonus, the clearer language will likely benefit Bank of America more in search results since it displays “Checking” (a term people like type into Google) more prominently.

Mobile and Desktop Navigation Should Match

A common mistake companies make is creating one set of navigation for their desktop website and a separate navigation for their mobile website. The thinking goes that mobile screens are smaller and therefore people must want less information presented. Or, perhaps, people want some different kind of information on mobile sites than they do on desktop sites.

These reasons may have been true five years ago but generally aren’t true now. For one, 20% of the US population are “smartphone-only” users. Since these people never or rarely use a desktop computer, anything you think people should do on a desktop computer is something smartphone-only users will do on their phone. Do you want them to be unable to find key pieces of information?

The other 80% of people are likely to use multiple devices when accessing a website. A study by Google from 2016 found that 48% of people “browse [the web] on more than one device”. If people return to your website from their phone and can’t find the same content that was located on your desktop website, visitors will inevitably be frustrated. Similarly, when people come back to your website on a different device, they expect to be able to navigate the website in basically the same way.

Another concern with differing desktop and mobile navigations is Google’s mobile-first indexing. With mobile-first indexing, Google determines how to rank your website in search results for any device searchers use based on what is found on your mobile website. If something isn’t included in your mobile navigation, chances are good Google’s bots won’t find it and that content will have a harder time ranking. Because of this, Google recommends: “Your mobile site should contain the same content as your desktop site.”

All of that being said, your website’s navigation needs may vary. If you conduct research into the people using your website, you might find people do have different needs on mobile and desktop devices. Perhaps you don’t have a lot of cross-device traffic. In that case, it could make sense to present navigation differently by device. As well, you may have enough internal and external links to help Googlebot find your website’s content so the missing links in the mobile navigation may not affect Google’s ability to rank content. Though, these exceptions are quite rare.

H&R Block offers an interesting example here. In many respects, H&R Block has great top-level navigation—a good blend of navigation styles and it uses clear and specific language. However, their desktop website includes two dropdowns—one under “Ways to File” and another under “Tax Questions & Tools”. On mobile devices, the links contained in the sub-navigation for “Tax Questions & Tools” is missing from the navigation. With some clicking, you can find the tools listed from the main “Tax Questions & Tools” page from your mobile device, but it certainly isn’t as easy to locate things like the tax calculator.

I don’t know anybody who works at H&R Block so this could very well be intentional based on the research they have conducted. Regardless of the reasons, their navigation demonstrates an instance where mobile and desktop navigation do not match. Unless you have strong research indicating you should do something similar, your mobile and desktop navigation should match to best support SEO and best support the people using your website.

Track Navigation Usage

Finally, not enough companies take the time to measure their navigation’s usage. When it comes to navigation, you want to make sure each page included in the navigation still should be in the navigation. If pages aren’t getting clicked on or pages no longer represent things people are interested in finding, those pages should be removed from the navigation. You also want to measure how people get to different pages and how people expect to find information of interest. People might want to find a page, but they don’t expect or need to find that page in the header navigation. Instead, a link in the text or in the sidebar would be enough. As a result, you need to look at two data points: what people are clicking on and what people want to click on.

A simple way to begin measuring what people are clicking on, is by reviewing the previous and next page report in Google Analytics. This report tells you how people moved between different pages on your website, giving you an idea of what order people want to find the pages in. If most people start on Page A before going to Page B, then chances are Page B doesn’t need to be in the primary navigation since that isn’t where people need to find that link. Instead, Page B needs to be linked to from within the content of Page A.

You can also get more information about the click patterns by using event tracking to monitor clicks on specific internal links. With this type of tracking in place, you can figure out if people are using the navigation links in the header, footer, sidebar, breadcrumb, or in-text. Whatever links people are using are worth keeping and whatever links aren’t being used are worth removing. Heatmaps can be helpful for understanding this too.

For the other half of the data—what people want or expect—there are a handful of options available here too. One of the best ways to access this information is through keyword research into topics related to what your company does. This is because what people are searching for on Google is, by definition, a direct representation of what people are wanting to find. Along with this, you can also interview users directly or conduct a survey asking people what they want to find. The more information you can gather, the more you can understand what should or should not be included in the website’s navigation.

I’ve been reviewing other companies, so for this final example, I’ll review Elementive and our header navigation. In reviewing click patterns on Elementive’s website’s header navigation, here is what we find for usage on our top navigation click usage.

But this is only half the data we need to evaluate our header navigation. Are these clicks good or bad? Should we pull a link out? Or should we add something in? Or should an existing link be modified?

To answer these types of questions, you need to compare this data against what people were hoping to find. We know from researching our users (through keyword research, user interviews, and surveys) that most people who visit our website want to learn about Elementive and the services we offer—so the clicks to About and Services are a good sign people are able to find this information.

However, we also know that many of our visitors want to access our resources. In fact, nearly 70% of our traffic is people looking at resource materials. Since only 90 people clicked to resources, despite far more people coming to the website who likely are interested in resources, there is probably an opportunity to alter that link to get more people to click. Or perhaps we should come up with a more specific word than “resources” that more closely mirrors what our visitors are expecting to find and more closely matches how visitors would describe this information (such as using concept-oriented words like “Tech SEO” or “Google Analytics” instead of an object-oriented word like “Resources”).

Regardless of Elementive’s specific navigation issues, the point is that we wouldn’t know about the opportunities we have within our navigation if we didn’t look at the data—both the data to tell us what people are clicking on and the data to tell us what people would expect to find. If you aren’t measuring this information about your navigation already, then chances are good your website’s navigation isn’t performing at its best. None of this data needs to be hard to collect—nor do you need to do a major overhaul. Simply begin by looking at the data you have and tweaking what links you can to see how the people visiting your website respond.

Website Navigation Best Practices Recap

To recap, you need to:

• Use an appropriate word style for your navigation links given what people are expecting and given the nature of the content being linked to.
• Use clear & specific language that matches how people describe the things they are looking for when visiting your website.
• The mobile and desktop versions of your website should contain matching navigation unless you have compelling data to indicate they shouldn’t match.
• Finally, make sure to track navigation usage to understand how people are using what navigation is currently in place and to understand what people would like to find in the website’s navigation.

For more information about website navigation best practices and optimizing your website’s navigation (or any other part of your website), please check out my book, Elements of a Successful Website. Or, if you want help reviewing your website’s navigation, please schedule time for us to talk.