How Creating a Lean Navbar Can Help Increase Your Website Conversions

If you walk into a mall for the first time, chances are you probably won't know where you’re going and will need to look at a directory.

That directory is what helps you navigate through the building. Without it, or with a poorly made one, you’d probably get lost.

Your website’s navigation acts the same as a directory. Your users need it to get from point A to B on your site.

 If its outline is too confusing and users can’t figure out where to go, they may struggle to find some of the most important pages of your website.

To help create the most efficient navigation for conversion and better direct users where to go, here are 5 characteristics you can implement right now..

1. Streamline the Content

The purpose of the navigation bar is to provide users with clear, concise choices of where they can visit. With that in mind, the labeling you choose for your navbar should not be unnecessarily long or overwhelming.

Keep the amount of items on the navigation around four to seven. Any more will look crowded and dilute the chances of users landing on the pages you want them on.

A higher amount also tends to cause layout issues on different viewport sizes, causing your developers to create unnecessary workarounds for odd size screens.  

The content itself should also be simplified to something that’s clear and concise. You don’t want to confuse your users with lengthy, complex labels that they may not understand.

MindBody’s does an excellent job implementing this in their navigation seen below.

Rather than saying “Take a Tour” or “View Our Pricing”, they cut out unnecessary adjectives and use understandable labels so users will know exactly where they are going and what they will get before going there. This also makes the labels all around easier and quicker to digest, so they don’t need to think twice about what to do.

2. Organize in Terms of Hierarchy

As nice as alphabetical order might seem, this is not when you should use it.

You also can’t put the “Buy Now” button first just because that’s where you want users to go. You need to properly organize your navigation items so their order flows best with user behavior.

Traditionally, it's best to put the ‘home’ item first.

If you choose to remove it and instead use the logo as a way to link back home, then try putting an ‘about’ item first, followed by some links related to the product pages.

Any consultation, login, or signup buttons are ordered last, but should also be the most eye-catching since their traditionally the most important pages and where you want the user to eventually end up.

Github does an excellent job creating a nicely organized navigation with buttons linking to where users can sign up or sign in.

If you have a lengthier navigation, you can also try putting your actionable items in a much smaller navbar above the main nav. This will allow you to include them without worrying about overcrowding your main navbar. 

3. Put it in an Obvious Area

When users arrive on your site, they expect the navbar to either be horizontally aligned to the top of the window, or vertically aligned to the left or right. There shouldn't be anything that takes priority over your navigation so that it needs to be moved somewhere else.

Keep its location standard and consistent throughout your website. That way users know exactly where to go to find what they need next. This will automatically keep bounce rates low and facilitate proper user flow through your website.

The majority of websites keep their navigation on the top of the page, but maybe you want to be a bit more daring with yours. If so, take a look at Sprint’s website who chose to go with a left justified navigation with icons to draw attention to it.

4. Avoid Drop-Down Menus

I get it. You have a lot of pages on your website and you’d like people to get through as many of them as possible, but throwing them into a huge drop-down menu isn't the answer.

There are a couple issues drop-down menus create.

First off, if your drop-down only activates on hover, people on tablet and mobile devices will not be able to navigate them unless you create some type of fallback. It’s also been shown that users consider drop-down menus just plain annoying since they demand more time from users to think about where they want to go.

Of course, if you are a ecommerce website, a drop-down menu is your best friend. So if you fit into the group of people who desperately need one, Sony is a prime example of the best way to layout a drop-down menu.

Sony breaks down their products into different categories so users can immediately search by product type rather than visiting the online store then having to pick what product they may want. They even insert images of the products into the navigation so you get an idea of where that menu item links to before even looking at the words below it.

5. Make it Responsive

Now that you know how to layout and design your navigation, it’s time to start thinking about how it will work responsively.

Obviously, your horizontal navbar won’t work on a tablet or mobile phone. Instead you need to condense it. Fortunately, there are several effective ways you can layout your mobile menu depending on how your desktop menu functions.

Most everyone uses the ‘hamburger’ icon which is placed in a similar area where the desktop navigation was. When clicked, your menus functionality may vary depending on what is best for your site. If you have a one-level navigation, you could just do a singular drop down menu similar to what Microsoft has (minus the multi-level nav they have).

If you aren't a fan of that user interface, you could also do a full screen slide/fade-in navigation like Digital Telepathy has.

If you’re someone who has a multi-level navigation, try checking out one of our clients, Accelerence, who have a slide-in nav with everything ordered the same as their desktop nav.

This method can also be used for websites with one-level navigation if you prefer, but this layout’s usability is the most optimal out of the three for dropdown navigations.

If you aren’t sure which method works best for you, remember, A/B testing is your best friend and can be utilized here to figure out what option works best for your users.