Build intuitive Web navigation
Web site navigation is comprised of the links you create between your sections, subsections and pages. It's integral to a site because it guides users to the content they're looking for.
You probably didn't realize it at the time, but when you developed your site's structure in the Set Up stage you were laying the groundwork for your navigation. During that stage, you finalized the placement of your sections. Now, as you prepare to build your site, you need to determine how you're going to link those sections together. If your site structure is simple and intuitive, your navigation will be too.
Types of navigation
In his book "Don't Make Me Think," usability expert Steve Krug details the three primary navigation types (Krug, 62). These types aren't standardized across the Web world, but they're common, so you shouldn't encounter weird reactions when they pop up in conversations with other Web publishers.
The three types are:
- Persistent navigation (a.k.a global navigation): Navigation elements that appear on every page of the site. The Home, Set Up, Build and Run tabs at the top of this page are persistent navigation.
- Secondary navigation: Navigation links that apply to a specific section of a site. The numbered links on the left-hand side of this page are secondary navigation elements. They're tied directly to the Build tab and only appear when that tab is clicked.
- Utilities: This is a catch-all category for pages not included in the persistent and secondary navigation types. Contact pages, about pages (pages containing background information on the site), and frequently asked questions (FAQs) fall into this area. You'll find this site's utility pages in the Home section.
When you're in the early stages of building a site you probably won't have enough content to fill out persistent, secondary and utility navigation segments. Nevertheless, understanding how the different types connect is beneficial because it lays the groundwork for growth. If you think you'll be expanding in the future, consider how persistent and secondary navigation will work together and where they'll be placed (this comes in handy during the design process). You may not need all of these types now, but expansion will be a lot easier if you keep each one in mind from the beginning.
Navigation techniques
Now that you've got a handle on the three navigation types, it's time to take a look at techniques that lead to user-centric navigation.
Home links
When kids get lost in the mall, how do they find their parents? Usually, they go to a security kiosk and ask someone to page their wayward Mom or Dad. That kiosk serves the same purpose as your home page. When all else fails, it's a way to get back on the right track.
The only page on your site that doesn't need a link to the home page is the home page itself. At minimum, every page should have at least one home link. If you really want to be thorough, include home links in your persistent navigation, in your footer (the navigation coupled with the copyright information at the very bottom of the page), and via a hyperlink in your logo.
Creating context
If your content is compelling, people are apt to click around your site, zipping from article to article. When they finally break away from the riveting material you've provided, they're going to need to know where they are. There are two ways to do this.
The first method requires a lot of forethought because your navigation needs to reflect where you are in the site at all times. To accomplish this, the navigation has to constantly change. Confused? Let's look at an example.
The navigation on this site marks your whereabouts in two ways:
- The persistent navigation tabs at the top of the page tell you which section you're in. The colors change when you move to a different top-level section. The Blog section is navy blue, the Set Up section is green, the Build section is light blue, the Run section is orange and the About section is black.
Example:
- Every time you visit a page, that page is highlighted with a red background in the secondary navigation on the left-hand side. The red background tells you where you are within a subsection.
Example:
With this information, you (hopefully) know that you're in the Build section, you're in the Usability subsection, and you're on the Navigation page. As you click around, you'll see that the sections, subsections, and individual pages are marked with different colors and notations. Making this work means that every page on the site needs a specific navigation scheme, which, in turn, requires a fair amount of organization. It's complicated, but it's worth the effort because it gives the user a variety of ways to understand where they are in the site's hierarchy.
The second context method is a little easier to create and maintain. This technique, commonly referred to as "breadcrumbing" by designers and usability gurus, uses a series of links (crumbs) to show you a clear path back to the home page. You can find an example of breadcrumbing at the top of this page, marked "You are here."
The number of links included in this breadcrumb is determined by how deep you are in the site. If you click to the top-level Build section you'll notice that the breadcrumb now only has a single link back to the home page.
Breadcrumb placement varies. Some sites insert them at the very top of the page (example: About.com), but others push them below their logo (example: CNET) . Either way, breadcrumbs are a nice addition that gives users another way to jump around your site without getting lost.
Use established naming conventions
Conventions have a tremendous upside because the majority of users implicitly understand them. Everyone knows where a "Home" link goes and most people understand that clicking the "Contact" link leads to an e-mail address or phone number. Because of this, it's wise to stick with what works. Don't get fancy by calling your home page "Headquarters" or "Front Page" -- people shouldn't have to decipher a link before they click it.
Similarly, if you're searching for names for sections, it's better to be clear than creative. When TheIndependentPublisher.com was in the organization stage, the persistent navigation tabs at the top of the page had different names: Set Up was known as Conceptualize, Build was Create, and Run was Maintain. They sounded good, but the initial names had murky definitions and were splashier than they needed to be. In the end, ornate description was abandoned for clarity.
Offer search capability
Usability studies conducted by Jakob Nielsen have found that half of all tested subjects rely on searching to find information on Web sites. Because searching is so popular, you should add a search link or a search box to every page of your site. The easiest way to do this is to build search into your persistent navigation. If that's not possible, try to incorporate it into an obvious location.
It's important to understand that simply offering a search box or a search link doesn't make your site searchable. For search to work, it needs an engine. Adding a search engine used to be a highly technical process, but things are considerably easier now that companies like Atomz and Google offer engines that can be quickly plugged into your site. Better still, these engines are free.
Related links
| Name |
Type |
Notes |
 |
| Steve Krug: Don't Make Me Think! |
Book |
Krug's book takes a common sense approach to Web usability. It's a fast, informative read. |
|
| Is Navigation Useful? |
Column |
The answer, for most people, is no. In this column, Jakob Nielsen says that most Web users ignore site navigation, often focusing only on the content. |
|
| Atomz Free Search Service |
Search engine |
Atomz bills this as a scaled-down trial version of its search engine, but there's no expiration and the service is completely free. The only limitation is that it must be used on sites with 500 pages or less. |
|
| Google Free Search Service |
Search engine |
Google's free service draws from the search company's extensive database. There are no page or time limits. |
|
Got a recommendation?
Send it to: editor@theindependentpublisher.com. |
