Michelle Burson • Jul 2, 2019
5 MIN READ
A man walks into Navigation Bar to have a drink and get directions to a hotel. He has no cell phone, which means no access to a navigation system. The bartender says, "We don't have the directions to that hotel. But we do have a phone number for them."
"How the does that do me any good? I don't have a phone. What good is Navigation Bar if it can't help me find what I'm looking for?"
The bartender shrugs. "Sorry, buddy."
In today's digital world, pretty much everyone owns a cell phone (96% of Americans to be exact!). So a lot of people won't find themselves in the same situation as the no-phone, old-car guy. And a lot of them won't be walking into a bar for help with navigation either. But the joke - no matter how corny it is - shows the importance of website navigation bars. Something as little as a menu bar can make all the difference in a potential customer staying on your site or moving on. In fact, 94% of consumers prefer a website that's easy to navigate.
So what does that mean for small business websites? That customers who are looking for a product or service want to be able to find it quick, fast, and in a hurry. That's what ease of navigation means, after all - people being able to quickly and efficiently find what they're looking for on a page.
THE ULTIMATE GUIDE TO A KILLER NAV BAR DESIGN
Your nav bar should help users quickly navigate your page without needless clicks. It should lead them to the most essential information on your website. Looking to improve your site navigation for your small business? Read on.
WHAT SHOULD BE IN A NAVIGATION BAR?
A useful navigation bar should include essential pages such as About, Contact Us, Products and/or Services, Resources, and any other page you want to direct your visitors to. Below are the different types of menu bars you can use on your website.
A typical hamburger menu design consists of three horizontal stacked lines that look like a hamburger. This menu is used to save space and typically opens up into a side menu or navigation drawer. But hamburger menus really aren't the best choice for a nav bar. Effective website navigation tells visitors where they are and show them where else they can go on your website. Hamburger menus don't do this well because the menu is not visible on the screen, only the button to display the list is. Let's look at an example of how the hamburger menu hurt the conversions of a leading UK InsureTech company. The company wanted to improve the efficiency and effectiveness of a mobile menu used on its insurance website.
They tested the existing hamburger menu against alternative navigation designs such as the anchored bottom menu, which is similar to sticky navigation, as it follows the user when they scroll. Within 24 hours, the company saw a significant reduction in customer service contacts and friction in the customer journey when using the bottom anchored menu
A dropdown menu appears when the user moves the mouse over it and displays options for them to click. Mega menus are dropdown menus that typically display multiple columns of content. Mega menus should only be used if your site has lots of pages and content. In these cases, a mega menu makes it easier for users to find what they're looking for on a large site. For example, this would work well on an e-commerce site that has large category lists. Mega menus can also work well for businesses that have lots of services such as tech or SaaS companies.
Sticky navigation keeps the nav menu in a fixed place, which helps your visitors navigate your site from anywhere on the page. With sticky navigation, users don't have to scroll all the way up to the top to access the menu. There's actually some science behind using a sticky navigation menu. Studies have shown that people scroll further down a page if it's designed to encourage scrolling. Sticky navigation does that because users can scroll all they want without having to worry about scrolling back up to find another page. The link is right in front of them.
NAVIGATION BAR BEST PRACTICES
Now that you know about the most common types of nav bars, it's time to get familiar with the best ways to use them. Below are the best practices for designing an effective navigation bar for your small business website.
1. BE SPECIFIC
Don't use generic terms like "What We Do," "Products," Services," or "Solutions" in your nav bar. Not only will being more specific about your offerings help conversions, but it also helps with SEO because you're using keywords that are unique to your business. So if your company is an auto shop, include something like "Auto Repair Services." And if you really want to boost your SEO, you can include your geographical location (ex: Auto Repair Services in Louisville, KY).
2. KEEP IT SHORT AND SIMPLE
Your nav menu shouldn't be long and complicated. It should only list your most important pages. After all, the short-term memory can only hold seven items at a time. Website visitors should be able to remember all their navigation options without having to reread the menu. Plus, users can focus easier when there are fewer distractions on a page.
Let's look at another business as an example. Yuppichief wanted to increase the rate of Wedding Registry signups on their landing page. They tested two variations against each other. One variation had the nav menu, while the other one didn't. The variation without the nav bar saw a 100% increase in conversions. While it's not advised to remove your entire nav bar on your main pages and homepage, it may be a good idea to do it on your landing page as it can help potential customers focus on the main reason they landed on the page in the first place. Keeping things simple can make a huge difference.
3. TEST AWAY
When it comes to deciding what works best in your navigation bar, you should always test different variations. Test changes you make to things like:
Knowing why an effective nav bar is so important for your SMB is essential to your business success and customer satisfaction. If you're struggling with designing a nav bar, MarComm is here to help!