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. I know I have. So let’s go back to basics.
Article Continues Below
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?#section2
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#section3
Here are three time-tested, easy-to-implement guidelines for trustworthy navigation.
One: Never, ever link to the page you’re on#section4
The other day I was driving on the freeway. I was on the 120, going north, dutifully following my Mapquest directions, which said to get off on 120, and then turn right on 120. Say what? I thought I was on the 120 already. Am I lost?
I can’t speak for the design of the California highway system, but we can avoid this problem on a website.
Remember, 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, and even the winner of the 2006 Webby award for navigation, gets this wrong. Just look at that link to the home page on the home page. What could that link possibly do besides confuse the user?
Now, I know the folks at Flickr aren’t out to make their navigation confusing. So why? Personally, I blame lazy content management systems. 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#section5
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 (because now the link has utility), 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#section6
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.
I realize that this raises more questions than it answers. Should “Home” be one of the global navigation elements? Should I stick to under five items? What about dropdown menus? Should I use tabs at all? Many questions, one answer: It depends. Design your site for the users you have, and the users you want. Then test, test, test.
Putting it all together#section7
Here’s an example of what all this looks like in practice.
Global navigation on the awesomeness.org home page.
Hovering over Section Two while on the home page. The underline communicates clickability.
Global navigation on a main section (awesomeness.org/section). Note that “Section Two” is not a link and is visually joined to the body of the page, communicating ownership of the content below.
Global navigation on a page within Section Two (awesomeness.org/section/page). Note that the tab shows where you are, but the blue shows you can still click it to return back to the main Section Two page.
Hovering over Section Two while you’re on a page in that section.
In all these examples, the visual language is consistent. The tab means “you are here” and is understood at a glance. The underline is always present on hover. And blue always means clickable.
Of course, there are many ways to visually represent these concepts. The point here is simply to illustrate one way of approaching the problem.
If you try to implement something like this on your site but you can’t because a page can exist in multiple sections at the same time, you officially have Bigger Problems. At that point, you probably need to think about other visual metaphors (besides the usual tabs), or reexamine your information architecture.
Navigation is the uncelebrated workhorse of web design, but it deserves a little more attention than it usually gets. When people use your site, they’re like tourists in a foreign city. If you want them to have a good time, make sure they can get where they want to go and know where they are when they’re there. If you show them a good time, they just might come to visit again. But if you leave them lost and confused, well, don’t expect to move much swag in the gift shop.
