Skip to content

Money Making Website Navigation

Curse of Knowledge Confuses Prospects

The first impression from your website is the navigation which usually is a confusing jumble of messages with no clear choice of how to start. Besides logo and brand name, it’s not uncommon to have a tag line, phone number, menu links, search, login, and social media icons. Before prospects can begin to figure out how a website can help them, the typical dozen or more ideas often causes them to bounce away. Your navigation should only have three things:

  1. Logo and Brand Name
  2. Call To Action (CTA)
  3. Menu Toggle

Best-selling author Donald Miller pioneered clarifying your message so customers will listen. However, how to build the navigation is left to marketers and developers, who are only taught complexity. Whether your navigation background is white or your company colors, less is more for sales conversion, page speed, and search rankings.

Logo and Brand Name

There are two schools of thought on logos and brand names: esoteric logo like a swish with matching brand name that could be anything or a very specific product symbol and keywords. While these concepts are a given, three confusing mistakes are typically made:

  1. Domain name – A clever domain name that doesn’t match the brand name is rarely understood or remembered and usually a warning sign of a potential scam.
  2. Favicon – Often the logo is not used as the icon in tabbed browsing which is inconsistent and diminishes confidence for the prospect.
  3. Logo name – File name for the logo should be named by brand name and not a random name provided by a graphics app, which is confusing for prospects and search engines.

If your logo and brand name are both images, they should be combined for faster page loading and easier use to click any part of the logo or brand name to return to the home page.

Call To Action

As of 2021, over 90% of websites still have no money making button on the navigation menu. After logo and brand name in the upper left, your attention should track to the right uninterrupted to the Call-To-Action (CTA) button:

  • Color – Noticeably different and contrasting from the theme colors.
  • Active – Avoid passive examples like “Learn More” and start your sales process with Shop Now, Book Appointment, or Test Drive.
  • Sales – Whether it’s Office 365 Bookings or Zoho landing page, this is how your sales process starts and not a free download.

Add your CTA on your navigation or header so every page of your website can make money. Remove the constant reminders to visit social media or other distractions.

Menu Toggle

Modern websites are responsive and the horizontal menu collapses to a vertical pulldown toggle on smartphones and tablets. This trend is now the same on all screen sizes so visitors aren’t diverted by multiple menu options when each page is displayed:

  • Limited – Various psychological studies have shown that menu options should be limited to seven options or less. Sub-menus should be avoided as often overlooked and difficult to use. More links on the menu detracts from search ranking authority of each page.
  • Branded – Menu options should be product or service keywords or brand names and not questions or phrases like “Why Choose Us”.
  • Contact – Contact option should be always be the last option in the list and never under other options to show commitment and trust. Social media and blog or newsletter icons should only be on the home and contact pages.
  • Search – Successful websites have lots of content and search should be available in the menu for each page.

For established organizations, About and Legal menu options should be in the footer at the right preceded by copyright, name, address and phone number.

Example Code

This example uses Visual Studio 2019 C# Bootstrap 4 code:

<nav class="navbar navbar-dark fixed-top">

    <div class="d-flex w-100 flex-nowrap">
        <a class="navbar-brand" href="/">
            <img src="/images/matrixforce-white-logo.svg" class="img-fluid" alt="Matrixforce White Logo" />
        </a>

        <span class="ml-auto my-auto"><a href="https://outlook.office365.com/owa/calendar/Matrixforce@matrixforce.com/bookings/" rel="nofollow" target="_blank" type="button" class="btn btn-success mr-3 d-none d-lg-block" role="button">Schedule Consult <span class="fas fa-play"></span></a></span>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>

        <div class="collapse navbar-collapse" id="navbarCollapse">

        <ul class="navbar-nav">
            <li class="nav-item py-md-1">
                <a class="nav-link py-md-4" href="/guardian/">Guardian</a>
            </li>
            <li class="nav-item py-md-1">
                <a class="nav-link py-md-4" href="/orbit/">Orbit</a>
            </li>
            <li class="nav-item py-md-1">
                <a class="nav-link py-md-4" href="/phoenix/">Phoenix</a>
            </li>
            <li class="nav-item py-md-1">
                <a class="nav-link py-md-4" href="/overwatch/">Overwatch</a>
            </li>
            <li class="nav-item py-md-1">
                <a class="nav-link py-md-4" href="/support/">Support</a>
            </li>
            <li class="nav-item py-md-1">
                <a class="nav-link py-md-4" href="/contact/">Contact</a>
            </li>
        </ul>

        <form class="form-inline my-2 my-lg-0 d-flex flex-nowrap ml-3 mr-auto" method="get" action="/home/search/">
            <input class="form-control mr-sm-2" type="search" name="q" placeholder="Search" aria-label="Search">
            <button class="btn btn-primary my-sm-0" type="submit"><i class="fas fa-search"></i></button>
        </form>

        <div class="d-lg-none d-xl-none">
            <a href="https://outlook.office365.com/owa/calendar/Matrixforce@matrixforce.com/bookings/" rel="nofollow" target="_blank" type="button" class="btn btn-success ml-3 my-3" role="button">Schedule Consult <span class="fas fa-play"></span></a>
        </div>

    </div>

</nav>

Resistant Objections

Many marketing gurus and common website templates often provide complexity and glitz as a false sense of sophistication. While these sites may look nice at first glance, they have various problems beyond confusion:

  • Appearance – Simplicity is not boring or plain. Styling with color and shading still provides a unique look in a consistent format.
  • Performance – Bloated code with built-in use of numerous third-party services simply makes websites slow and visitors aggravated.
  • Search Engine Optimization – Dozens of links in your navigation and footer is actually hurting your domain authority for search giving equal rank to most pages on your website.
  • Social Media Sharing – You don’t want to invite people to go play on social media on every page of your website. Those icons should be on your home and contact pages.
  • Usage – On a large screen, you have one click to access menu options just like on a mobile device. Blog or newsletter links should be omitted from navigation and separate from your website.
  • Conversion – Without a money-making navigation button to get started with your product or service, you’re missing a sale on every page of your website.

Storybrand Review

With the continuing pandemic everyone must learn to compete better. If you’re a client or a prospective client that wants their site reviewed, pick a 30-minute timeslot that fits for you from my calendar at no cost or obligation. We can provide recommendations for your web developer and help you to implement Office 365 Bookings for your sales conversion.

Schedule Consult

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: