Tips for building a better navigation bar
Tips for building a better navigation bar
Introducing: Product Solutions, the new name for my newsletter.
Welcome to Product Solutions. This publication is aimed at product managers who are early in their career and starting to find their way. It’s focused on practical tips: tools and testing are a couple of the topics we’ll be covering.
Also: if you have a product problem, get in touch via substack@benbarden.com. I’ll happily suggest solutions in future editions.
In this week’s edition, I’ll be covering a few tips for building a better navigation bar.
Building a better navigation bar
The three-click rule is a usability heuristic that suggests that users should be able to find what they are looking for on a website within three clicks, or three taps on a touchscreen.
The origin of this rule does not appear to be backed up by data, so it’s arguable whether it is actually valid.
Blindly following the three-click rule could lead to surfacing huge numbers of links at the first or second level, potentially overwhelming users.
Aside from the three-click rule, here are a few other tips to consider when building your navigation.
Use clear, concise and specific link text
Don’t disguise navigation links behind jargon, internal product names, or vague text that doesn’t clarify where the links go.
Think of how each link will be distinct from other links – make sure each one is unique.
For products that are indexed by Google, beware of suggestions to include keywords in the links – as these can confuse visitors. Keep it simple.
Use mega menus if you have lots of links
If you have a large number of links, a mega menu can be a good way to display a lot of links together. They can improve the usability of otherwise long menus, while avoiding the pitfalls of hierarchical menus.
Optimise long menus by sorting them alphabetically
If a long list is unavoidable, try displaying the links alphabetically – for example in a list of products or countries. This will help users to quickly scan the list and find what they need.
Make sure hover menus work on touch screen devices
If your navigation includes a hover menu, this won’t work on touch screen devices. You could change it so it can be tapped on a touch screen. But you’ll also need to make sure it fits on touch screen devices – mega menus may need some adaptation.
In summary
Overall, it’s worth looking beyond the long-standing three-click rule – there are many other things to take into account beyond this rule.
Supporting this publication
Thanks for reading this post. Every Monday I publish a new post on product management. There are plenty of older posts to check out in the archives.
If you find the posts useful, I’d really appreciate it if you click the “like” button, and subscribe if you’re not already done so. You can also follow me on Threads - my username is @benbarden.