Navigational techniques

By: Jool
Good navigation can make or break your website's success.

There are probably a million different navigational techniques being used around the internet at this very moment, but how many of them are effective, usable and well designed? You’ve felt the pain when you visit a website, where their navigation is flat at the bottom, or their navigation is images, which just aren’t loading for you. This will discuss the pros and cons of each of the common navigational techniques being used, so you can choose the right one to use for you.

First off is the main contender, the most widely used and widely accepted. The html hyperlink. In beginners’ html courses, this is taught on the first day, and the reason for that is no secret, they are effective, simple and accessible by everyone. The text link is in almost all cases the best linking method. It allows itself to be styled into billions of different styles using css, it is universally supported by major search engines when it comes to web crawling and searching. In short, you won’t get far without text hyperlinks somewhere along the line. You may argue they are ugly when compared to flash or images; luckily CSS is helping to fill that void better and better. Text links are the benchmark upon which all other methods of navigation are ranked.

Next we have the images. Usually crafted in Photoshop or a similar graphics program, images offer the flexibility of being able to use a wider variety of fonts, textures, effects and if used correctly they can appeal more then a text link might. However, there are downsides. Images need to load, and depending on how big they are this can take time, and eat into your page’s load time substantially. Another big downside is the fact that major search engines are still struggling to support image links to the same degree that they support text links. If you insist on using image links, you absolutely positively must must must use alt tags to describe what it is the link is going to. If you don’t know what they are, find out. Also, I suggest that any image navigation designed pages should have a text link alternative somewhere else on the page, in the footer for example.

Flash navigation is another key heavyweight. Designed using macromedia flash in almost all cases, flash is a special beast, because it is not even supported by most browsers by default. The user must install the flash player plug-in on their computer before they can even see your navigation. This puts any flash navigation pages at an immediate disadvantage. The upside is that flash menus, when designed at a high quality, are amongst the best looking, most functional and more stylish menus you will ever see. A professionally design flash menu might just be worth the trouble they cause with plug-ins. As with images, they are not usually supported by search engines, which can limit how many of your pages are crawled. Also, text navigation as an alternative in the footer or somewhere on the page is strongly encourage, incase the user doesn’t have or want the flash plug-in on their computer.

JavaScript menus are not as popular, but still a worthwhile option if you can get it to work for you. The best example I ever saw of a JavaScript option was to replicate the windows-style file tree. It was cool, and the text links used were perfect for search engines and text-based browsers. As soon as I flicked off JavaScript support however, things unraveled in a bad way. You need to make sure your JavaScript menus are still somewhat functional to users without JS support. There are more people who have JS turned off then you might think, especially due to its reputation as something that may be used to harm computers. Text-based alternative links are encouraged, especially if your menu will not show the links unless you have JS support enable in your browser.

Those are the 4 main players I see in navigation, but they are completely useless unless you place them. Top, middle, bottom, right, left, center, small font, big font, screaming pink or toned blue, however and wherever your navigation appears, you have to be sure that it is accessible, legible and usable. Accessible means it is where people can see it, if it is at the very bottom of the page, I can’t see it. Legible means I can read it, the font size, colors, etc make it good to read, and if image or flash based, they are loading normally. Usable means that when I click on a link to go to tutorials, it actually takes me to tutorials, instead of to your portfolio. Remove one of those 3 requirements for a good navigation system, and it will become a total failure, no two ways about it. In general, horizontal navigation or vertical arrangements are the most common things you’ll see; sometimes personal sites break the trend and try new ideas. The three things they always have in common are they are always accessible, legible and usable. Remember those 3 things, and chances are your navigation will be a success.