Navigation Complex

By Peter-Paul Koch

Years ago I did some navigation research. My goal was to find out if any type of navigation was particularly suited to certain kinds of sites. I also wondered if navigation isn’t too complex in general.

I identified six forms of navigation—three main types and three subtypes. The main types are:

1. Linear navigation typically contains Previous, Next, and Index links and nothing more. Since it’s contrary to the spirit of the Web, it is rarely used. This is a one-dimensional navigation system, used mostly for online books, presentations, or other linear documents.
2. Hierarchical navigation is by far the most common type. The pages are grouped into a hierarchy of subjects, and the navigation is usually presented with a foldout DHTML application. This is a two-dimensional navigation system.
3. Web navigation is a rare type where a page contains links to related pages, without any obvious grouping of these links. You could equally call it a multi-dimensional or a non-dimensional navigation system.

The subtypes are special instances of the three main types:

1. Breadcrumb navigation is a linear path through a (usually) hierarchical site structure.
2. A Sitemap is a completely unfolded hierarchical navigational system.
3. Text navigation consists of hyperlinks in the text of the page. There is no obvious logic to the links themselves, except that they lead to information that’s related to the text in the page.

The best?

Which type of navigation is best? Measured by popularity, the hierarchical navigation easily wins. It is used more than all the other types combined, but does that make it the best type?

Even though DHTML menus can be misused, they should not be despised. When you use DHTML, you can show links to all pages in your site in a user-friendly way, something that’s not easy to do otherwise.

Such a navigation also serves as a site map. The user can wade through all levels and branches until he finds the page he’s looking for. Of course, a DHTML menu is not the best way to show a site map, but it can function as one.

A combination of different types of navigation is the best way to go. A DHTML hierarchical navigation combined with a text navigation presents the hierarchical navigation on all pages and it gives experienced users the possibility to immediately jump to the page of their choice.

The text navigation benefits new users, especially on the home page. New users want a short overview of what the site has to offer and where to click. A few paragraphs can describe all parts of the site and include the links of the first navigation level, in the same order and with the same labels as they’re shown in the menu.

This system is the best, although a few sites might need a different type of navigation. This still leaves the question of simplicity unanswered, however.

Complex site = complex navigation

As discussed in last month’s column, sticking to well-known ways of showing information reduces confusion for your users. This goes for navigation even more than for other aspects of a Web site since a site with incomprehensible navigation is totally useless.

The goal of any navigational system is to offer the user a clear and simple way to access all pages on a site. Therefore, it reflects the site structure, and when the structure is complex, the navigation is also complex.

Complex site structures cannot always be avoided, nor should they be. A government site, for instance, contains information about a lot of loosely related subjects, and its structure will quickly grow complex. Users expect this in a government site, so it shouldn’t hurt the site’s usability, but the navigation can also add an extra layer of complexity.

New ideas

DHTML fold-out menus have grown common on the Web. Though initially, they may have been too complex, their continuous use has sanctioned them, and users are getting more acquainted with them. Of course, web developers want to extend their menus to something beyond another fold-out menu.

Are users ready for it? When you change the traditional DHTML hierarchical menu, you add an extra layer of complexity. Even when your changes are for the good, your users must spend a few seconds to understand the navigation. Some people won’t bother, and your site may lose traffic.

A few months ago, I saw a new navigation concept. The site had two hierarchical navigational systems, one for geographical areas and one for things like politics or housing. Together they formed a grid. When the user selected something in both systems, he was shown the information at the intersection of the two chosen subjects, like housing conditions in a certain geographic area.

Although I liked the basic idea very much, it wasn’t exactly easy for the users. The professional code-geek in me shouts to go forth and conquer the world with this new idea. The professional interaction designer shouts to step back and think of my users. At the moment, I let the conservative interaction designer prevail over the progressive code-geek. I remind myself to think of my users and don’t yet use this new idea (yet).

I’m not entirely happy with this decision, but I think it’s best to be conservative when designing a navigational system, to keep it as simple as possible for your users. It might not be what web developers like, but for the moment it seems to be the best solution.

Peter-Paul Koch is a freelance Web developer, writes and maintains the JavaScript Section and is an Administrator of the WDF and WDF-DOM mailing lists.