Looking for the lessons? Get started!
An overview of navigational choices.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
The primary concern of most websites is the provision of information. The ability to enable nonlinear navigation via the use of links is one of the main things that sets the Web apart from other media. But without organized, coherent, and usable navigation, even a site with the most amazing content will fail. — Craig Grannell
Unless you have a one-page site with no hyperlinks to anywhere else (and those do exist), you're going to need some kind of navigation scheme to help your users find their way around your site. There are as many ways to do this as there are designers to create them, so I'll just go over a few of the more well-known concepts and techniques.
This page correlates closely with its sister page that tells how to make hyperlinks:
Rather than review that content here, I'll just refer you to that page now. If you have any trouble with the idea of making links, or aren't sure about the differences between relative and absolute links, for example, check this page and come back when you've refreshed your memory.
The worst things are sites that have layer after layer of contents pages and navigational instructions. One important aspect of navigation is simplifying your site: boiling everything down to as few pages as possible — with content on each one. The next step is to organize these in as simple a way as you can imagine."— Roger Black
Basic Types of Navigation
Without getting into too much detail, there are three basic types of site navigation you will implement in your designs:
- Inline navigation: General links within web page content areas;
- Site navigation: The primary navigation area of a website, often referred to as a navigation bar; and
- Search-based navigation: A search box that enables your visitors to search a site via terms they choose.
I've cribbed this list from Web design specialist Craig Grannell. Grannell warns us not to expect every kind of navigation in every site. Also, sometimes the differentiation between the three can be a bit indistinct.
Inline Navigation
You probably navigated the Web your first time out of the gate by clicking an inline link. My first voyage into the wild and woolly world of the Internet was by inputting the URL "yahoo.com" and clicking the first link that interested me. I've clicked a lot of links since then … These are the links that come within the body of a textual block, say a paragraph, or something else like a list or a blockquote.
If you want, you can visit Yahoo! right now just by clicking on this link. That is an inline link.
Site Navigation
These are more general links that take the user to different pages within the site, if there are any. Usually these navigational elements (often appearing as "navigational bars") carry over throughout all the pages of the site. (If you went through the lessons on this site, you created a navigational bar of your own.)
Grannell writes:
This kind of thing [navigational bars or other such navigational schemes] is essential for most websites — long gone are the days when users often expected to have to keep returning to a homepage to navigate to new content.
Search-based Navigation
This involves the use of a "search box," an input form that allows you to hunt through a particular site looking for key words or phrases. This site has one, powerred by Google and prominently featured dead center in the heading of this and every other page.
Grannell is curiously dismissive of search-based navigation, writing that "most sites get by with well-structured and coherent navigation." He does note, aptly, that your site (and everyone else's) gets two kinds of visitors: "those who eschew search boxes and those who head straight for them." He's right, and you need a properly implemented search feature for all except your most simple and basic Web pages.
It's not as easy placing a search box on your site, since it moves you out of the realm of static HTML and CSS and into behaviorial, server-side implementation. Some of the best free searches for your site that are currently available include:
Secondary Types of Navigation
These are types of navigation that should not be relied on to provide the main navigation for your site, but can provide useful alternatives for your site visitors.
Breadcrumb Navigation
Some people call this "cookie-crumb" navigation. Think Hansel and Gretel, leaving bits of bread to mark their trail through the forest. Jacob Gube of SixRevisions has given us a nifty article on the subject, with lots of real-world examples, noting that breadcrumb navigation greatly improves a site's usability, letting users move back and forth through a site step by step. Breadcrumb navigation is secondary navigation — i.e. you shouldn't rely on it for your main navigational scheme.
Usability guru Jakob Nielsen calls breadcrumb navigation "increasingly useful" as sites become more complex and multi-layered.
Breadcrumbs use a single line of text to show a page's location in the site hierarchy. While secondary, this navigation technique is increasingly beneficial to users. — Jakob Nielsen
From his same page, I'm stealing Nielsen's list of why we like breadcrumbs:
- Breadcrumbs show people their current location relative to higher-level concepts, helping them understand where they are in relation to the rest of the site.
- Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links.
- Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
- Breadcrumbs take up very little space on the page.
Nielsen also warns against taking the "Hansel and Gretel" metaphor too far; a breadcrumb trail should not replicate the function of the browser's Back button. He writes, "Breadcrumbs should show the site hierarchy, not the user's history." He's correct.
As of this writing, I don't use breadcrumbs on my pages, because the site hierarchy is fairly simple. However, I'm going to think about that assumption. It's entirely possible that you might see breadcrumb navigation on these pages by the time you read this!
Sitemaps
Sitemaps can be quite useful as a secondary navigation aid. When you're hopelessly mired in the deep structure of a site and can't figure out where you're going, a sitemap can often be your life preserver. Jakob Nielsen calls the sitemap "a visual representation of the information space," but that's a bit chewy for our purposes. Basically, it's a map of your site, with links to every page in the site, represented in an easy-to-understand hierarchical structure. It's a one-stop guide for your Web site. They're not used frequently, but the users who do employ them often depend on them, and would miss them if they were not available.
I still recommend site maps because they're the only feature that gives users a true overview of everything on a site. … A site map lets users see all available content areas on one page, and gives them instant access to those site pages. Site maps can also help users find information on a cluttered site, providing a clean, simple view of the user interface and the available content. — Jakob Nielsen
I use Matt Everson's Slickmap for this site's sitemap. It's easy to use, visually attractive, and quite, well, slick.
The Back Button(s)
Well, duh, you say, the back button on your browser is obvious. Yes, it is, and it needs to figure in to your navigation scheme. Many users will retreat to the back button if they get confused as to where they are in your site. This should never happen. They should always, always know where they are, and how to get back to the home page in a single click.
Another favorite is the "go back" button.
This is a fairly nice "go back" button, used for free from FreebiesPress. Not only does it tell the user they can "go back" by clicking the button, it gives a visual stimulus (the left-pointing arrow) to reinforce the message. However, "go back" links (buttons or text) should be nothing more than secondary augments to your navigation. Users should never be forced to depend on a link that sends them back to whatever page they came from. Roger Black writes, "There's no easy way of leaving a trail of bread crumbs behind you: the 'go back' button is the hallmark of a badly designed site."
It really is hard to overestimate the need to simplify site navigation. It's safe to say that most of the time users don't know where they are. If a user gets lost on your site, he'll click the hell out and never come back. Run the risk of overexplaining. Make it painfully simple. — Roger Black
