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.
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.
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.
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.
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, 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 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.
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 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.
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.
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 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.
Originally published at https://thegood.com.
