Remember the Fidelity Investments ad with the green navigation line the customer follows? If you don’t, you can watch it below.
The point of the ad is Fidelity will navigate you to your financial goals. In the same way, your website navigation should guide a visitor to your website’s goal. One wrong turn and they’ll get lost or frustrated and leave.
The mark of good web design starts with your website’s primary navigation. Making it easy for a visitor to find exactly what they are looking for is crucial. And helping them discover content along the way provides a great website experience.
Let’s look at website navigation best practices.
Imagine a book without a table of contents, or a road without signs. Your website’s navigation provides directions and context. It is the main method of helping your visitors find what they are looking.
Like a table of contents or a highway sign, you want visitors to find what they are looking for in seconds. Why? Making things easy to find is part of a great experience for your visitors.
When a customer’s experience is easy, they enjoy doing business with you. And they will continue to come back, again and again.
Let’s take a look at a few techniques to improve your site’s navigation.
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 so don’t be afraid 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. Don’t expect visitors to either with confusing website navigation.
Visitors will avoid clicking a link if they do not know where it leads. 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?
Limit 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 using internal links to connect relevant content from within those pages.
Offering mega-menus and drop-down menus will lead to confusion for the visitor. To this day I never know if I should hover-over or click the menu.
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.
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.