How to Turn Your Website Navigation Into an Effective Click Magnet (+ Examples)

On a scale from 0 to 10, how important do you think is website navigation?

I would say, it’s 11, as in “so important it doesn’t fit this scale”.

How good do you think is your website navigation?

I would say, it’s a 7.

I went through 30 websites of my subscribers and reviewed their top navigation bars. 4 of them were fine. The rest? Not so much.

Is your website among these “don’t do it like this” examples? Even if it’s not, you may be still making these navigation mistakes.

3 things your navigation shouldn’t make your visitors do

#1 Read

Fun fact: Website readers won’t read your navigation. Well, at least they don’t want to.

They will skim it for the familiar labels: About, Services, Pricing, etc. And if you hide those under a creative phrase your website visitors may not recognize it.

Here’s an example.

Exhibit A: 

Too wordy, partially mysterious navigation.

Home. Ok, a no-brainer.

Get to know me. You mean “About me”? I had to pause and think for a sec.

Read my columns. Columns… Hm. Newspaper columns? This can’t be it. Ah, you mean “Blog”? Why wouldn’t you say so?

Be supportedSupport yourself… Ok, now you lost me. I have no idea what it means. I think I’m gonna leave.

Exhibit A (improved):

How about we give these labels names your website visitors have seen on a thousand websites before?

Like this:

Wow, so different, yet, the same!

This looks quite different, but the labels lead to the same pages. Only now you can clearly understand what you’ll find behind each link.

Even that mysterious label “English” got sorted out. It was actually an option to switch between languages.

Would you have guessed that “Support yourself” was a page with free resources, and “Be supported” gave an option to book a session?

Which brings us to the thing #2 your navigation shouldn’t make your visitors do:

#2 Guess

Often overlooked fact: Even if you market to businesses, your website visitors are still human beings. They don’t suddenly leave their human-beeingness at home when they come to work.

So even in your navigation, you need to watch for “that one emotion that kills conversions”: Uncertainty.

Unclear navigation label -> “I’m not sure where this link is going to take me” -> Uncertainty -> Not clicking.

Exhibit B:

Looks fine. Till you try to guess what the labels mean.

Little house icon. Well, ok.

Products. I get it.

Login. Ok, but why it’s right after products?

Catalogs. Not something you see every day in the top navigation. But fine, let’s say every second website visitor comes to your website for those mysterious catalogs.

Information. Ehm… what kind of information? I have no idea what awaits me behind this link. And I have no desire to click on it, as I’m not 5, and grown-ups don’t click on buttons they don’t understand.

(On a side note, what’s up with the discriminatory distribution of the icons? Do “Login” and “Information” won some kind of a “navigation label of the month” award? Weird.)

Company. Whose company, mine or yours? Is it like “About”? Maybe not. I don’ know. Not gonna click.

Marketing. Ecommerce. Nice words. Zero meaning. Are these your services? But you say you offer “fittings for tube, pipe and hose”. How do marketing and ecommerce fit into this?

Questions over questions. 🤔

Exhibit B (slightly improved):

It took me some reading to understand what these guys do (sooomebody needs a website review asap) to come up with some changes that would make sense.

Let’s start with:

  • moving the stuff that doesn’t belong here (Login, New account) some place else
  • and naming things in a clearer way.
Better, but still too long and partially not clear.

But I’m still not happy. It’s too long (9 items!), and “Marketing tools” and “Ecommerce solutions” are still a mystery.

Exhibit B (improved):

This may be a better option:

Down from 9 mysterious to 7 unambiguous navigation labels. Not bad

Now the navigation becomes a part of your business message: It communicates that you offer products that your visitors can explore digitally or by ordering a printed catalog.

Others can also sell your product, and when they click on “Sell our products” label, they will learn all about those marketing and ecommerce solutions.

If your visitors have a question they can’t find an answer to on a page, they can either check the FAQs section (the former “Information”) or contact you (something you didn’t offer in your navigation before).

Having less items in the navigation also makes it easier for your website visitors to decide what they want to click.

Which brings us to the thing #3 your navigation shouldn’t make your visitors do:

#3 Have trouble deciding

Say you have 5 clear navigation options to choose from.

Home – About – Services – Blog – Contact

Based on what you need, the decision is easy. A no-brainer.

Now let’s do an exercise.

I’ll show you another example of a navigation, and you’ll try to identify a label you should click if you want to buy books. Note how much time it will take you.

Ready?

Here it is: Quick, where should you click to buy books?

Exhibit C:

Quick: Where should you click to buy books?

That’s one wordy navigation!

The “E-book first draft of chapters 1 to 4 and chapter 7” one breaks my heart. Clearly, the website owner wants to offer their visitors a lot of detailed information.

But here’s the hard truth:

Your website visitors don’t give a damn whether it’s chapter 1 to 4, or 10. Whether it’s an ebook or a video. Whether it’s finished or not.

The only thing your website visitors care about is how clicking that navigation label will help them solve their problem.

I know! Those selfish bastards! #shakesherhead

But regardless of the non-typical labels that are hard to process, there are just too many options.

Tip: Try keeping your navigation not more than 7 labels long – the maximum we can keep in our short-term memory. Every navigation label that comes after that will erase the one your website visitors saw before, and they will forget they even had that option.

Exhibit C (slightly improved):

Let’s change this navigation a bit: Group some stuff together and use fewer words per label.

Also, let’s try the same thing again: Where to click to buy books?

Oh look! A highlighted label that says “Buy Books”!

This is slightly easier on the eye (and brain).

The unfinished ebook got expelled from the navigation forever (we’ll decide whether it deserves a business class seat in the navigation once it’s finished).

If you wonder where the videos went: They are now spread through the test-specific pages, based on a test a certain video helps preparing for.

Tip: A navigation label “Videos” only makes sense if you have people coming to your website thinking “I want to watch a video”. But if they rather think “I need help with problem X” the “Videos” link is not helpful. Remove it and spread your videos through other pages that are dedicated to solving specific issues.

Yet, this navigation could be even better, especially given the fact that the website targets students and teachers – two mutually exclusive groups (you either conduct a test or you take it) – who probably are looking for different kinds of information.

So here’s another idea how to re-structure this:

Exhibit C (improved):

Ah, just six navigation labels, all crystal clear!

Want to buy a book? There is a label for you! With just 6 short labels, you don’t even need to highlight it.

Are you a student looking for help studying for a test? Click “For students”, and it will take you to a page where you can select the kind of test you want to study for.

Are you a teacher who wants to know how to conduct a test? Now you don’t have to dig through the pile of articles aimed for students but have a dedicated page you can start on.

Note: You should use audience-based navigation labels with caution and make sure that you don’t have overlapping categories. Otherwise, you’ll confuse your visitors.

Ok, these are concrete examples. But how could you improve your website navigation?

One common characteristic of every effective website navigation

Paraphrasing Leo Tolstoy, every unfortunate navigation is unfortunate in its own way; effective navigation labels are all alike.

All effective navigation bars have one thing in common:

Every effective navigation is a boring navigation.

And by “boring” I mean they have nothing creative or exciting about them.

For example, there is absolutely nothing fun about this:

(Nicely done, Sarah! Although there may be a better place for your testimonials than a separate page)

…or this:

(Good job, Front Range! Although we need to talk about the position of both your social icons and your website tagline)

But if you visit those websites you won’t even notice their navigation because to match your needs with a suitable navigation label will take less than a second.

Two rules of thumb that will make your navigation effective

Sure, the success of your navigation also depends on how well it is structured.

If you have navigation labels that don’t belong there (hello “Privacy policy”, “Terms and Conditions” and “Why I self publish”) it doesn’t matter how well you name them. They’ll still be wasting that precious spot and adding clutter to your navigation (and website).

I was planing to include a section about planing your navigation in this post, but then “a section” evolved into a 1000-word monster with some Excel screenshots, so we’ll have to postpone this conversation till some other time. (Don’t want to miss it? Subscribe here.)

But let’s say it’s more or less clear to you what pages you’d like to link to from your top navigation. Here are two rules of thumb you can follow to make sure it’s effective.

#1 Use typical navigation labels where you can

You want your website visitors to instantly recognize and understand your navigation labels (the less cognitive load, the better).

Which means the more familiar, the better.

Which means, you should use the typical navigation labels whenever possible:

Examples: About / Services / Blog / Courses / Free resources / Portfolio / My Work / Books / Contact / Book a session / Schedule a call.

Anti-example: Who am I? / Get to know me / Read my blog / How I can help you / Buy my books / Write to me.

#2 Make the rest succinct but clear

Can’t make it a typical navigation label? Make sure it succinct and clear.

  • Use not more than 3 words per navigation label.
  • Lock your creativity in the basement and say in plain words what your visitors will find behind every navigation label.

Examples: Website review / Free course/ Sell our products.

Anti-examples: Improve your website / Support yourself / Content.

Final words of wisdom

Believe it or not, your visitors actually want to stay on your website. To read your blog posts. To learn more about you. To check out your services.

So why not just let them?

Don’t overthink it and tell them clearly what they’ll find behind every navigation label.

‘Nuff said.

Leave a Comment

12 thoughts on “How to Turn Your Website Navigation Into an Effective Click Magnet (+ Examples)”

  1. Wow Gill,
    I feel like someone just dropped a very late Christmas present onto my lap!
    I was reading a post from Jacob McMillan https://jacobmcmillen.com/writer-websites/
    and he linked to your website as a shining example of the correct way to do it.

    I’m so glad I clicked that link! I’ve been tooling around your site for longer than I care to admit. I immediately connected to your writing style and your no-nonsense delivery.

    Thanks for all the useful info and tips! I’m a new freelance writer (previously published creative fiction) and struggling a bit with how to set up my website and how to attract clients with no prior publications to show them.

    So glad I found your site!

    All the best,
    Charlene

    Reply
    • Hi there, Charlene. Thank you so much for your kind words and for taking the time to leave a comment 🙂 I’m glad to hear that you find the tips I’ve shared on my website useful.

      Wishing you all the best with your new freelance business and website 🤞

      Reply
  2. Hey Gill,
    Just discovered your site and I’m really appreciating your clear and pragmatic advice. Can you say a little bit about the relationship of site navigation titles to SEO? Maybe I’m getting confused between different needs of main site page titles & navigation links vs blog article titles here, but I feel ‘torn’ between going ‘plain jane’/simple & direct with my main menu titles ‘or’ giving them keyword-focused & ‘brand-promise centric’ titles. What’s your take on that?

    Reply
    • Hey Dylan. Happy to hear you found my tips useful.

      Re your question: I’m not an SEO expert, but my take on this is that you should go with what makes it easier for your visitors to understand your website and discover more content.

      The links / keywords in navigation and footer have less value than links / keywords within a piece of text surrounded by related terms (for ex., service page or blog post). Also, SEO 2018 means user experience is a factor when it comes to rankings. Which means if people are leaving your website too fast (because they didn’t understand your navigation, or missed a page they could have used, or were thrown off by keyword stuffing) this will negatively influence your rankings.

      Plus, you don’t want to just get them on your website. You want them to also stay longer and convert. Which will be less likely with a keyword-stuffed navigation.

      So, in this particular case: Clear navigation with typical labels. The shorter, clearer and more typical, the better.

      Generally speaking: Optimize for UX and searcher’s intent.

      Hope this helps.

      Reply
      • Hi Dylan,

        Remember that the wording on your navigation does not have to be the same as the page title of the page (or post) it links to.

        On the page itself, you room for an expansive title, potentially with keywords. In the navigation, you don’t.

        So I’m with Gill. Go for short, simple and obvious. 🙂

        (Gill, another great article. A sleek-looking site with confusing navigation is like a luxury sports car with a burned out engine. Useless!)

        Reply
  3. Hey Gill!

    Your navigation bar is super important. It is part of the UX (user-experience) and this plays a huge part of SEO, as well.

    I like your tips here. You have to put yourself in the shoes of your ideal visitor. And you have to be precise to what you want them to do. Be super clear about the goals of your menu items.

    I like the way you did this with examples!

    Thank you for sharing this!

    Best regards! 😀

    Reply
  4. Hey, my website was named as one of the GOOD ones! Yay! frfamilytherapy.com

    I know, I know, I need to move my social media icons. I read your article! I’m planning a website revamp here pretty soon, just getting a few things together first. Your insight has been so helpful as I plan the changes. Thanks!

    Reply
    • Hey Shauna 🙂 Congratulations! I hope it was a nice surprise.

      But to clarify: Your *website navigation* was named among the good ones, not the whole website. There are quite some things I could “complain” about on your website in general 😛

      Happy to hear you find my advice helpful. Wishing you the best with the website changes!

      Reply
How to win more clients through your website: Insider tips in your inbox every Friday.
164 Shares
Tweet
Share
Pin
Share