Your site’s navigation can be highly effective or highly ineffective, depending on your approach and what your site visitors are looking for. When it comes to those surfing your website on a smartphone, about 67 percent will get frustrated and leave your site if the navigation doesn’t work the way they’d like it to or if it is difficult to locate on the smaller screen.
Navigation Bar Fails
If your goal is to create better direction to the resources on your site and keep visitors there longer, then you’ll want to consider both reasons why your navigation bar might be losing out on conversions as well as the elements a strong nav bar provides. Let’s talk first about four mistakes, and then we’ll talk about four things you need to include in your nav bar.
1. Not Using Heat Maps to Plan Nav Bar
Heat maps are an invaluable tool that can show you which areas on your landing page are clicked most often by visitors. More than likely, these are the key areas your target audience is interested in. When creating your navigation bar, you should factor in the heat maps for your homepage. What are your visitors looking for when they come to your page, and how can you make those resources easier to locate?
2. Difficult to Find Nav Bar
One crucial mistake is to put the navigation in a non-standard place. When people land on your page, about 50 percent of them will immediately locate your navigation bar so they can orient themselves to the features on your site.
People are used to the navigation bar being near the top of the page, either horizontally or vertically. The majority of navigation bars seem to be horizontal, however. If you place your bar down in the middle of the page or set it into a box in the center, it is going to throw your site visitors.
3. An inconsistency of Nav Bar Placement
Another issue with navigation bars turning off visitors before they can be turned into customers is an inconsistent bar that is not present or easy for the site visitor to find. If you place your navigation bar with a blue background on your homepage, it makes sense to do this on each and every page of your website. Not only does it save you design time to use CSS, but the visitor knows what to expect and exactly how to get where they’re going when you embrace consistency.
4. Too Many Choices
About 44 percent of consumers complain about navigation on mobile devices. A big reason for this is likely because the nav bar is difficult to see on mobile devices. Too many choices or drop-down menus that don’t function properly can make navigation hard to use.
Try to limit the number of choices in your navigation bar. For example, if you have dozens of categories, create an archive button and then links to the two categories that get the most traffic rather than dozens of links within your nav bar.
Navigation Bar Do’s
Here are four things you should do with your nav bar to give your audience the best experience.
1. Offer Easy-to-Find Contact Information
When people land on your site and want an easy way to locate your contact information, it is natural for them to glance up to the navigation bar to see if there is a “Contact” option. Knowing who to contact helps with conversions, because the site visitor can ask questions or at least see you are easy to contact.
When a consumer thinks about buying a product, he or she needs to know they can get in touch in case of an issue or question. If the site visitor has to hunt for your contact info, it may make them leery and less likely to purchase from your site.
Take a look at Nitterhouse Masonry as an example of how to include easy-to-find contact information. Their navigation options are near the top of the page, easy to locate, and they include a link to both “Contact” and “Locate a Dealer.” This allows the customer to find the information they need quickly and easily.
2. Help People Find the Way Home Quickly
Some navigation elements are so simple that they can be easy to overlook. For example, does your logo have a link back to your homepage? Because so many sites have utilized this, about 36 percent of site visitors click the company’s logo instinctively to reach the homepage, even over a “Home” button. If you don’t already have your logo linked to go back to your homepage, this is a very simple fix that can avoid frustration for site visitors.
Smith Brothers has been in business for over 150 years. This company understands the basic elements of good navigation and design. Note that you can click on the logo from any page on the site and it takes you right back to the homepage again. This is a feature site visitors look for and will not impact other elements on your site. It is a simple navigation feature worth implementing.
3. Keep Nav Bar Labels Short
Concise words that grab attention in a descriptive way work best within the navigation bar. Not only does this keep the bar from taking up two lines, but it also allows users to quickly skim over which features the site has to offer and make a choice of what they are interested in. A good rule of thumb is to limit each item to 12 characters or less, including spaces and other marks.
4. Navigation Bar Order Matters
Items at the beginning of a list are easier to remember, so put the most important elements first on your list. For a lot of sites, this remains the “Home” feature, because it is a central place where people can gain their bearings. However, if you want your site visitor to look at your products first, then you might do what Ikea did above and list the products as the first option on the menu.
Apple is one of the top companies on the planet, so it makes a good model to study to figure out smart conversion techniques. Note how it places the Mac at the beginning of its navigation list. If it can convert people to a Mac computer, perhaps it can convert them to all Apple products. At the end of the list is “Support,” which lends an air of credibility to the site.
Make These Nav Bar Tweaks to Improve Conversion Rates
The navigation bar is an easy thing to change, tweak and play around with. Try some of these changes and then do A/B testing to see how the changes convert with your site visitors (make sure you avoid these common A/B testing mistakes first). You can even try different colors, textual changes and swapping around the order of the links.