Navigation Exploration - Part 1

A lot of people fret over creating a perfect navigation, and for relatively good reason. Navigations are the key to any website, and it's what allows people to find your content. If your navigation is difficult to work with and needs an instruction manual to learn how to use, then your users will just head on over to the "back" button and choose another site. There are some key things to consider when choosing to make navigations, such as space, color, design, etc. But we can start small.

Any important site on the web today takes careful consideration of their navigation placement. This is very important, because if the user can't actually see the navigation, they may have a hard time using it. However, you don't want the navigation to be smack-dab in the middle of the page, because that's where the user is going to be spending their time with your content. So, there are two popular placements for navigations: at the top near the header, or off to the left/right side.







The way to decide which one to choose depends on the amount of content that you have, and the type of site you are designing. Let's examine these each and weigh the pros and cons.

Head Nav's

The main types of header navigations are sites that only have about 7-8 main pages. I say main because you may have smaller pages that branch off of your main pages, but they do not actually need a place in the header. This saves room for other important pages that the user may specifically be looking for. These types of menu's can be incorporated into almost any site, and they work well. Some websites will have headers with a main menu, and then a sub-menu. A good example of this is on the social networking site Digg.com:



Digg incorporates searches for the top stories by clicking on a specific category, and then you can click on sub-categories to choose from an even larger list. This can be very helpful on many different types of business sites. One of my favorite sites to incorporate this double menu style design is Template Monster.com:



Note that there are many, many websites that will use this strategy, so there are many other sites that have this design. The ones I have posted here are just for examples.

The positives about using menus like these are that it is very flexible, such as design wise. Since you only need to worry about it fitting into the length of your website, you can make very creative menus with different styles of fonts and graphics, which can bring out the ultimate creative side in many designers. These are also good menu styles to choose because it doesn't overload the user when they look at it, which can sometimes happen when they see a long list menu off to the side.

Side Nav's

Ah, the fantastic side navigation. Who doesn't love it, right?(I can think of a few thousand). The idea behind side navigations is that you have a lot of pages on your website, all with very important information that can't be linked from other pages. There can be websites with lots of information and do this in the header using JavaScript to create a drop-down style of a menu, but there are many issues with those.



First issue with these is that they look really outdated. With all of the new Web 2.0 styles of navigations coming out, these old CSS and JavaScript-based menus do not mix well. Sometimes, websites do have the ability to pull off a nice look to them, but the majority of them just look foolish and unimpressive(in my opinion). Another issue with them is that it can be stressful getting exactly what you want to drop down.

Say you want to go under a navigation titled "main", and underneath that there is a section called "about". You move your mouse towards the about link and BAM! All of the sudden, your mouse has somehow triggered the next navigation menu in line, and you now have to work your way back to the first nav to click on about. Pain in the ass, huh?

This type of thing will not usually happen with drop-downs, but when they do happen, it can be such a pain to deal with. That's why I think it is a lot easier to just stay on the safe side with either a simple header navigation or a side nav.

Wow, got a little off the topic there, but I think I got my point across with using drop-down navigations.

Anyways, back to the side nav's. The most common type of website to use a straight list of links on the side is... DING DING DING! Gaming websites. Want to know why? Because video games have a lot to cover. Secrets, enemies, strategies, abilities, items, stats, levels, characters, plot...and that's just for one game!

Now don't get me wrong, there are most certainly other websites that use this style of navigation, but game websites and fan-sites(which are websites created by fans of certain video game series') are the greatest users of these. The most common layout with these styles is the three-column layout, meaning that there are three columns that hold your website stuff:



Your left and right columns will usually hold your links, affiliates, other helpful sites, etc. Then your middle column will hold all of your data and such. However, we can save the site designs for another entry.

The pro's of using a side navigation is definitely the simplicity of it. You do not need to create images and choose complex fonts to fit the need, you can just choose the regular font that fits your site, and then edit the CSS to create some pretty rollovers with the a:link, a:visited, a:hover, and a:active states. You also don't need to just list all the links in a row, nor would I advise that. I would say that you could create some type of small little themed graphic or styled header font to split up the navigation into sections.

When choosing placement of your navigation, try to take these both into consideration. When choosing between the two, it shouldn't be too hard. Do you have so much important information that it would just be easier to list it along the side, or should you try to make it a navigation at the top of the page? A good idea with most business websites and popular businesses of adults is to choose a header nav, because not all adults these days are familiar with websites and using navigations, and long lists may cause dizziness and indigestion :).

So until the next entry, hopefully this filled you up a little bit on the understanding of a great navigation system.