Free: Assessment Does your website build trust with buyers and bring in revenue?

Score My Website
Close

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.
Score My Website
Web Design  |   Marketing Strategy

How Creating a Lean Navbar Can Help Increase Your Website Conversions

Christine Austin

By Christine Austin

May 19, 2015

How Creating a Lean Navbar Can Help Increase Your Website Conversions

navigation-background.jpg

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.

mindbody-streamline-the-content.png

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.

github-hiearchy.png

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.

sprint-obvious-area.png

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-drop-down.png

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).

microsoft-nav.png

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.

digital-telepathy.png

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.

accelerence-nav.png

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.

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.

Related Articles

Can I Use AI Tools To Build My New Website?

September 18, 2023
Vin Gaeta Vin Gaeta

What Is a 'Learning Center' and Why Does My Website Need One?

September 14, 2023
John Becker John Becker

How Much Does a Website Redesign Cost in 2023?

July 20, 2023
Vin Gaeta Vin Gaeta

Do You Need a New Website? Maybe Not

July 19, 2023
Vin Gaeta Vin Gaeta

14 Award-Winning Website Designs (& What They Did Right)

July 17, 2023
Christine Austin Christine Austin

What a New Self-Selection Tool for Your Website Will Cost

July 13, 2023
John Becker John Becker

9 Self-Selection Tools to Inspire Your Business Website

July 10, 2023
John Becker John Becker

Website Conversions in 2023 — STOP, START, KEEP

January 25, 2023
Vin Gaeta Vin Gaeta

8 of the Best Business Website Designs to Inspire You in 2023

November 17, 2022
Christine Austin Christine Austin

What Does a Great Inbound Marketing Website Look Like in 2023?

November 14, 2022
Christine Austin Christine Austin

Your 2023 Website Strategy Must Include These 6 Things

November 4, 2022
Mary Brown Mary Brown

4 Ways To Recession-proof Your Website In 2023

November 1, 2022
Marcus Sheridan Marcus Sheridan

Website Mastery: A better redesign process for your business website

November 1, 2022
John Becker John Becker

8 Best Content Management Systems for Digital Marketing in 2023

October 1, 2022
Christine Austin Christine Austin

12 Essential Tips for Improving Your Web Design in 2023

September 13, 2022
Christine Austin Christine Austin

23 of the Best Examples of Business Blog Design

May 30, 2022
Christine Austin Christine Austin

5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)

May 16, 2022
John Becker John Becker

Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful

February 22, 2022
Joe Rinaldi Joe Rinaldi

11 Pricing Page Examples for Business Websites (Updated for 2023)

January 18, 2022
Christine Austin Christine Austin

8 Crucial Elements Every Homepage Design Should Have

January 15, 2022
Christine Austin Christine Austin

What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By

December 18, 2021
Christine Austin Christine Austin

Google Shares New Tools to Audit Website User Experience

August 12, 2021
Christine Austin Christine Austin

New HubSpot CMS Hub Starter Tier Released for Growing Businesses

August 6, 2021
Christine Austin Christine Austin

Too many internal links in content can confuse Google about site structure

July 9, 2021
Christine Austin Christine Austin

Google July 2021 core update rolling out over next 2 weeks

July 2, 2021
Christine Austin Christine Austin