A site's navigation is the heart and soul of the site. With a well thought out navigational layout, a customer should be easily able to find the information they are looking for and also easily be able to order any product on your site. I always start a site's actual design with the navigation.
That navigation is the basic structure of the site, and on this I then hang the other elements of the design. It is shocking to me how many people instead kind of stick the navigation in at the end of the design process - writing the pages first and then reverse engineering some sort of navigation. Don't make that mistake - taking the time to really have a good navigational setup will give your site a major head start over most of your competition.
From that earlier process, you should have come up with the basic content sections for your site. And you should have further broken down these main content areas down to their sub categories where necessary.
Finally, you also thought about what type of content each section or page would ultimately offer (e.g.. what content would be on a specific product page, on your FAQs, etc). If you haven't done this, you need to address this now before heading into designing your navigation. Navigation flows from the site's content, so it is important to have a very clear idea of the content and flow of the site before addressing the navigation.
What are the Navigational Elements of a Page?
Navigation in my mind not only means the way the links to your site are presented on your page, but also may include the different ways a page presents other options for navigating to relevant pages within your site.
Take this page, for instance. The main navigational element is the tabbed navigational bar at the top. This tabbed navigation bar also has further navigational area under the headline that tells that navigational possibilities for this section of the site you are on.
One last navigational prompt was to add in the link to the next page in this section at both the bottom of the page (where people will hopefully find it after they have read the page) and also off to the right as well. While this is duplication of the link, I thought it was important to make sure people would easily find the link to the next page in the site.
There are also a few other navigational elements to this page: the logo is linked so that clicking on it will take you to my overall home page, there is a little navigational bar underneath the logo with some generic administrative types of links (not content, per se, but basic website links such as "contact us", "about us", etc.), and at the top right are links to different content sections I've put together over the years.
Navigational Layout Options
This page represents one of the basic navigation layout that I use. It uses a top tabbed navigational scheme. I really like this navigational layout because it allows me to have some extra space on the right site of the content area of the design if I chose.
This is really nice to have for sites that may need to have comments on content areas (as I do at times on this site), need to have a place for pictures or an ordering table on the right, or just want a space that allows for testimonials, etc. that will be easily seen by customers.
Having this space for testimonials can be very effective - web research shows that people do like testimonials, but rarely will actually click on a link to get to a testimonial page. But integrating the testimonials into a page's layout is effective, and this navigational scheme allows you do easily do this.
The down side of top tabbed navigation is that it just isn't quite as usable as side navigation. By side navigation, I mean having buttons or links on the side of the page that represent your main navigational choices.
Side navigation has just been around longer on the web, and people are somewhat more familiar with it. Top navigation has become much more apparent on the web in the last few years, and many big sites like Amazon use it as the foundation of their navigational layout. But side navigation is just a bit more ingrained in web users, so it is a bit safer way to go. While I used to use side navigation, these days I use the top tabbed navigation because I like how it allows me to have the column on the right if I wish.
Setting up the Navigation for the Baby Carrier Site
For the My Favorite Baby Carrier site, though, I first started with a side navigational layout that I've used for years. The downside to using side navigation was that we couldn't have customer testimonials on the right side of the page, but I could still put snippets at the top of the page or below the navigation on the left. Here is how the Side Navigation Template looked.
After rolling out the site and testing it for a few months, though, I decided instead to redo the site with a Top Navigational Layout. Why? Simple - the top navigational template converted better. That is, when I tested the two types of navigational layout options, we had a higher rate of people ultimately buying when they were using the top navigation layout.
Ultimately, I went to a CSS based design that had a much better graphic look and had side navigation. This just presented a better visual look for the site, and conversion was again higher. I found the template online, and did a lot of modification of it to get it to work. But you could certainly find a template like this yourself and have it as the basis for your designer to work off if you wish.
But back to the My Favorite Baby Carrier site's navigation. This completed the areas that will show up on our content navigation (the main top tabbed navigation area). Like all my other sites, I will put the more "administrative" navigational links on a separate bar under the Logo area.
On this site, that includes the links to the about us, contact us, warranty and shipping, and privacy and security. I can't fit all the navigational areas I want to on this one bar, so I've broken out a couple that get a lot of questions to make sure people see them - the money back trial and shipping time to the customers - and I show these as separate links on the main page and on the Ergo carrier page.
And I also make sure that there is a visual link to the shopping cart in this area as well - just to make sure a customer can easily get to the checkout page from any page if they wish. This is important in case a customer first puts something into the cart and then goes back to look at other products or information on the site. Having a cart link will allow them to quickly get back to the checkout page when they are ready.
This completed the basic navigational layout for the site. And I've repeated these links at the bottom of the pages to make sure they people can easily find them.
How to Handle Sub categories in the Navigation
The next step was to see about setting the navigation for any sub categories. That is, any areas where there will be any additional navigational choices when they reach the basic category page. In the original design of the Baby Carrier site, there was only one category that had sub categories - and this was the comparison page.
I wanted to make sure that people landing on this page would quickly see what comparison options they might have. So on the comparison page, I didn't use much copy, but instead highlighted the links to the comparison table and the three comparison pages she had created. Once they clicked on a link, they would go to one of the specific comparison pages, and the general Comparison page link would still be available if they wanted to go back to the main page and pick another.
In this case, I didn't add these sub categories as links below the main Comparison button - I just didn't feel that these pages warranted their own navigational buttons. But it I had felt that they were important sub categories that should show up as separate navigational elements ( so these sub pages would be visually apparent in the navigation itself and allow people to click on any sub page from any other sub page (rather than having to click back to the main category page first to get a different comparison page))
I easily could have by adding a subcategory bar under the main tabbed navigation element. How would this look - well this page's navigation is an example of this. If you look at the navigation at top, I've put in sub navigation that has links to each of the 7 Steps for this section.
As you can see, these days I handle it differently. On this page, I put the sub navigation in its own box below the headline that is at the right of the copy. This works well, and clearly shows the content you can find in this particular section.
Use Standard Navigational Choices
This points out a vital part of using navigation on the site. Your site's navigation should look like and work like the standard types of navigation used on the web. We don't want people to get confused on your site, and have to try to figure out some cute navigational scheme that is unique to your site. In this sense, the blander the better - and that is why my two navigational schemes work like the basic top tabbed and side navigation seen throughout the web.
Also, if you notice, I don't use any sort of drop down or roll over navigation on my sites. That is because this kind of navigation just isn't as usable. For example, you have to move the cursor over a drop down navigation button to get the navigational information to appear.
There is no way of knowing this before you actually put the cursor on the link - so only those people familiar with drop down navigation, and who think it might be working on your site, will even know to try to find the navigation by placing the cursor over the main navigational item.
Also, many people have trouble then placing the cursor on the correct part of the drop down list to then click to the area they are working on. This all just adds to high a degree of difficulty for a site trying to make it as easy as possible for customers to find information and buy your products.
Similarly, roll over buttons add nothing to the navigation's usability. It really is best to keep the navigational scheme as clean and easy to use as possible. Go to big Ecommerce sites like Amazon and you will see how hard they work to keep the navigation usable - no drop downs or rollovers in sight. That is why I use these two basic layouts for every site I do - either the top tabbed navigation or the side button navigation.
Add Search to Your Site?
One other thing you may want to consider in terms of navigation is whether you want to have some sort of search function for your site. It is something to consider, since usability studies show that a good percentage of people will use the search function as the first way they try to navigate the site.
I don't use a search function on my sites as a rule, simply because they are sites focusing on a small niche. That means that mostly they have few products, and the basic navigational scheme allows them to easily go to wherever they need to within the site. We are considering one for the Futon Covers Online site since it carries so many types of covers, but it is still hard to find a search tool that works well as a product catalog type search. So for now we are sticking with just concentrating on making the category navigation more usable to make the site easier for customers to navigate.
Need a Site Map?
Lastly, you will see that many people have site maps for their site. These are too help out if people get lost and just can't find what they want. I have used these from time to time, but I just didn't see people using them much on my smaller, niche sites.
So I don't really use them anymore, instead I concentrate on trying to make the basic site navigation work so well people won't have need of a site map. But if you do a large site you may need to do one. And for sites that have lots of products, like the Futon Covers site, you may need to do an equivalent type of thing for your products - a product page that has laid out all your products with links to each.
Lastly, if your site is large and you are concerned that the search engines may not be spidering your whole site, you can add in a Site Map that is linked from your home page. This Site Map will then allow the search engine spider to find all your internal pages easily - just as long as you break out all your internal pages in your site map.
