Good navigation is the most important aspect of a well designed website. If the visitor is not presented with a clear navigation, it won't matter how well your site is designed, it is highly likely that they will leave your page in a matter of seconds. It is a very tough challenge to create a meaningful and unambiguous yet stylish navigation that allows users to view content easily.
Some of the most important rules of a good navigation are;
1- Visibility: Make sure that your navigation is one of the first things that catches the eye. Do not make it obscure. Don't let it get hidden because of clutter or problematic placement.
2- Consistency: Make certain it has a certain style and placement that it keeps on every page.
3- Clarity: Make sure that every item in the menu is %100 understandable. No one likes to guess where the link will take them. Use either clear names, or little explanations, hover titles are a good way as well. If you are using thumbnail images as links in your menu, make sure they are clarified one way or another.
4- Creativity: Creative navigation will always make your site stand out more, just make sure you don't overdo it, sometimes simplicity is the real creativity.
Good Examples of Stylish Navigation
It is both stylish and easy to use. Very clear menu with a classic top tier placement.
Clear well designed navigation. Nice use of typography.
This is especially for those designing blogs, very slick and clear navigation ina 3 column design. Nice use of sidebars and top level menu design.
A very good example of how to fit massive amounts of content into a navigation in a stylish way.
Clear, playful, hand-drawn and animated navigation.
Simplicity, minimalist design, left aligned side navigation.
Nice clear navigation.
Playful navigation consistent with the style and content of the page, usability is top-notch.
Very simple and very attractive, everything is easy to follow and you always get to where you want to go.
Creative way of categorization. Easy to follow, the only problem is it is a bit space consuming.
Interesting and creative menu design. Takes a little bit of getting used to but the filter and sorting menu is a must see.
Impressive use of top tier navigation, clear simple and yet stylish.
Good example of Apple inspired navigation, everything is consistent and clear.
Little explanations when you hover over the menu items is a great way of guiding your visitors through your site.
Another clear navigation
Very slick navigation. 2 tier top level navigation, the sub tier works especially nice in works section. It is a bit graphic heavy when you use the works next, previous project navigation, but it looks really cool.
Unconventional right-side tabbed navigation does actually work very well in this site. Scroll down to see how the navigation changes style beautifully.
Also see these...
And when it fails....
First of you are presented with bouncing links that kind of sattle later on. And guess what not everything that looks like a link is clickable, not a very satisyfying navigation for a visitor.
Seriously.. where is the navigation. Am I supposed click on those bottles, is that it?
Don't get fooled by the top lunch and dinner items, they are unclickable. There is a small thing under the disturbing video called navigation, well it seems to work if you refresh the page 10 times.
When simplicity fails miserably. Worst use of top tier navigation. It looks like a word document rather than a webpage. And that isn't the worst part, just go on, decrease the size of your browser window and see what happens.
Wow simply amazing, the middle menu runs away when you move your mouse to click. Plus the content font is so small that it is impossible to read. Check out the news section and you will see.
Menu items continuously change into images that don't give any clues to what they are connected. Very irritating navigation.
.................................................................................................................................
