Links:

Navigation design:
Indexed or Cascading menu design

Choosing the right navigation structure for your web site.

Designing a good navigation structure for your web site is a fairly simple topic to discuss. But it is also a hot discussion topic as many web site designers have conflicting views on where you should put your menu and what kind of menu you should use. So, here is my opinion.

Two dimensional navigation structures.

So, you are planning to develop a small web site. But, one year from now your web site may not be so small as you expected. So, as discussed in our principles of web design you have to plan for the future. You cannot have a one dimensional menu if you have more than about 10 pages. Start organizing your web page topics in sections of similar topics now.

Deciding which topics fit in which section may not always be as straightforward as you would like, but that's OK. On this web site, for instance, I had some initial problems deciding how to split up my topics between the web design and web authoring sections. I decided that I would put the topics for my more technical visitors in the web authoring section. You see, you will have to decide your navigation structure, based on the needs of your visitors. If I get feedback that my visitors are confused I may need to change it

You can always move a web page in your navigation structure, but you have to make sure you do not need to change its physical location. I don't like to organize all my web pages in one large directory, so on my web server I have a directory structure that reflects my top level navigation structure. That way, when my web site grows, I do not end up with hundreds of pages in a single directory. Deciding on your directory structure will become a bit more complicated, however, if you are not sure about the way you divide your topics. For instance, my practical guide section is currently mostly a beginners guide. Later I will need to split that section into a beginners guide and a practical guide for advanced users. Because I could not decide on that now, I put all those web page files in a single directory. That's because the URL of a web page reflects its physical location (although you can override that with redirects, a topic for later). Your navigation structure sits on top of that, but does not need to fully reflect your directory structure. Just make sure you don't have to physically move your web pages if you need to change your navigation structure. Search engines don't like it, when you move web pages from one location to another. So, plan ahead.

Choosing an Indexed or Cascading menu design.

Now you have a two dimensional navigation structure, you need to reflect that in your menus on your web page. You could have a two menus on your web page. That is called an indexed menu design. Indexed menus tend to take up valuable real estate on your web page. You could have more text or advertising in place of your indexed menu. Hence, web designers came up with an cascading menu design. You will have seen those menus: You put your cursor over the menu, and a new set of menu items pops up. They are fairly easy to program, look good, but make it more difficult for your visitors to navigate, especially if they have problems moving their mouse.

I am not against cascading menus, but I am strongly in favor of using a two-dimensional indexed menu in your web design for two reasons. For me it is very important that you are advertising your own pages to your visitors. I want to keep my visitors as long as possible and have them visit as may of my web pages as possible. Hence, I want them to see the bottom level menu with related web pages. I don't mind using my valuable screen real estate for that, and neither should you. The second reason is just as important, and goes back to my favorite design principle, plan for the future. If you have an indexed menu structure, your main menu will most likely be a horizontal menu bar at the top of your screen. That means it will have limited space for menu items. What will you do when you run out of space? Well, you can always change your top level menu into a cascading menu when the need arises, and you end up with a three dimensional menu. Room for hundreds of pages.

Finding a template with indexed menus.

Now you know how to design your navigation structure, how do you find your perfect web site template with an indexed menu structure? Well, really, any web site template with an simple or a cascading horizontal menu is fine. Just do not choose a template with a single indexed or cascading vertical menu structure. If your perfect template only has a horizontal menu but no vertical menu, just make sure you have one more column of text than you really need and it will be easy to change that column in an indexed menu. Even better, choose a web site design with a horizontal cascading menu, but do not use that cascading menu feature till your web site has grown to 50 or more pages. If your favorite template already has a three dimensional menu with an indexed vertical menu, excellent. Otherwise, make sure you have enough text columns and convert one into a menu.