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.
Cosmetics brand Frank Body have a great mobile-responsive web design. Their main navigation bar is sticky and remains at the top of the user’s screen as they scroll down the page, and they also have a separate sticky menu at the bottom on the screen that shows product categories (see example below).
2. Replace the Drop-Down Menus
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.
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.
Etsy is another great example of how to prominently display your search bar in the main navigation bar. For an ecommerce store like Etsy, site search is an essential part of the user experience. To help customers easily find the search bar, they prominently display it in their navigation bar on both mobile and desktop to get their customers to use it.
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.
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.
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 (see below), they provide a small image to give the customer a sample of what that product line looks like.
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 it’s an essential component of your website you should at least provide your users with some visual indicators to help understand
5. Create Separate 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.
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.
6. Add a Mega Footer
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.
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 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.
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.
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.
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.
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 Site 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.