Flight of the Navigation

18 03 2009

So the topic today is Navgation. Lian has asked us to find examples of different forms of web navigation. There are several different kinds. I am going to provide you with several different examples, since a picture is worth a thousand words and all.
I think it’s all about a matter of preference when it comes to navigation since we all navigate sites in different ways. But there does seem to be the common theme of having a navigation bar on the left hand side. Lian says this is due to the fact we read left to right. A simple idea that seems to be forgotten by website designers from time to time. So check out these different examples and let me know which you like best.

First up is a menu tree navigation. The information is placed under several major topic headings and several sub-headings. Also the menu remains visible on any page you navigate to within the site. Here is an example

example of Menu Tree navigation from XP Menu Tree

example of Menu Tree navigation

Now we’re onto tab navigation.This is where the information is displayed under large headings (usually shaped like tabs) which then leads you down to the sub-headings. The tabs are visible on every page you visit within the site. Have a look at this tab navigation.

Tab navigation from NZQA website

Tab navigation from NZQA website

Our next form of naviagtion is index navigation. This is where the information is displayed in a table of contents that displays all the information on the site. This is a very simple way of navigating as all the information is in one place and the user doesn’t have to go through sub menus to find what they are looking for. Here is an example.

example of index navigation by Gossip Girl Style

example of index navigation by Gossip Girl Style

Next up is pull/drop down navigation. This method uses javascript. When you roll over the menu it appears and when you move the cursor away it disappears. This shouldn’t be the only source of navigation on your site as not all users have javascript. Have a look at this example.

example of a drop down menu from Flight Centre

example of a drop down menu from Flight Centre

Another way to navigate is through page turning navigation. This is a simple form of navigation that allows the user to go forwards and backwards only. This is not the only form of navigation on a site as it makes it difficult for the user to navigate quickly to areas of interest, but it is usually used in picture or gallery sections of a site. Here is an example to take a look at.pageturn

Yet another form of navigation is metaphor navigation. This is where you click on part of a scene or image and it navigates you to a particular area on the site, such as click an animal or person. It is especially popular on childrens’ sites. Take a look.

metaphor navigatioin from Disney Channel

metaphor navigatioin from Disney Channel

Icons is next up. They are pretty self explanatory. The icon represents what you are clicking. Such as a home to take you home or a phone for the contacts section. The following is a snazzy example of icons.

icon navigation from the UK Cats Protection

icon navigation from the UK Cats Protection

Last but not least is combination. Once again a self explanatory one. But it’s going to get an example anyway. Most sites these days use combination forms of navigation to cater to all the different users who come to their site. a pretty smart idea in my opinion. So have a look at this site.

combination navigation made up of tabs, drop down and icons from ASB

combination navigation made up of tabs, drop down and icons from ASB

So there we go. A little bit of information for you all incase you ever wanted to know about site navigation. Or just something to keep in mind next time you’re surfing your favourite website.

Advertisements

Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: