Your website’s navigation structure has a huge impact on conversions, sales, and bounce rates.
If visitors can’t figure out where to find what they want, they’ll leave.
That’s the last thing you want. Instead, create clear, hierarchical website navigation that helps your visitors find what they want instantly.
Why Is Navigation Important on a Website?
Without website navigation, your visitors can’t figure out how to find your blog, your email signup page, your product listings, pricing, contact information, or help docs.
Start with this rule of thumb: Your website navigation structure should allow someone to land on any page on your site and find what they need within 3 clicks.
In an ideal world, every visitor would start on your homepage and follow the same path through your website. But that’s not the case. Website visitors navigate all over the place.
Keep in mind that you want to keep people on your site to explore 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.
Many of aspects of web design and development play into user experience:
- Fonts, colors, and images
- Headlines and CTAs
- Availability of contact information
- Page load time
- Form design
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:
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:
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:
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:
The hamburger menu expands when you click it.
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
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.
- This is the site’s main focus. Click this link to immediately locate friends in your city.
- The Download link is special. You can tell by the button look.
- 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.
- 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
Here’s the primary navigation for the website Ensurem. It’s very simple, but also highly intuitive.
- 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.
- 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.
- Again, there’s a search bar. Allowing people to search your site saves them time and reduces your bounce rate.
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.
- 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.
- 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.
- 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’t 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.
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 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.
