Firstly, What is website navigation?
Website navigation are the links within your website that connect your users to your pages. The primary purpose of website navigation is to help users easily find things on your site. Search engines use your website navigation to discover and index new pages. These links help search engines to understand the content and context of the destination page, as well as the relationships between pages.
Done the right way, website navigation can greatly improve your customer's website experience and is great for your SEO performance.
How do you ensure your website navigation is as optimised as it can be? Take a look at the following tips...
1. Ensure it is clear and visible
The navigation of your site should be clear and visible on ALL pages and in the same position. It's the chief way for people to browse your site and get to the page they want to, and we want them to be able to do that in the least number of clicks possible.
As you can see from the images below, the navigation is one of the first thing your user looks at, so make it count, and make it clear!
2. Avoid jargon & fluffy language
Ensure you're using words that your customer would use and avoid any kind of industry jargon or acronyms. With so much competition out there, it's tempting to try and get creative with our copywriting but this is often at the expense of clarity.
You should also ensure that you're not using "marketing language" or trying to add some extra flare / bells & whistles. A user is much likely to understand "Baby Clothes" than if you were to put "Our Dreamy Snooze Collection" or similar.
3. Don't pack it full of links
Many websites have too many links in the header navigation bar. In fact, many of the templates provided by Wix, Squarespace etc make it too easy for a "more" link to suddenly appear; Meaning the user even has to click to see the full scale of links available. This isn't ideal considering people are busy and often scanning, so if your important pages are hidden beneath a "more" link - the likelihood is they won't be seen.
In the examples below, the first one hides the Contact page beneath the more link, and the second hides the About page. Important pages not visible.
When deciding on your website navigation and what you should and shouldn't include across the top, think about what you want people to do on your site, but also consider what visitors might want. For instance, you might want your visitors to buy a product or service, but your visitors might want to know more about your company or learn about your story.
If your navigation menu starts to look a little cluttered, consider organising it better.
4. Don't use the burger menu on desktop
It's a pet hate of mine, but there has been a disappointing trend recently whereby businesses are using the burger menu to hide the main navigation on desktop sites. I could write an entire blog post about this, but for now I'll just summarise why I don't agree with this approach.
Firstly, it's simply not needed. The space is there for the links to be visible. The reason it was first introduced was to hide navigational items and make more space on the mobile site. Somehow it has crept onto the desktop, but I see little point in this when the space on desktop is readily available for the links to be displayed.
Secondly, demoting your main navigation makes it harder for people to discover your offerings on your site. You're making them click twice when they really needn't have to. When navigation is hidden, users are less likely to navigate.
Thirdly, you are assuming that your desktop users are the same as your mobile users and will therefore understand what the burger menu symbolises. But this isn't the case. In fact desktop users are more likely to be older and potentially less web-savvy, so they may not even understand the symbol and so are less likely to click on it!
Finally, it reduces "discoverability". Without seeing what's on offer on a website immediately there in front of you, it's difficult for you to understand the breadth of what's on offer on the website. The navigation tells you so much about a site. For example if you land on a service website you are likely to see "Home, About, Services, Case Studies, Contact Me, Blog". This immediately tells you so much about what you can discover on the site. If this is all hidden behind a burger menu, then unless you click there straight away (unlikely) you don't get that same depth of understanding within those crucial first 15 seconds landing on a site.
5. Don't reinvent the wheel
The reasons common conventions work - like the position of a light switch - is because they WORK. People become used to certain conventions and so expect them to behave in a way they are used to. Most people are used to the horizontal navigation menu across the top, so unless you have a good reason to change this - a real reason that makes your navigation work BETTER than this with YOUR users, then keep the conventions how they are.
6. Use the logo to link to home
It's not technically a part of the navigational links, but it's important to remember that it's become universally known that the logo links back to the homepage. People expect to be able to click here and always find a way home (especially important on the mobile), so ensure your logo is part of your website's navigational journey.
7. Ensure it's responsive
Now this is where the burger menu comes in. Responsive design is considered to be one of the best ways to ensure your website works on any device and part of this trend is the use of a compact style that's become known as the "burger menu". It's that icon we've come to recognise, made up of three slightly separated horizontal lines, and is often seen on the mobile.
This has become a trusted way of condensing your navigation for the mobile as it means the links are hidden off screen and only slide into view when tapping on the burger icon. It's your job to ensure that your hierarchy of links works in that little slide-on menu, and you've optimised it to make sense for your customer.
8. Style it right
It's always a good experience if you can see where you are within a website. Ensure that each of your navigational links has a clear "hover state" (this means the colour changes slightly as you roll your mouse over the link) and a "selected state" (this means that once your user has clicked on a page, the styling of that link changes to indicate where you are - leaving no room for confusion). Here are some examples:
If you found this useful please do share with other small businesses. You can use the graphics below if you'd like: