Top Tips: How to Map Out, Plan & Design The Best Website Navigation Menu
Website Navigation Menu - Don’t Settle For a Menu Bar That Doesn’t Deliver.
Have you ever visited a website that’s a total nightmare to navigate? Nothing seems to be located where you think it should be, and soon, you click away. Yes, me too!
Finding a broken link is frustrating and often means that the opportunity for a sale, or enquiry, was missed. Friends, you don’t want this to be the reality for your site and business!
Creating a website navigation menu (aka navigation bar) seems like a straightforward process - add a collection of links to your horizontal menu, and hey presto.
Unfortunately, it’s not that simple and I’ve learnt the hard way in the past. Don’t worry, below I’ll show you HOW to create a navigation menu bar that will work for you and your business based on a balanced approach which includes: well-considered aims and strategy, optimum user experience, and good design.
Why You Need a Navigation Menu That Works Hard For Your Business
A navigation bar that works for you = a positive viewer’s UX = more conversions.
This should, in turn, equate to people spending more time on your site, lower bounce rates, and more conversions. All good, right?
If people don’t know where your blog, contact page and services pages are, they’ll click away.
Nav Bar things to consider:
It’s a balancing act (of sorts) -the navigation bar is there to help users find their way around your site.
Get strategic - how do you want to guide your audience around your site’s content and for the long term, meet your business goals? More on this is below.
Also, think about the user. You might want them to visit your shop, but they might want to read about you first. Put yourself in their shoes.
Be flexible. Change things around depending on your current business goals and aims. Think about limited special offers, seasonal offerings, a new sign-up, a new product/service etc.
Website navigation bar screenshot Ivy Newport | blog post | Jane Hinchliffe
Strategy - Aims and Mapping Out Your Navigation Menu
Steps to take:
Time for a little strategy - it’ll pay dividends in the long run, keep going…
GlooMaps - an example I’ve created with this free tool that helps you to map out your website nav menu | blog post | Jane Hinchliffe
Next, without knowing your business aims, it’s difficult to know how to arrange content within your site. So, what are your main business goals and aims? For example, to get more clients, make more sales, build authority, build a membership, gain more subscribers, or get more testimonials?
Armed with your aims/goals, what pages or categories does your website include?
Create a Word doc, or spreadsheet, or hand-write them on paper or Post-Its. Want to go digital? Better still, try GlooMaps, a free visual sitemap tool.
With the above info., what pages do you need for your main navigation and sub-menus?
What about your website footer?
Any remaining pages can be linked throughout your site via clickable links eg. blog posts, or ‘less important’ pages.
Now consider, what is your ideal customer’s journey - where do you want to take them? Arrange your content and decide where it all comes together - it’s kind of like a jigsaw.
Need help with copywriting?
Cardinal Rule:
Don’t forget the web designers’ three-click rule. Users’ should never have to click more than 3x to reach their destination, but 2 clicks would be best. Look out for any clumsy, circular paths that need fixing.
Navigation bar example - Sophy Dale | blog post | Jane Hinchliffe
Best Practices and Design Tips For Your Navigation Menu
Now that you’ve completed the strategy element, let’s start working on the back-end of your website.
Your website navigation menu needs to:
Include your website logo for branding purposes, ideally on the far left. Make sure it redirects to your home page. There is no need to include a ‘Home’ page tab.
Ideally, create a fixed (or scrolling) horizontal menu bar.
Check there’s enough white space between your nav bar and the start of your web copy.
Is your navigation menu mobile-friendly considering the increasing use of mobile devices for internet browsing? Hamburger (collapsed) menus are great on mobile devices but not so great on a desktop.
“In the first quarter of 2021, mobile devices (excluding tablets) generated 54.8% of global website traffic, consistently hovering around the 50% mark since the beginning of 2017.”
Is your nav bar consistent, visible and accessible throughout your site?
Consider a ‘bring me to the top’ button at the bottom of the page that the user can click.
Colour - go for contrast. For sub-menus and active links - make sure the link is very obvious. Also, watch out for too many drop-downs - they’re not always mobile-friendly.
Consider a search tab and check that it works.
A maximum number of 6-8 tabs works best otherwise you risk overwhelming the visitor and they don’t know where to click first.
Always include a visually eye-catching CTA button ie. Contact, Work Together etc.
Use capital letters, an easy-to-read font, and a colour that contrasts with the background ie. black font, with an off-white background.
People read from the left to the right. Make your most important menu item begin at the far left and end with the most important tab to the far right.
Keep your nav bar uncluttered. Consider removing social media icons if you feel this distracts visitors from your content.
In an ideal world, all your visitors will start with your home page. This isn’t always the case though. Make sure that a ‘404’ page, helps visitors with their navigation.
Any ‘extra’ items? Don’t forget your footer. (Some sites include breadcrumbs. These can be handy - they tell you how pages are nested within a specific page).
Tab Naming For Your Navigation Bar
I’d recommend:
Straightforward, clear wording - no second guessing.
Use as few words as possible ie. ‘Blog’ rather than ‘Read My Blog’
Don’t forget SEO for your site. Use keywords that make sense.
Don’t forget to link the pages of your site to each other because too many links in the navigation bar can feel overwhelming and off-putting.
Screenshot of example Joe Wicks’ website navigation bar | blog post | Jane Hinchliffe
Analytics
After all that hard work, it’s time to log into your Google Search Console and Google Analytics account and keep an eye on your bounce rates, conversion rates and what’s not being clicked, or conversely, is being clicked a lot.
Don’t be afraid to make small changes, one at a time and then test again. Or, try an A/B test.
As a Squarespace web designer, I also recommend using the built-in Squarespace analytics and don’t forget to integrate with Google Search Console.
The Takeaway
Remember, there is no perfect nav menu but hopefully, my tips and strategies can help leverage your business.
Creating an effective navigation menu is a balance between business goals, user experience, and design aesthetics. It's not about mimicking competitors, but finding what resonates with your audience. There's no 'one-size-fits-all' solution, but with these tips and strategies, you can create a navigation menu that enhances your business.
If you’d like me to review your navigation menu or any other part of your site, please email me, or book a Free Discovery Call and we can chat. I also offer VIP Web Design Days.
*An affiliate link for a product/service that I genuinely believe in and trust.
Thanks 🌟 for being here, and if you’d like more tips, tools, and tricks [without the overwhelm], to help YOU grow your small business, I’d love to have you join my twice-monthly HeartBiz 💌 Letter.
Subscribe here to receive Free downloads.
If you liked this, Pin to Pinterest, or save for later👇🏼.
