Wednesday, July 11, 2007

Navigation Exploration - Part 2

In the last segment I talked a bit about two common types of navigation, at lease placement and interactivity-wise. Now I want to go a bit more in-depth with these and really examine some new types of navigations that you can use on your sites. If you are new to web development, the best place to get inspiration for new ideas is off of other people. A neat blog entry I found is actually on a German blog called Dr. Web Blog, which has loads of pictures and links to sites that exhibit the new trend of navigation menus: Web 2.0 Navigations.

Dr. Web Blog

So when choosing what type of navigation to use, it's important to sit back and get a feel for the site. If you are designing a website for a small business, then you will probably need anywhere from 4 to 8 links in your navigation, which could easily be fit into the head section of the web page. If you have around that range, it's a good opportunity to let the creativity fly. Browsing around other websites that have similar themes can help you get an idea about what exactly you are trying to do.

Some sites that use good simple themed navigations are mostly the new Web 2.0 sites. Technorati has a great navigation. Even though the site is an immense search-engine style, the navigation is just a small bar near the header. It contains only the main links that you will need, and that's it. Maybe a little too simple for this monster of a site, but a good navigation none the less.

Another really simple navigation is found at Stikipad. This is an online wiki where you can store information. Although this is not a hugely popular site, it would still need to have some staple links in the navigation. As for how they did it, it was just blended into the very head of the website right next to the logo. I am actually a big fan of this navigation because it is very easy to spot where it is, whatever page you are on us underlined with a large green bar, and it's just easy to understand. If you are questioning how to lay out a navigation, I would suggest taking a look here for inspiration.

Let's say that you have a lot of information that needs to be accessible on the site, so you actually need the navigation to have some space. However, you don't want to confuse older people who visit the site and look at a long list of links and go "this hurts my eyes too much!". Well, a simpler way could be either to have drop-down menus(yuck!) or to use tabs that open up sub-menus. Listed below are three computer websites: Best Buy, Circuit City, and CompUSA. Best Buy and Circuit City use the drop-down menus, while CompUSA uses a sub-menu style.

Best Buy has done a good job with their navigation. Although I am not a fan of the large drop-down menus, they did fit it in really nicely. Plus, once you mouse-over the buttons, the menu is very responsive and appears quickly. The Circuit City menu, however, takes a second for it to actually appear, which is tedious to get through the menu. Although the colors do match the site nicely, it's just a pain to wait when Best Buy's is much more responsive.

Both of the menus do fit nicely to the site either way, so that is one option to consider. Another to consider is loading up the different topics into sub topics and then allowing your visitors to sort of pick and choose which one they want to find. CompUSA uses this style of menus, and I find it pretty nice.

Some styles of this menu will change when you mouse over the area, and some you actually need to click on. Either way, they work very well for people. Even though you are still listing a lot of links, you are doing it horizontally, which is easier to read that vertically in a list.

Their pages take a little while to load as well, so it's not very responsive as some sites on the web that use this style of navigation. However, as you move through the topics, the top part of the menu changes the tab color to highlight where you are, which is nifty and helpful for the user to remember.

So as for choosing between the styles of menus, that's up to you. But once you find out what you want to use, just Google things to see what you like and what you can find. You may be very surprised with what comes up, and it may lead to a site that helps you design the navigation of your dreams.

No comments: