Website Navigation: Tips, Examples and Best Practices

by Cody Ray Miller

Last updated on October 25th, 2018

website-navigation-introduction

How is website navigation different from navigating the streets of an unfamiliar city?

You’re following map points to reach desired destinations. The only difference is that, in the case of your website, you’re the one in charge of getting visitors from Point A to Point B.

Your website’s navigation structure can have a huge impact on conversions, sales, and bounce rates. If visitors can’t figure out what to do when they get to your landing page, they’ll just exit and find a different site to peruse.

That’s the last thing you want. Instead, create clear, hierarchical website navigation that helps your visitors find what they want and need.

Why Is Navigation Important on a Website?

Let’s go back to the city analogy. You’ve just landed in London, Singapore, or New York City. The list of desirable destinations is clear in your head, but you need to know how to get there.

Cities use signage to help visitors and locals ground themselves in place and time. A green street sign or a blue sign that tells you a particular place is just around the corner help you avoid getting lost.

Signage also helps cities engage visitors. The Statue of Liberty might not be on your list of places to visit, but if you see a sign indicating that it’s just around the corner, why not stop by?

Website navigation serves exactly the same purpose. Without it, your visitors can’t figure out how to find your blog, your email signup page, or your product listings.

Start with this rule of thumb: Your website navigation structure should allow someone to land on any page on your site and navigate to another page.

It would be great if you knew that every visitor would start on your homepage and follow a predictable path. That’s not the reality. Just like in a city, people land in different places and have different agendas once they arrive. That’s why you must pay attention to website navigation and make sure it’s intuitive.

Additionally, remember that the purpose of website navigation is to convince people to explore your site further. Give them reasons to click on links by inspiring curiosity and enticing them with great offers.

Understand the Connection Between Website Navigation and User Experience

User experience refers to the way a visitor perceives your website’s usability and aesthetics. You want everyone who visits your site to have a good user experience.

Lots of aspects of web design and development play into user experience:

Website navigation is one of the top factors to consider, though, because if visitors can’t find your web form, it doesn’t matter how pretty it is.

Website navigation allows visitors to flow from one page to another without frustration. If you’ve done your job well, visitors leave your site with the intention to return and might even buy something from you or sign up for your email list.

People visit lots of website every day, so they have no shortage of places to find what they want. If you don’t offer a clear website navigation menu, breadcrumbs, and other ways to explore your site, they won’t bother.

Types of Website Navigation

When most people think of website navigation, they picture the website navigation menu that appears in the headers of most websites. If you visit the Crazy Egg blog, you’ll see a prime example:

website-navigation-crazyegg-blog

However, other types of website navigation exist.

Sidebars are a common addition to many websites. They’re positioned to the left or right of the primary content. Some websites even have dual sidebars.

Then you have footers, which often contain links to the site’s main pages as well as popular resources. So-called fat footers have been in vogue for a while now. They allow for more links, which means a better user experience.

The Zappos fat footer is a good example:

website-navigation-zappos-footer

Many websites also use breadcrumbs. These are hierarchical navigation links that appear on a specific page. They tell you how that page is nested within other pages. You can see breadcrumbs on the Crazy Egg blog:

website-navigation-crazyegg-breadcrumbs

Above, the unlinked page name tells you where you are. Then you can see what category that page is assigned to (conversion), the part of the site in which it exists (blog), and the homepage (Crazy Egg).

The rise of mobile has created a need for other types of website navigation. Consider, for instance, the hamburger menu. Here it is on Neil Patel’s website:

website-navigation-neil-patel-menu

The hamburger menu expands when you click it.

website-navigation-neil-patel-meni-expanded

Most of these menus only appear on mobile devices.

Keep in mind, though, that website navigation and hyperlinks aren’t synonymous. It’s great for SEO purposes to sprinkle internal links throughout your content, but they aren’t considered part of your site’s core navigation.

3 Great Website Navigation Examples

Now that we have a better understanding of what website navigation is, let’s figure out what it looks like. The following are three examples of excellent website navigation best practices in use.

1. WE3

website-navigation-1-we3

Here, we have a screenshot of the WE3 homepage. We chose this example because it demonstrates how web navigation best practices can be molded to fit your website’s or business’s specific needs.

  1. Here’s the main focus of the site. You can click this link to immediately locate friends in your city.
  2. The Download link is special. You can tell by the button look.
  3. Search is extremely important in website navigation. You want visitors to be able to find what they want through a simple search of your site.
  4. Then we have the social icons. This is an extremely social-oriented brand, so highlighting these links in the header navigation makes perfect sense.

2. Ensurem

website-navigation-2-ensurem

Here’s the primary navigation for the website Ensurem. It’s very simple, but also highly intuitive.

  1. Contact information is essential. You want it on every page of your site. This example shows two ways to get in touch with company representatives.
  2. Here, we have the core pages of the site. The Learn and Shop links expand to show even more options and to narrow down what the visitor wants.
  3. Again, there’s a search bar. Allowing people to search your site saves them time and reduces your bounce rate.

3. Greenstreet Coffee

website-navigation-3-greenstreet-coffee

Let’s look at an example from a local and ecommerce company. You see the typical navigation menu, but this one is special for a couple reasons.

  1. The wording of the navigation headings are extremely user friendly. You can decide exactly what you want to check out first, whether you’re interested in buying or you want to know more about the company.
  2. There’s an open search bar, which differs from the previous two examples. It might be more intuitive for people who aren’t as well-versed in web navigation.
  3. There’s an icon to show you how many items are in your cart. This is a hugely beneficial navigational element to include in an ecommerce case. The link takes you to your cart.

Website Navigation Best Practices and Tips

What if you’re starting your website from scratch? Or maybe you’ve decided to tweak your website navigation for better results. What should you do first?

The reality is that website navigation builds on itself and keeps the visitor engaged in the site. Missing just one website navigation best practice can result in a lost conversion.

Here’s your cheat sheet for website navigation best practices. Follow each one closely to improve user experience.

1. Make hypertext obvious

One of the most common problems is letting design get in the way of usability. If visitors can tell a hyperlink from body copy, you have a problem.

The easiest way to make hypertext obvious is to make sure it differs from every other element on the page — and not just when the visitor rolls over the link. Format it in a different color, underline it, or make it bold. You can even turn your header navigation links into buttons if you wish.

2. Streamline your navigation bar

Many websites have either too many or too few links in the header navigation bar. Think about what you want people to do on your site, but also consider what visitors might want.

For instance, you might want your visitors to convert, but your visitors might want to know more about your company or learn about your philosophy.

If your navigation menu starts to look a little cluttered, consider organizing your site better. Use a main heading, then include a sub-menu with other links categorized below it.

3. Keep sidebars separate

A sidebar shouldn’t look like the rest of the content on the page. It should stand out.

Many websites accomplish this with color. The designer might format the sidebar with a different background color than the body copy.

White space — or negative space, if you prefer — works well. Make sure there’s plenty of separation between your sidebar and other elements.

4. Put your navigation in a standard place

Creativity is great, but not when it comes at the expense of user experience. Put navigation in places where people expect to find it.

This includes the header navigation bar, sidebar, and footer. Make use of those areas so visitors can find what they need. If you want to add creative navigation, such as by using multimedia, make it obvious that visitors can click.

5. Make everything clear and simple for the user

Your website’s navigation menu isn’t for clever or witty tricks. Use the clearest design and text possible so visitors know what you mean.

There’s a reason most websites use the word “About” for the about us or about me page. It’s clear and recognizable. The same goes for simple words like “Contact” and “Services.”

6. Don’t forget the footer

If you use WordPress, you can find thousands of themes that include fat footers. Use them to your advantage. You don’t have to include dozens of links, but make use of the space.

In some cases, you might just want to repeat the header navigation bar. That way, people don’t have to scroll up to find the link they want.

You can also expand on the header navigation bar. Add other links to important pages on your site.

7. Connect the navigation with the business’s priorities

While it’s essential to keep user experience in mind, you also want to funnel your visitors to the most important pages for conversions and sales. Directing visitors to those fundamental pages can have a big impact on your business’s bottom line.

Create a balance between pages that might interest your visitor in terms of curiosity, but add links that also direct your visitors through your funnel.

For instance, include the “About” and “Contact” page as well as a link to your blog. Then add a great CTA, such as “Download” if you have a mobile app or “Test Drive” for a SaaS business.

8. Make sure that the website navigation is 100 percent responsive on mobile

If your website navigation doesn’t render properly on mobile, you’re in trouble. There are responsive designs and themes for every major content management system, so make sure you avail yourself of them.

In some cases, the navigation menu is simply tightened. In others, the aforementioned hamburger menu appears. Make sure the links themselves are large enough for human hands to tap them easily. Remember that some people have larger thumbs than others.

9. Leave the buttons for the calls to action

Ten years ago, most websites had buttons for header navigation. Today, though, all that visual noise feels clunky. Plus, it doesn’t allow you to emphasize a particular link in your website navigation.

Reserve those buttons for calls to action. You might ask visitors to sign up for your email list, demo your product, or schedule a call. Whatever the case, make it bolder and brighter than the other links.

Find Out How Your Audience is Navigating Your Website

All the website navigation best practices in the world aren’t a substitute for actionable data. Your audience is different from everyone else’s, so you want to know how they behave on your site.

User behavior reports tell you how many people click on a particular area of your website. A Crazy Egg Heatmap, for instance, uses color temperature to show you where your visitors’ attention lies.

You might discover, for instance, that nobody clicks on the links in your navigation bar. Why? Perhaps you’re not making clear that the hypertext is a link, or maybe you’ve created too many distractions below the bar.

Scrollmaps are also highly useful. If you know that people never scroll to the footer on your website, you know you don’t have to put as much emphasis on that part of the page.

Step-by-step guide to start using Crazy Egg’s tools

Run user behavior reports to get a general overview of how people respond to your website navigation. You can also run Recordings to watch individual users in action. This will tell you whether people seem confused about a particular link, for instance, or if they click away because they can’t find what they want.

Sign in to your Crazy Egg account and download the Chrome extension. Decide whether you want to create one Snapshot or multiple Snapshots.

website-navigation-snapshot

Enter the URLs from which you want to generate Snapshots, then name each one. You can then install the Crazy Egg tracking code on your website and begin reaping the rewards.

After you’ve collected data, run A/B tests on your website navigation. Change up small things at a time to see whether or not they have an impact on clicks.

Over time, you can continue to run Snapshots on your website to see how your visitors’ behavior changes. When you add something new to your navigation bar, for instance, you’ll want to see how it performs.

Conclusion

website-navigation-conclusion

Website navigation is one of the most overlooked aspects of user experience and website design. We often take it for granted.

Instead of mirroring other websites because they look good, figure out what navigational elements are most important to your business and your audience. Add links that appeal to both interests.

You know you want people to convert on your offers and buy your products, but your audience might not be ready to buy. Navigational links should give them other reasons to stay on your website.

With Snapshots, Recordings, and A/B tests, you can fine-tune your website navigation and ensure you deliver the best possible user experience to your audience.

7 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Cody Ray Miller

Cody Ray Miller is a young entrepreneur and the founder of Freedom Online Team, an internet business making money online. He also provides free MLM training to networkers.

7 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. nawal says:
    June 15, 2014 at 12:35 pm

    Couldn’t agree more. Here is another article related to navigation and is really amazing.
    http://starscontest.com/blog/how-to-make-a-cushy-website-navigation/

    • Neil Patel says:
      June 15, 2014 at 7:12 pm

      Nawal, glad you found it helpful. Thanks for the feedback 🙂

  2. Josh Miller says:
    August 30, 2013 at 11:17 am

    Thorough, informative, and well written article, Cody. One lesson I’ve learned over and over again is “Less is More”. A minimalist design is not only aesthetically pleasing but also allows the designer to clearly direct a visitor’s attention to a desired goal (such as clicking on the “Contact” button). And it’s great for analytics and site performance, too!

  3. August 27, 2013 at 12:40 pm

    Great overview, thanks! I’ve got something to add to your guidelines for body hypertext:

    To increase user trust and encourage click-throughs on hyperlinks, I would recommend making the hypertext as descriptive as possible for what the user can expect to see when he/she clicks it. Savvy users could otherwise judge the text as leading to spammy, unhelpful pages.

    • August 27, 2013 at 9:43 pm

      Sarah, this is so true! Hyperlinks should always lead somewhere genuine. I visited a blog recently that had a bunch of hyperlinks with key anchor text that merely led back to their homepage. The problem was that their homepage did not offer what the hyperlinks claimed. This is a lose-lose strategy. The user does not get what they want, which means they will not be utilizing your site in the future. So, the user misses out on whatever they are looking for and you lose out on traffic.

      Blessings,
      Cody

  4. Liudas says:
    August 27, 2013 at 10:46 am

    So, much great info to take action on 🙂 though sadly my WordPress theme doesn’t allow to do all the changes that I would want…

Show Me My Heatmap

Ah, @CrazyEgg I really do love you! So useful evaluating how users are interacting with all aspects of our zanerobe.com redesign

Mike Halligan

@MrMikeHalligan

What makes people leave your website?