website navigation header

8 Innovative Ways to Optimize Your Website Navigation

Website navigation can make or break your visitors’ experience. The easier and more engaging your navigation experience is, the more time users will spend on your site.

Website navigation can make or break your visitors’ experience. Attempting to navigate a website without a logical, well-defined structure is like being dropped in the middle of a complex maze with no map and no frame of reference. It’s overwhelming, frustrating, and all-around unpleasant — not exactly the user experience you’re hoping for.

However, creating a good navigation system is easier said than done. That’s why we’ve come up with eight ways you can help users find their way. They’ll turn a potentially negative experience into a great one. 

8 Website Navigation Best Practices

1. Optimize Your Mobile Website’s Navigation

Having a mobile-responsive navigation menu is essential to any ecommerce website. Consumers expect the mobile user experience of a website to be as good, if not better than the desktop experience. Provide your website visitors with a responsive, optimized navigation bar and you’re guaranteed to see an improvement in your mobile conversion rate. 

Consider simplifying the navigation bar for your mobile site. The more unnecessary options you provide for visitors, the more convoluted the user-experience will become. 

Ferrum Pipe has a very effective mobile menu that, while very simple, conveys to users: 1) what they sell, and 2) how to get in contact with them (see example below). It’s really as simple as that. Any inessential information you might want to provide users can (and should) be moved to your website’s footer.

Ferrum Pipe website navigation on mobile is easy to use and well designed

2. Replace the Drop-Down Menus in Your Website Navigation

When the options in your drop-down menu are fairly complex, unfamiliar, or extensive, consider replacing it with a detailed page. Usability research shows drop-down menus are annoying; plus, you’ll need to sacrifice valuable info to make everything fit. 

Apple has used this strategy to help customers navigate their support menu. Rather than cramming all of the support options into a drop-down menu, they opted to create an entire page that has each product category they offer. The accompanying visuals make finding the right option a simple task. 

Apple support menu features image cues

3. Make Site Search Frictionless 

People who run a site search convert approximately two times more often than people who don’t. 

It makes sense: Visitors who use search typically have intent to buy or act. Plus, they’re much more likely to find what they’re looking for. 

IKEA is a great example of a company that relies heavily on their site search capability. Stores that carry thousands of SKUs in a variety of product categories need a prominently displayed search bar, so their customers can find exactly what they’re looking for. You can see on the mobile version of their website that they stick with a very minimal design: a hamburger menu button, a shopping cart button, and a search bar. 

Ikea site search on mobile has minimal design and a great user experience

Airbnb is another great example of how you can highlight the search function in your navigation menu. On their website, the search bar is the first element to load on the homepage, and it’s prominently displayed at the top of screen to encourage visitors to interact with it. If site search is an essential component to the user experience of your site, make sure that the search bar is prominently displayed for visitors to see.

Airbnb highlights site search on their website navigation

4. Provide Context

To help visitors find the right page without expending a single click, include clues within your drop-down menu. A clue could be a handy icon, a visual, or another helpful piece of information.

Enjoying this article?

Subscribe to our newsletter to get more just like it, sent straight to your inbox every week.

For instance, the “Category” tab on Awwwards doesn’t just display the various categories—it also tells you how many entries are in each one.

Awwwards shows the number of results in each category of their website navigation for context

Want to browse websites by hue? Each choice in the “Color” menu is helpfully color-coded.

Swiss Gear has an interesting approach to designing a nested navigation menu. For their top-level product categories, they include a small picture of each sub-category to provide some context as to what you’ll see in that sub-category. For example, in the ‘1900 Collection’ sub-category, they provide a small image to give the customer a sample of what that product line looks like. 

swiss gear menu navigation

This tactic works especially well if you have a multitude of product categories that are very specific to your industry. Using confusing jargon in your navigation menu is the worst thing you could do, but if it’s an essential component of your website you should at least provide your users with some visual indicators to help them understand.

5. Create Separate Website Navigation Menus for Different Audiences

It’s always tricky to design an interface that caters equally to two distinct groups. To make sure each one can find what they need — without having to dig through irrelevant content — divide your links into two.

The Muse, for instance, has two audiences: job-seekers and employers. The first four links in the top nav bar target job-seekers, while the fifth redirects companies to their own section of the site. The link is gray, not white, to indicate that it’s different from the others.

The Muse website navigation splits into two options depending on the user

Lyft uses the same concept on its homepage. Instead of having a traditional nested navigational menu layout, they created separate menus and homepages for each category of users. Depending on which section of the website you’re on, you’ll see different main menu items.

Lyft divides website navigation for easy access depending if you are a driver or a rider

Navigational fatigue is definitely a real thing — and when your site has a complex hierarchy, users quickly get tired of expanding sub-menu upon sub-menu.

Mega footers are an optimal solution. They provide navigation links to all the important pages on your site, so people can quickly jump to exactly what they’re looking for. Including a mega-footer on your site can positively impact your site’s bounce rate as well as overall conversion rate.

Take a look at Baxter’s footer to get an idea. 

Baxter mega footer is a way to positively improve bounce rate

A mega footer can also be a great place to incorporate important keywords to improve your Google search engine result page (SERP) rankings. Take inspiration from GrubHub’s mega footer. If you’re trying to rank for a number of specific locations, including them in your footer will help will your local SEO without you having to list them in your main menu. 

GrubHubs mega footer shows many locations in the website navigation which positively impacts SEO

7. Choose Your Menu Order Strategically

If I asked you to buy 12 things from the grocery store, chances are you’d come back with the first two items, the last two items, and maybe one of the middle items. That’s thanks to the serial position effect, which shows people have the greatest recall for the first and last items in a list.

You can take advantage of this effect in your navigation design. To drive visitors to your most important links, place them at the beginning and end of your menu.

Digital Kitchen has book-ended its nav bar with “Clients” and “Contact.” This was a wise choice: first, the agency builds social proof with its roster of previous clients, then it directs visitors to get in touch.

Digital Kitchen bookends it's website navigation with clients and contact to build social proof

8. Re-List Sub-Choices

Common UX wisdom dictates that you shouldn’t repeat content. However, navigation is one of the few exceptions to this rule. If one or more of your pages naturally fits into two categories, you should list it in both.

REI’s menu illustrates why. Someone who’s interested in buying a backpack might look under “Travel” or she might look under “Camping” — whichever she clicks, you want her to find the backpack page.

REI shows how sometimes you should repeat content in your website navigation to improve user experience

In that example, both navigation choices probably seem obvious. But you’ve probably noticed users often confound your expectations. Usability testing definitely comes into play here; watch how visitors try to find their way to specific pages, and look out for common trends.

Of course, you don’t want to go too far in the other direction and start listing every link under multiple headings. If people are always having trouble identifying the appropriate categories, your labels are probably misleading or incorrect.

Make Your Website Navigation Seamless

The more user-friendly your navigation experience is, the more time users will what to spend on your site. Don’t abandon them in a maze — hand them a map.

At The Good, we’re experienced in optimizing web navigation menus. In a conversion rate optimization program, the navigation menu is one of the first places we look to improve because it plays such an essential role in the user experience of a website. If you’re interested in testing and improving on your site’s navigation menu, request a free landing page assessment. In your assessment we’ll take a close look at your website design and identify key areas that may benefit from improvement. 

Want a free landing page teardown?

We’ll provide a data-driven critique of the usability and effectiveness of your site free of charge.

Jon MacDonald smiling at the camera for The Good

About the Author

Jon MacDonald

Jon MacDonald is founder and President of The Good, a conversion rate optimization firm that has achieved results for some of the largest online brands including Adobe, Nike, Xerox, Verizon, Intel and more. Jon regularly contributes content on conversion optimization to publications like Entrepreneur and Inc. He knows how to get visitors to take action.