Little things make a big difference. Your website navigation is a great example. The structure and labels of your navigation can have a huge impact on results. Here’s why:
Here is a checklist for website navigation best practices. These are design ideas and tips along with examples of what to do (and what not to do) with your website’s menu.
“What we do” doesn’t actually say what you do. Neither does “Products,” “Services” or “Solutions.” Descriptive navigation that uses keyphrases is better for two reasons. Here’s where SEO and conversions come in.
Use your main navigation as a place to start telling people and search engines about what you do. Use labels that use top-of-mind phrases for visitors and popular keyphrases according to the Google Keyword Tool.
Warning! Avoid labels such as “services” and “solutions.”
If you have one page listing all of your services, it will never rank. That’s because it’s not focusing on one topic. Every page on your website has a chance of ranking, as long as it’s focused on a topic, on a keyphrase.
No one is searching for “products” or “services,” so these labels don’t help your rankings.
This is why your website architecture, not just the navigation, is key for SEO. A search optimized website has a page for each service, each product, each team member and topic. Avoid making a “services” page unless it links to other, search optimized pages for each service.
For more info, read how to make a sitemap.
Navigation labels such as “videos,” “photos” and “whitepapers” tell visitors the format of the content, but not the topic. People don’t go to websites looking for videos or whitepapers. They visit websites looking for answers and information.
Labels indicating the format aren’t descriptive and therefore, not very helpful to visitors. That’s why Aurora Bedford from the Nielsen Norman Group recommends against using format-based navigation.
“Users interested in a specific topic usually don’t care in what format the information will be delivered to them; they are focused solely on finding answers that will address the question they had in mind.” – Aurora Bedford, User Experience Specialist, Nielsen Norman Group
Popular, yes. But not a good idea. Avoiding drop down menus is good for two reasons:
More importantly, drop downs encourage visitors to skip important pages. If you’re using drop downs, you can easily see this problem in your analytics.
But the research shows that one type of drop down menu performs well in usability studies: The “mega drop down.” These offer lots of options, making that moment of friction worth it.
If you have a big site with lots of pages and a very diverse set of products or services, a mega menu may be a good idea, despite the fact that they dramatically increase the number of links from your home page.
Some websites have hundreds of links on the home page. That’s bad. Limiting the number of links in your main navigation is good for two reasons. These are the same two reasons to use descriptive labels:
Example: If your homepage has an authority of 38 according to Open Site Explorer, then is has just this amount of authority to pass along to interior pages.
Suppose your navigation includes 50 items and combined with every other link and button on the page, you home page links to a total of 200 pages. This means the amount of authority passed from the homepage to each of those pages is divided by 200.
If you cut the number of links in half, you’ll double the amount of authority passed from the home page, and increase the chance that your interior pages will rank.
Tip! The “Link Juice Calculator” counts the number of links on any page. It also estimates the increase in authority that would be passed if you reduce the number of links. It uses PageRank, not Domain Authority, but the concept is the same.
Warning! Avoid long lists.
Break out your navigation into groups of five to seven items.
Tip! Each time you remove a menu item (or any other element) from a page, everything left becomes more visually prominent and is more likely to be seen and considered.
It takes discipline to make the tough decisions. You can do it. Challenge yourself to trim it down to five!
The number of items matters, but so does the order of those items.
In website navigation, just like any list, items at the beginning and the end are most effective, because this is where attention and retention are highest. It’s called the serial position effect, and it combines to cognitive biases:
For this reason, anything we put at the beginning or end of our navigation becomes more prominent. We should put those items that are most important to our business and our visitors in these places.
Always seek to put the things that are most important to visitors in the most visually prominent places. This aligns with the core principal of web design and content marketing:
First give visitors what they want, then they might give you what you want.
So put the most popular, important items at the beginning of the navigation. Not sure what those are? Just look at your Analytics. Speaking of Analytics, let’s move on to our final tip.
Designing your navigation is the beginning, not the end. Digital ink is never dry. A few weeks after creating your navigation, you can use Analytics to look back, and do a bit of evaluation.
There are two reports that will show you which navigation items are most used by your visitors. One is the “navigation summary” or “in-page” view in the Behavior report. The others are the Behavior Flow / User Flow reports.
In-page Analytics shows little orange boxes next to each of your navigation items, indicating what percentage of visitors went to each page from any page. It’s inaccurate and misleading for several reasons. It’s also a little buggy.
If this report doesn’t work for you, you can review the “navigation summary” from your home page. The list of pages and percentage pageviews for each will give you a good sense of what’s working in your menu.
Another view into what people are clicking is in your Behavior > Behavior Flow report. This report is identical to the Audience > Users Flow report. These reports are identical unless you are tracking events. Event tracking is added to the Behavior Flow report data.
In either case, the report will look something like this:
Tip! For more insights into how to use the User Flow report, read top paths through your website.
These reports are all ways to get ideas about which navigation items visitors are using and which one’s they’re not, making optimization possible.
Here are some examples of decisions you might make based on your analysis from these reports.
Warning! Keep in mind that your home page may not be the entry point for many visitors. A search optimized website has many entry points. Many (or even most) visitors won’t start from the home page.
The mega-trend of responsive web design has brought with it mobile navigation best practices and standards. It can be summed up in two words: “hamburger icon.”
It’s an icon made up of three short horizontal lines, representing a menu. But it looks a bit like a sandwich, so people call it the hamburger icon. It appears in the top right of mobile websites and clicking it reveals the navigation menu.
Here are a few examples of mobile navigation examples.
Although this has become a dominant standard, adding the word “menu” may help visitors find this type of “hidden” navigation. The Nielsen Norman Group warns that hidden navigation increases task completion time for visitors.
ProTip! For mobile visitors, make sure that the phone number turns into a button that dials the number when tapped. It’s a simple matter of adding tel: to the href code for the phone number for the mobile version of your site. The code should look something like this:
[Tweet “A good website makes your phone ring. – @crestodina #webdesigntips”]
For more ideas on mobile navigation and buttons, read how to design a button.
We hope these tips gave you new ideas and inspiration for your menus. Ideally, you can implement your ideas quickly in your content management system. A good site is flexible, letting you adjust the labels and order of your menus.
There are exceptions to every rule. Not sure if you should make a change? Ask an expert web strategist to review your Analytics with you.
Make your navigation work well for both human visitors and search engine robots. Your Analytics will thank you for it!
Any other ideas or questions? What about the “home” button? Is it necessary? Do you put your phone number in your header? Add your comment below.