How to Turn Your Website Navigation Into a 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 5. Maybe a 7, tops.
How do I know?
I went through 30 small business websites 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 still be making these navigation mistakes.
3 things your navigation shouldn’t make your visitors do
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.
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?
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:
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.
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.
Here it is: 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?
Exhibit C (slightly improved):
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):
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:
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.
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-examples: 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.
Want to turn your website into a lead-generating machine? Ask me to critique your website!
Originally published at gillandrews.com on March 8, 2018.