Allchorn Design

Note: This is my first article on information architecture and will only be a brief theoretical exploration into the topic of website navigation. This is not a tutorial on creating the navigation systems displayed, but an explanation on what and what not to use where.

Navigating a website should be as natural as breathing. Finding what you’re looking for should be immediately obvious, and even when there are large amounts of pages to be linked to, the architecture should give a good indication as to how the desired page(s) can be located.

There are a multitude of options when planning the navigation of a website, and each have their merits and pitfalls. The method chosen should disguise the complexity of the site’s structure (or lack thereof) and serve as an aide rather than an obstacle.

Getting Your Foundation Cast

To begin with, lets get something out the way. I only promote semantic navigation systems that take the form of unordered lists which are styled accordingly to be presented as desired. Here is an example of a well structured, unstyled navigation:

Notice how the unordered list makes easy work of simply and semantically categorising and effectively displaying the navigation in it’s simplest form. For a simple site with not too many pages, this is easy to maintain, and can even be coded into an include file from which you can edit only it to maintain the entire site’s navigation. More about that in another post.

Once you have established your sitemap, your navigation will be simpler to construct and depending on it’s complexity and what you will be displaying in what navigation (main, secondary etc.), you can mark things up to reflect what you need. Then some CSS comes in and you can style the menu in a multitude of ways. Here are some of my favourites.

Popular And Effective Navigation Models

Horizontal
The horizontal navigation is popular, uses little screen real estate and serves to navigate effectively to different sections/pages.

Horizontal with Dropdown
This model allows for a second level of navigation to be viewed without reloading the page. It facilitates slightly faster navigation when there are sub pages/sections that don’t require unnecessary steps to get there.
Horizontal with Dropdown and Multi Level
Feeling frisky with this dropdown thing? Go another level, but stop there. Getting too dropdown happy can create an annoying user experience with usability becoming an issue. Imagine following a trail of dropdowns and you lose the focus and have to start again at the beginning. Not worth the aggravation in my opinion.

Horizontal with Tiered Levels
This model is one of my favourites, but one I don’t tend to use very often. It’s most effective as an “on click” event rather than a “mouse over”, but both work well. As with the model above, don’t make it go to too many levels, or you’re looking to confuse rather than enable your user.

Vertical
This is similar to the horizontal in it’s use of real estate, but offers a top to bottom viewing experience. I believe that anything read from top to bottom left to right is sticking to a certain fundamental that cannot be undermined. Again, nothing complex in this model, but a nice clear and concise breakdown of available site pages/sections.

Vertical with Flyout
Not much need be said about this model. As with the horizontal with dropdown, it serves the same purpose, but is visually presented differently. Effective and clean.

Vertical with Flyout and Multi Level
Getting a bit fancier, adding more levels seems like childs play, but children don’t design effective business focussed websites, so put that GI Joe away and keep things simple! Remember, your users want things to be simple and fast. Don’t confuse them! Two levels max, and if you want three, you’d better have a good reason, or off to the principal’s office young man/lady.

Vertical with Accordian Dropdown
Another of my favourites. This one can accommodate large amounts of links and levels, but displays only two here. An example of this navigation model being used effectively can be seen on this website.
Contextual
Another good method of navigation this, but not very easy to make consistent site-wide. It can work well from a search engine standpoint as well as offering a friendly human approach to visitors. Nice on small sites but normally requires a backup navigation that offers a bit more structure.


Abstract (flash, images, icons etc.)
Avoid abstract forms of navigation. Examples include navigations that don’t show where the link goes until you place the mouse over it, navigation that flies around the screen making you have to chase it, or icons/images that aren’t immediately obvious or aren’t implemented properly (alt attributes etc.).

I’m not going to go into Flash flaming mode, but this technology is a primary reason for these forms of navigation abuse. If you’re thinking of making a flash navigation on an HTML site because it will look “cool” or makes a sound when you are constructing or having your site constructed… I recommend you adjust your thinking and re-evaluate things. Is a twinkly navigation that sparkles and makes magical sounds when you put your mouse over it worth the sacrifice of search engine visibility, client download delays and essentially, lost sales/enquiries. I didn’t think so.

Conclusion

Wow, quite a long one that. At least by my standards. To sum things up, I think I can conclude that creating a simple navigation system that effectively represents your content in as few clicks as possible without rendering your site unusable is your best plan of action.

1. Keep things semantic. A bulleted list is your best bet, and CSS can make it look how you want.
2. Don’t make things too complicated and try to group them effectively and logically.
3. Try to mirror your site’s content (or at least the top 2 or 3 levels).
4. Don’t try to be different or clever in navigation. If people are familiar with certain methods, why throw them into the pit of uncertainty.

Happy navigating, and I hope this article is useful to someone.

Filed under: Business, CSS, Design, Information Architecture by Ross Allchorn.