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

Last updated: February 9, 2020

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: 

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 supported… Support 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:

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:

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.

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:

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:

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.

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?

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.

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

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.

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.