Today we will talk about websites navigation and its evolution over the past years. We are sure that there is no need to elaborate why website navigation has a crucial significance for your site conversion.
It’s obvious. If your navigation is poor, site visitors will never find your content no matter how awesome it is.
Site navigation is one of those little things that make a big difference. And you will find the answers what should a user-friendly navigation look like today.
Nobody will argue that the development of technology dictates its own rules and standards, following which you can squeeze the most out of your web page.
Nowadays everything spins around the best possible user experience no matter what gadget they are using to surf the Internet.
With super-fast current lifestyle, a lot of users prefer browsing their favorite websites on the go, so their navigation should be thought out to minor details and ready to face this challenge. Otherwise, it will cause site abandonment, that’s all.
Here we can make some in-between conclusions:
- The structure and labels of your navigation are important!
- Navigation affects your traffic. The higher your rank is, the more traffic you get from search.
- Navigation affects your conversions. The easier it is to use your site, the higher percentage of visitors convert into leads and customers.
But let’s finally start tracking the evolution of websites navigation.
1. Firstly, let’s compare the navigation from the past and the navigation that replaces it today.
What standard labels come to your mind when you think about main navigation menu bar?
“What we do”, “Products”, “Services”, “Solutions”, etc. Can you say that these words and phrases really tell what you do, about your products, services, and solutions? Of course not. The labels are not descriptive, read: useless for SEO.
Today smart online entrepreneurs strive to use descriptive navigation. Such kind of navigation utilizes key phrases in order to boost SEO and conversions.
Think about that. Your navigation bar is a key place, indicating relevance to search engines. Your navigation bar appears on every page and its descriptive labels make Google understand that your website is about the topic.
Besides, descriptive labels are loved not only by Google but also by your visitors. When your descriptive navigation lists your main products or services, the user understands almost immediately that he/she is in the right place.
Start telling people and search engines about what you actually do right from the main navigation bar. Here is an example illustrated by one of TemplateMonster’s PrestaShop themes:
You may use Google Keyword Tool to find top-of-mind phrases for visitors and popular key phrases for your labels.
Labels like “products” or “services” don’t help your rankings because nobody is searching for them. You see, everything is simple. The above navigation labels are outdated. So, you’d better forget about them.
2. Format-based navigation can’t be called descriptive either.
Do you include the words “videos”, “photos”, and so on? The problem is that they tell the visitors the format of your content, but not the topic of it.
People don’t browse websites for videos or photos. They are searching for answers and information. Here is a helpful link on how to avoid the format-based navigation.
3. Modern MegaMenu instead of the outdated drop down menu. We know that drop down menus are still popular, however, it’s not a brilliant idea to use it on your website.
Drop down menus can be difficult for search engines to crawl. Everything depends on the code behind it. Sometimes, a drop down menu can lead to the unexpected problems.
Drop down menus can be annoying for the visitors. Supposing you have already scanned the web page and decided to click the menu label, but, all of a sudden, the menu item gives you more options on mouse over. Omg…
What’s even worse, drop downs encourage visitors to skip the important pages. Are you still using dropdown menu? Just have a look at your analytics account and you’ll see the problem.
As to the mega drop down, it performs quite well. MegaMenu offers a lot of options, making the game worth the candles.
MegaMenu is a great option for big sites with lots of pages and a diverse set of products or services. What’s more, MegaMenu dramatically increases the number of links from your home page.
The outdated websites had/have hundreds of links on the home page. Limiting their number is good for the same reasons as the descriptive links.
You home page gets “credibility” with search engines because more sites link to your home page than to your interior pages.
If your homepage has tons of links, this dilutes the authority passed from it down to your interior pages accordingly. This considerably reduces the probability that your interior pages will rank.
In a word, the more concise your navigation is, the more authority will flow to each interior page, making it more likely to rank.
Here is a great tool that counts the number of links on any page and estimates the increase in authority that would be passed if you reduce the number of links.
But what number of items in your navigation is optimal for your visitors?
Our short-term memory is able to hold only seven items (+/- 2). That is, the more items there are in your navigation, the more difficult the information is to remember and process for the users. If you have too many items visitor’s eyes may just scan past the important ones.
Unfortunately, sometimes it’s impossible to use not more than 7 items. In such cases, it is recommended to break them into groups (categories).
Avoid long lists. Break out your navigation into groups of five to seven items. Remember, each time you remove a menu item, as well as any other element, from a page, everything left becomes more visually prominent and is more likely to be noticed and considered.
5. Attention to the menu items order.
Did you pay attention to this before? Now it’s the right time to make necessary updates.
Keep in mind that the items at the beginning and at the end are the most effective. Here the attention and retention are the highest. The phenomenon has the name: the serial position effect.
Items at the beginning and at the end of a list are more easily remembered.
Put the most popular, important items at the beginning of the navigation. If you are not sure what should come first, peep into your analytics.
6. Using technology to improve your navigation.
Currently, the navigation design is just the beginning. Wait a few weeks and evaluate your navigation with the help of analytical tools.
Based on analytical data you might make some decisions like these:
- Remove items that rarely get clicked if they aren’t critical.
- Rename or relabel items that rarely get clicked if they are important.
- Move items that often get clicked to the beginning.
7. Navigation optimized for mobile browsing.
The advance of responsive design has brought this icon made up of three short horizontal lines, looking a bit similar to a sandwich, into general use.
Although it’s a standard icon, adding the word “menu” may help visitors find this type of “hidden” navigation.
We have just reviewed the evolution of website menu with tips, best practices, and examples. It can hardly be called a guide as every rule has exceptions. In any case, the aim of the article is to make you cast a fresh glance on your website navigation menu. Maybe it needs some tweaks that will increase your traffic and improve your conversion.
The main idea of the blog post is that your up-to-date navigation menu should work well both for human and search engines.
And don’t forget about the portable gadget users! Your bank account will thank you for that.
Have any questions, additions, suggestions? They are welcome at the comment section.
Helga Moreno is the author of this article and many other blog posts on MonsterPost blog.
24 Amazing Web Design Blogs You Should Follow This Month!
A while ago, I published this collection of great web development blogs for developers. Since then, some web designers have approached us and suggested further blogs, specifically, web design blogs worth following in 2016. So this time, it’s all about web design. We’ve collected some of the best web design blogs around for you. Now…
Designing a language switch: Examples and best practices
Building a global SaaS product isn’t easy. You have to localize your product, translate your website, and make sure that everything’s still up and running. And there might be a major interface problem, which looks like a tiny thing at first but is actually something to think about a little longer. What I’m talking about…
6 mistakes to avoid when collecting design feedback
There are several lists on web design mistakes out there. Most of them focus on the web design itself but forget about other components such as how a good design becomes a great design through the right way of collecting feedback. There’s always a feedback stage in the web design process which requires intensive interaction…
Hands-on experience with Hugo as a static site generator
A while ago – in April 2015 – we launched bugtrackers.io as a small side project. Since then, the site has grown from a three-pager to a website with dozens of interviews. The increasing number of pages & therefore line of code made us look for ways to improve our internal workflow. We also ended…
Web browsers got some super powers over the last few years. The increasing speed of the browser engines has pushed browsers from being simple website viewers to a level where they are platforms executing our beloved applications like Gmail and Facebook day in day out. Of course, this opened up the door for developers to…
11 productivity boosts for remote web development teams
This article is brought to you by Usersnap – a visual feedback & bug tracking tool, used by software companies like Facebook, Google, and Microsoft. Working in a remote web development team can be a lot of fun. Besides the fact of working in your pajamas in your home office, there are some greater benefits for employees and enterprises as well. On…
Building a software product?
Solve your customers' pain and create a great product.
Get feedback easily within the browser.
Fix bugs in minutes with screenshot & metadata.
Trusted by 1000+ customers worldwide.