Navigation Systems

by Lori Hylan

Have you ever come upon a Web page and wondered, "Where am I, and how did I get here?" Have you ever created a site and wondered, "How do I let visitors know what's here?" What's needed in each case is some kind of navigation system--ideally, one that identifies the site and indicates that the page is part of it.

Starting with that last bit first, what this means is that if you don't have a logo for your site, it's time to create one. For an example I'm going to use a site I created over a year ago--back when background colors were the latest novelty--and am now revamping. There's a large Photoshop-retouched picture of me on the front page, so I'll use a smaller verson of that as my logo.

Me with purple hair

Now we've identified the site with a logo, it's time to tell people what's here. For my site, I'm going to do this with a toolbar. Here's my first idea for a toolbar design (at 27k it's too big for my taste, so I'll probably fine-tune it a bit in the coming weeks):

The ADKOV toolbar

It should now be pretty obvious that there are three main areas on my site: poetry, music, and design. By turning this file into an imagemap that links each of the words to its respective area and the logo to the main page, I'll have a basic navigation system for my site. Each page on the site will have the toolbar at the top, which will tell visitors at first glance that this page belongs with all the others that have my logo on them. It will also serve as a constant reminder about what visitors' options are.

What my simple navigation system will not do is tell users what area they're in right now. The first page in each section will do the trick, of course, but what happens when users dig a little deeper in the section? My three categories are distinct enough that it should be pretty obvious: If you see a poem on the screen, you're in the poetry section. But what if I wanted to make it absolutely clear? I could make three more versions of my toolbar, each with two of the words "grayed out."

The ADKOV toolbar
-- poetry section

I personally like it when toolbars and logos are at the top of pages, but they don't have to go there: Toolbars or option menus that run down the side of the page work well too (partly because they at least start at the top of the page, where the user can see them right off, but also because at least some of the options remain visible as one scrolls down). What I'm not very fond of are toolbars that go at the bottom (and yes, I'm aware that this is the case on internet.com). When the toolbar is at the bottom instead of at the top or side, you're losing an opportunity to give visitors some instant context.

We've looked at a toolbar with a logo and some "word" options. What about an all-icon toolbar? If you can make icons that are instantly recognizable to everyone, more power to you. If you have to explain the icons with words, why have them at all? Icons on the Web are inherently problematic because the idea of site design is to produce something unique, and the idea of icons is to produce something universal. My advice, unless your goal is opacity or to convey a sense that "a surprise lies behind every button," do not waste a lot of time designing icons.

On the flip side, you could opt for a text-only toolbar (i.e., not an "image" of text, but actual text links). These can be quite nice, especially if you try