Website Navigation Best Practices

web design Dec 04, 2020
Graphic showing a website page structure and navigation map icon.

How you guide a visitor through each page of your website plays a critical role in leading them on a path-to-purchase. One wrong turn and they'll get lost or frustrated and leave.

A mark of good web design starts with your website's primary navigation, and how easy it is for a visitor to find exactly what they are looking for. And if you can help them discover other, relevant, and helpful content along the way, you've successfully provided your visitor with a great website experience.

 

Why Website Navigation Matters

Imagine a book without a table of contents, or a road without signs. Your website's navigation provides directions and context, and is the main method of helping your visitors find what they are looking.

The purpose of having a website in the first place is to provide helpful resources and content to your visitors, so why not guide them along the way?

Just like a table of contents or a street sign, you'll want your visitors to find and understand what they are looking at in just a few seconds. Why? Making things easy to find is part of a great experience for your visitors.

And when you provide a streamlined experience for customers, they will enjoy doing business with you and will continue to come back, again and again.

Let's take a look at a few techniques to improve your site's navigation.

 

How to Improve Website Navigation (with Examples)

Let's jump right in! Here are 5 best practices for website navigation that you can apply to your own website.

NOTE: Every website is different and may require you to veer from these specific examples. Even still, try to keep your visitor's experience top of mind.

 

Make Navigation Easy to Understand

If you are not comfortable with clicking on a link because you don't know where it will lead, then don't make the same mistake with your website navigation.

Visitors will avoid clicking a link if they do not know what it might lead to. So be clear about what the visitor can expect to find once they click. And remember that you're not the first website they've visited. They know what an 'About' page is.

Here are examples of what your navigation should include. ✅

  • Use of single words when possible
  • Words that are obvious, clear, and descriptive
  • Keep expected terminology like About, Contact, etc.

 

Here are examples of website navigation to avoid. 🛑

  • Multiple word navigation
  • Text that is vague or misleading
  • Unknown verbiage or techno-jargon

 

Navigation that uses one word and is clear will help guide your visitor along a familiar website experience. Stay away from vague navigation options like "Learn More". Learn more what?

 

Try Limiting Navigation Options

Too many options can lead to confusion and decision paralysis. Try and keep it simple and only offer the most important pages in your navigation, then link to other content from within those pages.

Offering mega-menus and drop-down menus can lead to confusion for the visitor who may not know if they should hover-over or click.

Below are examples of what you can include instead. 

  • Include a 'Home' option and link your logo to 'Home'.
  • Provide a path-to-purchase with internal links to other pages not listed in navigation.

 

Here is an example of what you should avoid. 🛑

  • Avoid putting every page in your navigation, especially in mega or drop down menus.
  • Avoid more than 5 to 7 navigation options.

 

 

Too many navigation options can make elements difficult to click, or clearly read. On mobile devices this can lead to errors like Clickable elements too close together in Google Search Console's Mobile Usability Report

 

Have Navigation Reflect Hierarchy

A hierarchy is imply way of organizing your content into folders and subfolders. This will affect each page's address and make it easy for visitors to know where they are on your website.

Here are a few ways to use hierarchy in your website navigation. 

  • Nest child pages inside parent pages (/services/service-A).
  • Add breadcrumbs (links to parent page) to help visitors find their way back.

 

Here are some navigational mistakes to avoid. 🛑

  • With a large website, avoid a flat hierarchy where all pages are under root domain.
  • Avoid too many levels where a visitor can get lost.

 

Keeping a consistent hierarchy across the folder structure and navigation of your website helps visitors quickly know where they are, and how to find or discover more content.

 

Add Navigation to the Header and Footer

You'll only notice it when a website's navigation is not in both the header and footer of every page. In fact, most visitors know to go to the footer navigation to find more navigation options since the header navigation is usually kept simple.

Remember to do the following in your header and footer navigation. 

  • Reserve the header navigation for the most important pages.
  • Use the footer to help visitors discovery other helpful or popular content.
  • Add social network icons to the footer ONLY.
    • Why invite a visitor to leave when they just got there?

 

Here are some things to avoid in your footer navigation. 🛑

  • Don't leave your footer navigation empty. Something is better than nothing.
  • Avoid confusion by labeling the columns in your footer.
  • At least put your business Name, Address, and Phone Number in the footer.

 

Don't neglect your website's footer. Visitors expect to find hidden gems there. Reward them!

 

Keep Navigation Simple

Lastly, keep your navigation simple. By simple, I mean try not to reinvent the wheel and have visitors first solve-a-puzzle to find the content they are looking for. (except of course if your website is about puzzles 🧩)

Here are ideas of what you can do. ✅

  • Try the ABC's of website navigation (trademark pending): About, Blog, Contact
  • And use expected navigation links like Home, About, Services, Products, Store, etc.
  • Identify the page visitors are on by underlining or making bold the selected page.

 

Here are navigation choices you should try to avoid. 🛑

  • Avoid using 'Hamburger' menus reserved for mobile devices on laptops and desktops.
  • Avoid making people hover-over or click excessively to find content.

 

Conclusion

It is easy to forget how important your navigation is in guiding visitors through your website.

Think of your website navigation like the signage you find when you visit a theme park and how those signs guide you through the park.

A pleasant, easy-to-use experience is what your navigation can provide when carefully planned and kept simple.

Hopefully this guide has equipped you with some hints, tips and ideas on how to build your website navigation. Please leave questions or comments below.

 

Stay connected with news and updates!

Join the mailing list to receive the latest news and updates from our team.
Don't worry, your information will not be shared.