By: Deborah O'Malley, M.Sc. | Last updated May, 2022
A Navigational Menu, also known as a navigational bar, or nav bar, is a menu system, usually located at the top of a website.
Its purpose is to help users find categories of interest and access key pages on a website.
The nav bar is usually organized into relevant sections and may have a dropdown menu or sub-sections directly below.
Most have clear section and sub-section menu titles.
These titles should state what the users will get, or where the user will arrive, by clicking into the menu category.
A typical nav menu may look something like this:
The nav menu is, usually, present across all pages of your site. That means optimizing it can pay big returns, impacting every stage of your conversion funnel.
Testing the organization, presentation, and wording in the nav menu presents a great optimization opportunity with potentially incredible conversion returns.
In fact, there's not many other site-wide, high-ticket, low-effort tests like nav menu formatting.
However, in order to optimize a nav bar effectively, there are several important "do's" and "don'ts" you must follow.
Before redesigning or reorganizing any nav bar, always think about SEO and the keywords your visitors are using to find your site and navigate through.
Don't remove or rename any nav menu titles that will lower your SEO value, SERP, or keyword rankings.
This advice is especially important if a large portion of your site traffic comes from paid ads. You want to be using and showcasing the keywords you're paying for or that are bringing visitors to your site.
Once on your site, users will expect to see these keywords and will look for them to orient themselves on your website.
So cater to visitors needs and expectations by showcasing these keywords in your nav menu.
Don't add or remove nav bar links without thinking about the site structure and internal linking. Otherwise, you risk adding or removing access to pages that link throughout your site.
Ideally do an XML map before making any changes involving internal links. As XML sitemap will look something like this:
Here's a good article on how to create an XML sitemap.
Heatmapping data is a powerful way to see how visitors are interacting with your site and the nav menu.
As you can see in this example heatmap, the bigger and darker the hotspot, the more likely it is visitors are interacting with that section of the site:
Use heatmapping data to see what nav categories your visitors are clicking on most or least.
But don't stop there. Explore trends across both desktop and mobile.
Take note if users are heavily clicking on the home icon, menu, or search box as all of this behavior may indicate users are not able to easily find the content they're looking for. Of course, eCommerce clients with a lot of products to search are the exception.
Also take note if a user is clicking on the nav page link, say pricing, when they're already within the pricing section. This trend provides clues the nav or page structure may be confusing.
And visitors might not realize where they are on site.
If you detect this type of behavior, test the effect of making specific changes to optimize the interaction for users.
One great way to do so is through breadcrumb links.
Breadcrumb links, or breadcrumbs, are links placed directly under the main nav bar. They look something like this:
Breadcrumbs can be helpful to orient users and better enable them to navigate throughout the site. Because when users know where they are, they can navigate to where they want to be. Especially on large sites with a lot of pages.
If you don't already include breadcrumbs on your site, consider testing the addition of breadcrumb navigation, especially if you have a large sites which many pages and sections.
At their essence, words are just squiggly lines on a page or website, but they have a visual presence that can be subconsciously perceived and understood.
That's why whether you put your nav menu titles in ALL CAPS <-- (like this) or Title Case <-- (like this) may make a surprising conversion difference.
PUTTING A SMALL AMOUNT OF TEXT IN ALL CAPS IS FINE FOR EMPHASIS. OR IF YOU'RE TRYING TO COMMUNICATE A POINT IN A LOUD, OFTEN ANGRY, BLATANT TONE.
BUT LARGE BLOCKS OF TEXT IN ALL CAPS IS DIFFICULT AND TIRING TO READ.
In fact, according to renowned usability expert, Jakob Nielsen, deciphering ALL CAPS on a screen reduces reading speed by 35% compared to the same font in Title Case on paper.
The reason ALL CAPS is so difficult, tiring, and time consuming to read is because of the letter shape.
In APP CAPS format, the height of every letter is the same, making each letter in every word create a rectangular shape.
Because the shapes of all the letters are the same, readers are forced to decipher every letter, reducing readability and processing speed.
Need proof? Take a look at this example:
With Title Case, the tops of each letter helps us decipher the text, increasing readability and reading speed.
That said, TITLE CASE DOES HAVE UTLITY!
It's great for drawing attention and making you take notice. That's why it works well for headings and highlighting key points.
But to be most effective, it needs to be used sparingly -- and when isn't not necessary to quickly decipher a big chunk of text.
With these points in mind, test whether it's best to use ALL CAPS or Title Case with your audience on your site.
GOT THAT!? 😉
If you need some inspiration, checkout this real-life caps case study. Can you guess which test won?
Sometimes the navigational format we think will be simplest for our users actually ends up causing confusion.
Because nav menus are such a critical aspect of website usability, testing and optimizing their formatting is critical to improving conversions.
Which brings up the question, should you use a top "callout," that looks something like this, with the bolded text to categorize, highlight and make certain categories pop at the top?
Doing so may save visitors from having to hunt down and search each item in the menu.
But, it also may create confusion if you're repeating the same product categories below. Users may be uncertain if the callout section leads to different a page on site than in the rest of the menu.
An optimal site, and nav system, is one that leaves no questions in the user’s mind.
So test the effect of adding or removing a top callout section in your nav menu. See this real-life case study for inspiration.
Can you guess right?
Back in the olden days, all websites had text menus that streched across the screen.
But that's because mobile wasn't much of a thing. As mobile usage exploded, a nifty little thing called a "hamburger" menu developed.
A funny name, but so-called because those stacked little bars look like kinda a hamburger:
Hamburger menus on mobile make a lot of sense. The menu system starts small and expands bigger. So it's a good use of space on a small-screened device.
Hamburger menus have become the standard format on mobile.
But does that mean it should also be used on desktop? Instead of a traditional text-based menu?
It's a quesiton worth testing!
In fact, the big-name computer brand, Intel, tested this very thing and found interesting findings. Can you guess which test won?
And while you're at it, if you are going to use a hamburger menu -- whether on your mobile or desktop site -- test placement.
Many a web developers put the hamburger menu on the right side. But it may not be best placed there. For two reasons:
In English, we read from left to right and our eyes naturally follow this reading pattern.
In fact, eye tracking studies show we, typically, start at the top of the screen, scan across, and dash our attention down the page. This reading pattern emerges into what's known as an "f-shaped pattern."
And because of this viewing behavior, the top left of the screen is the most coveted location. Known as the "golden triangle," it's the place where users focus most.
Here's a screenshot so you can visualize both the F-shaped pattern and golden triangle:
Given our reading patterns, it makes sense to facilitate user behavior by placing the hamburger menu in the top left corner.
As well, as this article by Adobe design succinctly says, because we read (in English) from left to right, it naturally follows that the nav menu should slide open from left to right.
Otherwise, the experience is unexpected and unintuitive; that combination usually doesn't convert well.
But do test for yourself to know for sure!
A persistent, or "sticky" nav menu is one that stays with users as they scroll up or down.
How well does a persistent or sticky nav bar work?
It can works wonders, especially if you include a sticky CTA within the nav bar, like this:
But a sticky nav bar doesn't always have to appear upon page load.
It can also appear upon scroll or upon a set scroll depth. What works best?
See this case study for timing ideas and challenge yourself. Can you guess the right test?
The best wording within your nav menu are titles and categories that resonate with your user.
To know what's going to win, you need to deeply understand your audience and the terminology they use.
This advice will differ for each client and site. But, as a starting point, delve into your analytics data.
If you have Google Analytics set-up, you can find this information by going to the Behavior > Site Search > Search Terms tab. (Note, you'll need to have previously set-up this search function to get data).
For example, here's the search terms used for a client covering divorce in Canada:
Notice how the keyword "divorce" barely makes it into the top-5 keywords users are searching? In times of distress, these users are looking for other resources.
Showing keywords that resonate in the top nav can facilitate the user journey and will make it more likely visitors click into your site and convert.
Pro tip: using analytics data combined with heatmapping data can provide a great indication of whether users are clicking on the nav menu title giving a good clue whether the wording resonates.
Need more inspiration for high-converting copy?
See this case study examining whether the nav menu titles "Buy & Sell" or "Classifieds" won for a paid newspaper ad site. Which won one? The results may surprise you:
Testing whether a sticky nav bar works best is a great, easy test idea. Looking at what nav menu copy resonates is also a simple, effective way to boost conversions.
So why not combine both and test the winning wording within a sticky nav bar with a Call To Action (CTA) button!?
Here, again, you'll need to really understand your audience and assess their needs to determine and test what wording will win.
For example, does "Get a Quote" or "Get Pricing" convert better? The answer is, it depends whose clicking from where. . . See this case study for testing inspiration:
But just because an overall trend appears, doesn't mean it will hold true for all audiences.
If you have distinct audiences across different provinces, states, or countries, optimal copy may differ because the terminology, language, and needs may also change.
When catering to a local audience, try to truly understand your audience so you can best hone in on their needs.
Test the optimal copy that will most resonate with the specific cohort.
Segment results by geolocation to determine which tailored approach converts with each audience segment.
It may seem like a small change, but optimizing a navigational menu can have a big impact on conversions.
To optimize, start by using analytics data to inform your assumptions. Then test the highest-converting copy, format, organization, and design. And segment results by audience type.
Doing so will undoubtably lift conversions.
Hope these test ideas are helpful for you!
Please share this post widely and comment below.
Join the Best in Test awards ceremony. Submit your best tests and see who wins the testing awards.
A primer explaining the 4 different types of tests you can run, what they mean, and how you can use each to improve your competitive testing advantage.
One of the most debated testing topics is how large does my sample size need to be to get trustworthy test results? Some argue samples of more than 120,000 visitors per variant are needed to begin to see trustworthy test results. Ishan Goel of VWO disagrees. What does he think is needed to get trustworthy test results? Listen to this webinar recording to find out.
