Website Navigation: 7 Best Practices, Design Tips and Warnings

Share This
Andy Crestodina
Share

Little things make a big difference. Your website navigation is a great example. The structure and labels of your navigation can have a huge impact on results. Here’s why:

  • Navigation affects traffic: how high you’ll rank, how much traffic you’ll get from search
  • Navigation affects conversions: how easy the site is to use, what percentage of visitors convert into leads and customers

Here is a checklist for website navigation best practices. These are design ideas and tips along with examples of what to do (and what not to do) with your website’s menu.

1. Be descriptive

“What we do” doesn’t actually say what you do. Neither does “Products,” “Services” or “Solutions.” Descriptive navigation that uses keyphrases is better for two reasons. Here’s where SEO and conversions come in.

  • Descriptive labels in your navigation are good for search engines
    The navigation bar is a key place to indicate relevance to search engines. Since your navigation appears on every page, descriptive label shows Google that you are truly about that topic.
  • Descriptive labels in your navigation are good for visitors
    Your navigation bar is visually prominent, so it communicates instantly. When it lists your main products or services, it will be obvious, at a glance, what your company does up front, so they’ll know they’re in the right place.

Use your main navigation as a place to start telling people and search engines about what you do. Use labels that use top-of-mind phrases for visitors and popular keyphrases according to the Google Keyword Tool.

Warning! Avoid labels such as “services” and “solutions.”

If you have one page listing all of your services, it will never rank. That’s because it’s not focusing on one topic. Every page on your website has a chance of ranking, as long as it’s focused on a topic, on a keyphrase.

No one is searching for “products” or “services,” so these labels don’t help your rankings.

This is why your website architecture, not just the navigation, is key for SEO. A search optimized website has a page for each service, each product, each team member and topic. Avoid making a “services” page unless it links to other, search optimized pages for each service.

For more info, read how to make a sitemap.

2. Avoid format-based navigation

Navigation labels such as “videos,” “photos” and “whitepapers” tell visitors the format of the content, but not the topic. People don’t go to websites looking for videos or whitepapers. They visit websites looking for answers and information.

Labels indicating the format aren’t descriptive and therefore, not very helpful to visitors. That’s why Aurora Bedford from the Nielsen Norman Group recommends against using format-based navigation.


Users interested in a specific topic usually don’t care in what format the information will be delivered to them; they are focused solely on finding answers that will address the question they had in mind.” – Aurora Bedford, User Experience Specialist, Nielsen Norman Group


3. Avoid drop down menus

Popular, yes. But not a good idea. Avoiding drop down menus is good for two reasons:

  • Good for search engines: Drop down menus can be difficult for search engines to crawl. Depending on how they’re programmed, they may lead to problems.
  • Good for visitors: Usability studies show that drop down menus are annoying. Here’s why: visitors move their eyes much faster than they move their mouse. When they move their mouse to a menu item, they’ve likely already decided to click… and then you gave them more options. It’s a hiccup in the mind of the visitor.

More importantly, drop downs encourage visitors to skip important pages. If you’re using drop downs, you can easily see this problem in your analytics.

website-navigation-ga

But the research shows that one type of drop down menu performs well in usability studies: The “mega drop down.” These offer lots of options, making that moment of friction worth it.

If you have a big site with lots of pages and a very diverse set of products or services, a mega menu may be a good idea, despite the fact that they dramatically increase the number of links from your home page.

4. Limit the number of menu items to seven

Some websites have hundreds of links on the home page. That’s bad. Limiting the number of links in your main navigation is good for two reasons. These are the same two reasons to use descriptive labels:

  • Fewer items in your navigation are good for search engines
    Your homepage has the most “authority” with search engines because more sites link to your homepage than to your interior pages. This authority flows down to deeper pages through your navigation.

    If your home page has tons of links, this dilutes the authority passed from it down to your interior pages. This reduces the likelihood that your interior pages will rank.

    The more concise your navigation, the more authority will flow to each interior page, making your interior pages more likely to rank.

    Read Internal Linking Best Practices for more details.

Example: If your homepage has an authority of 38 according to Open Site Explorer, then is has just this amount of authority to pass along to interior pages.

website-navigation-ose

Suppose your navigation includes 50 items and combined with every other link and button on the page, you home page links to a total of 200 pages. This means the amount of authority passed from the homepage to each of those pages is divided by 200.

If you cut the number of links in half, you’ll double the amount of authority passed from the home page, and increase the chance that your interior pages will rank.

website-navigation-pagerank

Tip! The “Link Juice Calculator” counts the number of links on any page. It also estimates the increase in authority that would be passed if you reduce the number of links. It uses PageRank, not Domain Authority, but the concept is the same.

  • Fewer items in your navigation are good for visitors
    Short-term memory holds only seven items, plus or minus two. This is from the famous psychology paper published by George Miller in 1956.

    More recent research shows that although the brain uses “chunking” as a method to improve recall in short-term memory, the number depends on the category. It may be seven for numbers, but only five for words.

    Regardless, the more items in your navigation, the more difficult the information is to remember and process for your visitors. Visually, eight is a LOT more than seven. If you have too many, visitors’ eyes may scan past important items.

    If you need to use more than seven items, consider breaking them up into groups.

Warning! Avoid long lists.

Break out your navigation into groups of five to seven items.

Tip! Each time you remove a menu item (or any other element) from a page, everything left becomes more visually prominent and is more likely to be seen and considered.

It takes discipline to make the tough decisions. You can do it. Challenge yourself to trim it down to five!

5. The order of your website navigation is important

The number of items matters, but so does the order of those items.

In website navigation, just like any list, items at the beginning and the end are most effective, because this is where attention and retention are highest. It’s called the serial position effect, and it combines to cognitive biases:

  • Primacy effect: Items at the beginning of a list are more easily remembered.
  • Recency effect: Items at the end of a list (or things that just happened) are more easily remembered.

For this reason, anything we put at the beginning or end of our navigation becomes more prominent. We should put those items that are most important to our business and our visitors in these places.

Always seek to put the things that are most important to visitors in the most visually prominent places. This aligns with the core principal of web design and content marketing:

First give visitors what they want, then they might give you what you want.

So put the most popular, important items at the beginning of the navigation. Not sure what those are? Just look at your Analytics. Speaking of Analytics, let’s move on to our final tip.

6. How to optimize your website’s navigation

Designing your navigation is the beginning, not the end. Digital ink is never dry. A few weeks after creating your navigation, you can use Analytics to look back, and do a bit of evaluation.

There are two reports that will show you which navigation items are most used by your visitors. One is the “navigation summary” or “in-page” view in the Behavior report. The others are the Behavior Flow / User Flow reports.

In-page Analytics shows little orange boxes next to each of your navigation items, indicating what percentage of visitors went to each page from any page. It’s inaccurate and misleading for several reasons. It’s also a little buggy.

If this report doesn’t work for you, you can review the “navigation summary” from your home page. The list of pages and percentage pageviews for each will give you a good sense of what’s working in your menu.

website-navigation-navsummary

Another view into what people are clicking is in your Behavior > Behavior Flow report. This report is identical to the Audience > Users Flow report. These reports are identical unless you are tracking events. Event tracking is added to the Behavior Flow report data.

In either case, the report will look something like this:

website-navigation-behavior-flow

Tip! For more insights into how to use the User Flow report, read top paths through your website.

These reports are all ways to get ideas about which navigation items visitors are using and which one’s they’re not, making optimization possible.

Here are some examples of decisions you might make based on your analysis from these reports.

  • Remove items that rarely get clicked, if they aren’t critical
  • Rename or relabel that rarely get clicked, if they are important
  • Move items that often get clicked to the beginning

Warning! Keep in mind that your home page may not be the entry point for many visitors. A search optimized website has many entry points. Many (or even most) visitors won’t start from the home page.

7. Website navigation on mobile devices

The mega-trend of responsive web design has brought with it mobile navigation best practices and standards. It can be summed up in two words: “hamburger icon.”

It’s an icon made up of three short horizontal lines, representing a menu. But it looks a bit like a sandwich, so people call it the hamburger icon. It appears in the top right of mobile websites and clicking it reveals the navigation menu.

Here are a few examples of mobile navigation examples.

Website-Navigation-Best-Practices-Nav-Icons

Although this has become a dominant standard, adding the word “menu” may help visitors find this type of “hidden” navigation. The Nielsen Norman Group warns that hidden navigation increases task completion time for visitors.

ProTip! For mobile visitors, make sure that the phone number turns into a button that dials the number when tapped. It’s a simple matter of adding tel: to the href code for the phone number for the mobile version of your site. The code should look something like this:

<a href=”tel:773-348-4581″>(773)348.4581</a>

[Tweet “A good website makes your phone ring. – @crestodina #webdesigntips”]

For more ideas on mobile navigation and buttons, read how to design a button.

Charting (and changing) your course

We hope these tips gave you new ideas and inspiration for your menus. Ideally, you can implement your ideas quickly in your content management system. A good site is flexible, letting you adjust the labels and order of your menus.

There are exceptions to every rule. Not sure if you should make a change? Ask an expert web strategist to review your Analytics with you.

Make your navigation work well for both human visitors and search engine robots. Your Analytics will thank you for it!

Any other ideas or questions? What about the “home” button? Is it necessary? Do you put your phone number in your header? Add your comment below.

Share This

What are your thoughts?

By signing up you are agreeing to our Privacy Policy.

Comments (18)
  • Great piece, Andy! I’ve been working in SEO for years and I still learn something new from each of your articles. Thanks for the intro to the Link Juice Test.

  • I think it always will be between the minimalism, the user needs, a false UX and our appetency to show more.
    Thank you very much. I have 10+ years of the marketing experience but your articles is very useful for me,

  • Hi Andy!

    I have a question about two different options for navigation, and I’ll use a ‘Services’ link as an example –

    1. Services is listed on the navigation menu and when it’s clicked a dropdown menu appears with a list of 8 services. Each service brings you to it’s own page.

    2. Services is listed on the navigation menu and it leads directly to a page called Services which then includes 8 links to 8 separate pages about those services.

    Is one of these options better for SEO? I like option 2 better, but I was told that the more information is in the navigation bar, the better.

    Thanks!

    • I would generally prefer option two, since it’s a better way to guide visitors through the site. But if you have a lot of options (10+) the “mega dropdown” might be a good choice.

      And I would look for any label other than “services.” Try to be descriptive! It’s better SEO and better UX…

  • If you can’t identify the seven most important things to put on your menu, without drop-downs and with concise yet informative descriptions, you probably haven’t put enough thought into what your website is about.

    (And my hand’s up higher than Arnold Horshack on that one. Guilty!)

  • Hey Andy!
    Thanks for sharing such a great content about designing a site. I’ve some other problem,can you suggest some seo and design service which you highly recommend or do you offer this services??

    • We offer web design services, but we don’t do SEO as a separate, service. It’s really build in to our design process. But there are thousands of SEO companies. If you can, I recommend finding someone local that you can meet with regularly.

  • I was in such a hurry to edit my site nav that I forgot to thank you for this wonderful post :p

    And to answer your question, I put my email with (at) instead of @ at the top of the sidebar – no number, though, since I don’t see my target audience communicating with me across continents!

    Thanks again.

  • Thank you for the pointers. Better designs are like simple gear shift patterns. Working sites that deliver quick, easy, fully. Yeah. Do that.

  • Very useful guide. And #3—Foghorns Leghorns in the dropdown—Ha! You have a knack for making learning humorous and entertaining. Thank you.

    • It’s fun that you caught that. That was an 80’s cartoon reference for our Gen X readers!

  • Really liked the article. One thing on examination: The drop down menu study cited was primarily focusing on drop downs for adding information – not drop down menus in general. Drop down menus may be annoying but if designed with the other best practices you mention, my bet is that feature will be the least of the issues. Mega-menus are equally annoying when they overwhelm the viewer with too many options.

  • Very helpful, thank you for this article

  • It’s time to kill the 7 plus/minus 2 urban myth for menus. It applies when trying to recall the items, not when they’re visually in front of them as they are in a menu.

  • Hi, what would you suggest instead of “Services” in the nav if a company has too many services for each to be a nav item but not enough services to have a mega drop down menu?

  • After reading these tips, please take notice of the menu structure on this very page breaking the rules defined in the article.

  • Andy, this is another article that is extremely helpful. Thanks!

    However, it appears from the comments that this originally appeared 5 years ago. A lifetime in internet years. What has changed as far as best practices for 2017?

  • A client has a production co. with two events on their site, and each event has its own off-site ticket page. They want to include a “TICKETS” link in the top main menu with a drop-down that has the links to each of the off-site pages. My rule is to never link off your site in the main menu. Your thoughts?

 
Join over 16,000 people who receive bi-weekly web marketing tips.

By signing up you are agreeing to our Privacy Policy.

Share This