Navigation
Here we teach you how to plan your site's navigation.
Goals of navigation
The navigation system refers to the part of your site that users click on to get from one page to another and one section to another. The goal of any navigation system is for your visitors to find the information as easily as possible. Don't make people click more than they have to. Good navigation, along with layout, is the most important part of functional design (as opposed to visual things). There are sites that I go to and I have absolutely no idea where I am within the site as a whole. I'm not saying that your visitors should know exactly where all your content is. If you have thousands of pages on your site then this may not be possible. What I am saying is that you should at least know what section you are in and how to get to other sections and get back to the home page.
Navigation Characteristics
 | Levels of navigation.The number of levels of navigation refer to have many layers of folders visitors have to go to to find the deepest content. The more content you have the more levels you will probably have but one of the characteristics of an efficient navigation system is to have as few levels as needed. How many do you need? Well, if you don't have too many pages on your site (maybe about 1-50) you probably probably get by with 1 level of navigation - depending on what type of navigation you have. You could be able to keep it to one level of navigation if you have either have a drop down menu with items to choose from or a side menu with many options listed. |
| Scalability. If your site is going to grow and you want to keep the same design then you should pick a navigation system that will be able to grow along with the site. If you don't do that then you might be forced to do a re-design if your content outgrows your navigation. |
| Easy to code. If you are not a good coder then drop-downs would be very hard to code. Most of the time you will getting a free script off the internet somewhere so it won't be an issue but you still may have issues with your visitors' Javascript settings or browser choice. |
| Visibility. You may want your visitors to be able to see their choices without having to mouseover a drop-down menu because some visitors will not bother to "browse" the drop-down menu. |
| Location. You may want the menu in a particular location to fit into the overall layout of your site. |
| Categories. The cateogies of page in your navigation should be the same as the categories of content on your site. For example, if you have a drop-down menu with 8 categories then those 8 categories should contain different types of information. In other words, the splitting up of your categories should be based on how the information is different - you shouldn't split up your different pages into certain categories just to make a drop-down menu look balanced. The time to do this is during your site planning. You should sit down and plan all the pages of your site, then break them down into different sections, then fit your navigation around the plan. |
Types of navigation
| Top bar menu. These are really great if you have only a few pages to show (up to maybe 8). The problem with this is that it is not scalable as you can only add so many options along the top of a page when palced horizontally. The benefits are that it will usually have a very clean design where users can easily navigate to the other pages. Another good thing about them is that you can turn them into drop-down without changing the appearance of the top menu. |
| Drop-down menus. The benefits of these menus are that they are efficient in organizing content and they are scalable - you can access many pages from 1-click on you can grow the menu as you add pages. One disadvantage of drop-downs is that even though the categories of the drop-down menu are visible, the drop-down list of pages is not viewable by default. They have to "browse" the menu to see what pages are one the site and many will not do this so you will lose page views. Another disadvantage is that the code is somewhat complicated and you easily can have cross-browser issues where it doesn't work in Firefox, etc. There are also different levels of drop-downs where a 2-level drop-down will have additional options for each drop-down item. On a 1-level drop-down with 8 sections you could have 12 different pages on each drop-down list. This would give you 96 total pages. If you have a second level drop-down where each item on the drop-down list has 6 options then the menu could access 576 different pages from 1-click. |
| Double top-bar menu. These are the menus, like on businessweek.com, that have a second row of options appear below the first row when you mouseover each option on the top row. These are getting more popular. |
| Side Menu. Side menus are good for 2 reasons. First, their choices are visible by default and secondly, the menu is scalable. Having all your pages visible by default is a big benefit because users will usually always do a visual scan of the menu to see if there is anything that interests them but many visitors won't actively click through to pages jsut to explore the site. The advantage of scalability comes in when you want to add more categories or pages. You can easily add maybe 40-50 items down the side before it starts to get to the point where you may need to re-think the process. Another advantage of the side menu is that if there is empty space below the menu the space conveniently fits a 120 x 60 banners so you can use this otherwise "dead" space to advertise without taking up valuable space. |
| "Pop-up" side menus. I don't know what else to call these but they are the ones where when you scroll down the side menu there is a pop-menu that comes up to the right that is similar to a drop-down manu. These tend to be extremely scalable. MSNBC probably does the best job at using these. They have 30 different categories along the side while you can view about 20 differnet pages in each pop-up. You can easily scan over 600 different news stories without much effort. These tend to not be too popular for some reason. I think it is because people are so conditioned to think the navigation should go on top that they are afraid to use these. |
| Expandable side menus. These are the side menus where if you click on an item it expands into a new section and pushes all the options below it down. These menus are very convenient but for some odd reason they tend to be under-represented in web page design. This is posssibly because there is can be a lot of clicking open and closing of menus. |
| Hybrid - Top bar with side menu. The top bar/side menu combination is when the top bar has the different categories and once you click through to a category there is a list of different pages of each section along the side. This works well because the fact that the side menu is in a different location so visitors can intuitively pick up the fact that the pages listed on the side are sub-pages. This also works well because the combination of the two allows for scalability. Assuming you have 8 different section on the top menu and 60 different sub-pages along the side of each section then this allows for 480 differnet pages on your site while still having easy and intuitive navigation. |
| Hybrid - Drop-down with side menu. The drop down/side menu combo is a setup you should look at if you have tons of content. This is basically the same setup as above except the the top bar menu has drop-down options. If you have a top bar with 8 categories and each category has 12 items in the drop-down then you have 96 different options to click. After you click through then you could have a side menu with 20-60 different options. This could give you the ability to access from 2,000 to 6,000 pages with only 2 clicks and without forcing visitos to use a search feature (although a search feature may still help). If you install a second-level drop down menu combined with a side menu then you could have access to 10,000 to 30,000 page with only 2 clicks. |
Navigation Links
Drop-down menus
