One of the first things that people see when they visit your website is your navigation bar.
It is one of the most important aspects of user experience and so it should be prioritised when you are designing your website.
A good quality nav bar will ensure that users spend longer on your website and that they find exactly what they are looking for. This will help to improve your bounce rates as well as conversions.
Think of it as the map that a user can come back to whenever they want to visit somewhere else on your site – that way they will never get lost!
How important is the nav bar to SEO?
Last year, Google announced that its Page Experience update would go live in 2021.
The Page Experience update means that Google will rank your website based on how users interact with it and so will end up penalising sites where it thinks users have a poor experience.
Just with on-page SEO, you should ensure that you are designing your navigation to be user-centric, rather than Google-friendly, although they are often the same thing.
Without an effective nav bar, visitors to your site will not be able to buy products, sign up to emails, find out more information or find your contact details.
A frustrating experience will simply lose the user.
What are the 4 key elements for the perfect nav bar?
We have put together some top tips to help you create the perfect nav bar for your site:
1. Keep your nav bar short and sweet
A short nav bar is easier for people to read through and find the options they want.
If there are too many options to read through, they may feel overwhelmed and leave your site.
A good rule is to keep the top nav bar to between three and six options.
This will also make it easier for search engines to understand what your site is all about and index it accordingly.
You should also think about creating categories with drop down menus. This is an easy way of putting more important information in your nav without it looking messy.
For example, a clothes shop might have a “Brands” item with the brands listed in a drop down menu underneath.
2. Use simple wording on your nav bar
Make sure the text on your navigation is kept clear and concise.
Space is at a premium here, so in order to get all your most important information featured, you will need to keep it short.
There is not much room for creativity here, so make sure you call a spade a spade.
Keep to the standard options that are used on most sites, eg. ‘Contact us’, ‘About us’, etc. Familiarity is great for user experience.
You should also consider key words and search queries when it comes to wording.
If a lot of your customers are looking for “vintage guitars” then make sure you use that phrase, rather than something similar like “old guitars” or “second hand guitars”.
Google’s keyword planner can help you to find the most popular search terms so use this to help inform your decisions.
3. Consider customer queries
What are your customers looking for? If you are a beauty salon, it might be which services you offer.
If you are a mechanic, it might be MOTs. Make sure that the answers to these queries can easily be found from your navigation.
From start to finish your navigation bar should be designed with your target customer in mind.
4. Design your nav bar to be clear and concise
As well as being functional, your nav bar is a crucial element of your overall website design so it is essential that it fits in with the rest of your content.
The main thing to think about when designing your nav is that it is clear and easy to read.
Avoid clashing colours and hard-to-read fonts. You should also ensure that the colours use fit your brand identity so that your site is easily recognisable.
Along with the rest of your website, you should ensure that your nav bar is accessible so that you do not exclude anyone from use of your site.
You should consider how screen readers access your site, the size of font and ensure that your nav is keyboard friendly. You can find out more about web accessibility here.
Keeping to between three and six main options on your nav bar as mentioned above will keep your website looking smart and sleek.
You might want to make the most important element of your nav bar a different colour, bold, or a button in order to make it stand out.
This could be ‘Book now’, ‘Contact us’ or something else, depending on what your main call to action (CTA) is.
And speaking of a CTA button, this should be positioned on the right-hand side of your nav.
People read from left to right and so they naturally expect the action to come at the end, just as a home link should be at the start.
Where should my nav bar be positioned?
There are a number of positions where navigation bars can sit on your site and there is no right answer to this question, as each position has different advantages and can work for different sites.
A horizontal navigation bar at the top of your site is the most common style. This means that it will be really intuitive for your web visitors to use.
You could also place your nav bar horizontally at the bottom of the page in order not to draw attention away from the main content of the page, vertical down the left or right side of the page in order to fit in more options, or a hamburger menu which is perfect for mobile navigation where space is limited.
You can also choose to make your navigation sticky. This is where the nav “sticks” to the top of the page, even when you scroll down, allowing web visitors to use it no matter where they are on the page.
This is ideal if you have long pages with a lot of content on them as it is convenient for users.
If you have an eCommerce site, you may also wish to use a sticky nav so that you can keep reminding users of your call to action (CTA).
