It seems strange to be talking about something as basic as “navigation” 11 years into the web era. And yet, if you’re a web designer, chances are you’ve made some mistakes in this fundamental area. So let’s go back to basics.
On a website, “navigation” doesn’t mean just links. Navigation is, like most elements of a website, about communicating with the user. Good navigation tells a story, and good stories have a beginning, middle, and end.
Navigation also has three parts, which are used to communicate to the user about their past, present, and future. Any good global navigation scheme should, at a glance, answer the top three questions every user has at the back of their mind on any page:
Where am I? (Present)
Where can I go? (Future)
Where have I been? (Past)
Here’s a test: Go to any random page on the internet. A deep page, not a home page. Then see if you can answer all three of those questions without looking at the URL or mousing over links to see where they go. See if you can tell your present, future, and past purely through visuals. Even in our brave new Web 2.0 world, most sites fail.
Why is this important?
Studies show one incontrovertible fact: If your website is about selling things or convincing a user to come back, navigation is a key factor visitors use to decide if you’re trustworthy or not. And trustworthiness is critical: Would you give your credit card number to that street merchant who looks like he just rolled out of a dumpster?
Even if your site is not about selling anything, your apparent trustworthiness will influence how your content is received, and it will decide if a user bookmarks you and comes back for more or closes the window, never to return.
Three simple guidelines
Here are three time-tested, easy-to-implement guidelines for trustworthy navigation.
One: Never, ever link to the page you’re on
Navigation tells a story. When the user mouses over a link and that trusty pointer hand appears, that says: “This is a place you can go. Click me to go there now.”
When the user clicks, their expectation is that click will make something happen or take them to a new place. If that does not happen, that’s a bad experience and the user is filled with doubt and uncertainty. Your site’s trustworthiness just went down a notch.
It’s amazing how many sites get this one wrong. Even beloved Flickr, so often the poster child for good experience, Just look at that link to the home page on the home page. What could that link possibly do besides confuse the user?
Most have one global navigation template, to make site-wide changes quick and easy. Building in a lot of if/then statements to change the links per page takes some extra time. But it’s so worth it. Simply changing a global navigation item to be plain old text when you’re on that page means that it will look different (visual recognition of your present place) and will avoid the click-to-go-to-where-you-already-are bad experience.
The one possible exception to this guideline is anchor links. As you know, anchor links don’t send the user to a new page, merely a new part of the page they’re on already. But that can still be confusing, so that’s why they should be used sparingly, if ever. Part of the problem is that, all links usually look the same, even if some are anchors and some are links to other pages. So an obvious solution is to make anchor links look different, which is easily doable in CSS. Another option is to not use them unless you really, really have to.
Two: Show where you are
Like the first guideline, this is just about giving the user a big “You Are Here” clue, wherever they are. If the navigation quietly reminds the user where they are, they’ll never have that “Am I Lost?” panic moment.
In practical terms, this means that when a user is on the main page for a section (awesomeness.org/section), the global navigation element that had been linking to that section should be unlinked and visually highlighted so that, at a glance, you can tell where you are.
Then, when the user drills down to a content page within that section (awesomeness.org/section/page), the global navigation element for that section should go back to being a link, but it should not go back to looking exactly like it did on the home page (because now you’re in that section).
Three: Think before you link
If you were considering nominating me for Captain Obvious after the last two guidelines, you’re gonna love this one. Just think about every link in your global navigation. Ask yourself, “Will users really need this link every single time they visit?”
Just because you’ve decided to give a page a top-level directory does not mean it has to be represented in the global navigation. And if it is, what you’re communicating to the user is: “This thing right here is absolutely integral to this site and what you can do here.”
So choose wisely. Think of everything in your global navigation as describing your site. Make sure it tells the story you want to tell.