1stwebdesigner

Posted by ryan | Posted on 17:59

Posted: 06 Dec 2010 02:00 AM PST

A website is like a magazine where people search for information. The table of contents of a magazine is like the navigation of a website. Table of contents provides an overview of your magazine, while a navigation also shows on what your viewers should expect to see on your website. Both serves as pathways for your viewers on how they can read your mag or explore your website.

Whenever I think of what is the most important task a web designer could do, I always end up thinking that it should be the creation of good navigation. It must be well-designed in a user-friendly manner that the moment the viewer sees it, they instantly understand how it is used and what is it for. A navigation must also be creatively done, it is one of the elements you can find on a website where you can capture a viewer’s attention.

Components of Good Website Navigation:

1. Primary Navigation

Primary navigation are the main menus or categories of a website. These are considered as the most important links that can be seen the moment your website loads. Most of the primary navigation consists of Home, About Us, Contact Us and other links depending on what kind of website you are creating.

Primary navigation sample

Keep in mind that primary navigation should not have more than seven or eight links. Choose the most important links and put them as the main menus and the rest will be placed on the sub-menus.

2. Secondary Navigation

Secondary navigation are the secondary links or sub-menus of a website. Usually, these are to be found from a drop down menu or a fly-out menu.

A drop down menu is when a user mouse over and click on a menu button, then sub-menus will be shown.

Sample Image of a Drop Down Menu

A flyout menu is when a user hovers onto a menu button, then sub-menus will appear. In this case, the user doesn’t have to click the button for the sub-menus to appear.

Fly out menu sample

Sample Image of a Flyout Menu

3. Position of Menus

It is important that you position your menus on a place where your viewers can easily see them.

Usually, horizontal navigation is put on top and under the header of your website. While a vertical navigation, this is commonly put on the left side of the website.

To add up on to this, always put your menus from left to right since most viewers start reading from the left.

Left-to-right-navigation

Even you put your links from right to left, your viewers will still read them starting from left. Take the image below as an example. Even the links are put into a right to left position, viewers will still read them starting from the Contact Us, Blog, About Us and then Home.

Right-to-left-navigation

4. Size of Buttons and Menu Label

The size of your menus must be noticeable, but not too large that they would occupy too much space. Adjust them where they can be seen easily by your visitors while maintaining a professional look.

Wrong-size-menu

When putting menu labels, make sure they are readable in size. Also, choose a font color that is in contrast with the color of your button. If the color of your button is light, use dark color for your menu label and vice versa.

Correct-size-menu

5. Color of Menu Buttons

Colors are one way to entice the visitors of your website. Use a color for your menus that is in contrast with the background color of your website. This way, you can capture the attention of your viewers and your buttons will stand out with the other elements of your website.

Take a look at this example. Even the buttons have the same color as the background, it still stands out for it has button-click effect and the text color is white.

6. Icons and Effects

Icons are great way to differentiate your buttons and they also inform users on what viewers could expect on that link. Also, hover effects is a good way to attract viewers’ attention. This also informs the visitor that they can click the button which looks different from the others. You can also put a button-click effect to inform your viewers on what button they clicked.

To give you more idea about this, I have here a good example of website navigation. The designer of PixelResort put icons on top of each menu label to represent the link. Also, it has a hover effect (glowing circle) and a button-click effect (arrow pointing on the link). In this case, the page is on the Blog link and the mouse pointer of the viewer is put on the Goodies link.

And my last tip for you…

7. The less click, the better.

Viewers tend to be impatient when searching for information, they want to seek what they are searching very quickly. Make sure that your navigation respond as quickly as possible to your viewers’ instincts.

In this article, I will highlight amazing horizontal and vertical navigations for your inspiration. First, let us take a look at horizontal navigation.

Horizontal Navigation

Horizontal navigation is the widely used navigation of web designers today. Usually, the navigation bar is placed right under the header.

Good Characteristics:

1. It occupies less space

Horizontal navigation is mostly used by web designers for it occupies less space, because it is placed at the top part of the website. Then, the rest of the spaces you can use for your content.

2. More noticeable

Our eyes first notice elements of the website that are placed on the center, that is why horizontal menus are more noticeable since they are placed on the top and center part of the website.

3. Easier to use

Viewers find horizontal navigation easier to use. Comparing it to vertical navigation, you still have to move your mouse pointer on the left part of the screen (or sometimes right) to click the menus. If the navigation is horizontally placed, you just have to move your pointer upward to click a menu button.

4. Viewers are already used to it

Since it is the mostly used navigation, viewers always expect that all websites have this type of navigation.

Bad Characteristics:

1. Limited space for your menus

When using horizontal navigation, you are limited on the width space of your website and this still depends on the layout of your website.

2. Can only be used if number of menus are already known

Horizontal navigation can only be used if the number of your menus is already fixed, because the size and design depends on the number of menus to be placed.

Here are some example of horizontal navigation for your inspiration:

1. Rayman

2. Davroc Interiors

3. Rzepak

4. Owltastic

5. Sarah Hyland

6. Racket

7. Kinder Aktuell

8. Acko

9. Red Velvet Art (Horizontal Navigation)

10. Xedum

11. Design Nut

12. Jay Taylor Design

13. Mac Rabbit

14. Getraenke Kukral

15. Noizi Kidz

16. Chris Guille Beau

17. Small Stone Recordings

18. Max and Lous

19. Loodo

20. Boukarabila

21. Jiri Tvrdek

22. Ungarbage

23. Duarte Pires

24. CSS Beauty

25. Manndible Cafe

Now let us go to vertical navigation.

Vertical Navigation

Vertical navigation are usually placed on the left side of a website and the menus are placed from the top to bottom, like a ladder.

Good Characteristics:

1. It allows grouping of menus

Vertical navigation allows you to group your menus and place sub-menus under each main category. Unlike in horizontal navigation, you still need to create a drop down menu for the sub-menus.

2. It is easier to add or remove menus

If you are trying to put more or remove menus in the future, you can use vertical navigation. It will be easier for you to add or remove menus without resizing each buttons.

Bad Characteristics:

1. It occupies a lot of space

Usually, menus in vertical navigation are placed on the left side of the website and this occupies a lot of space on the whole website template. Unlike when using horizontal navigation, you are just using the top part of your website.

2. Limited characters for your menu label

For your buttons not to occupy too much space, you are limited to few characters when putting labels for your menu. If you will be putting many characters, tendency is the font size of your menu label would be small or you will occupy too much space on your template.

3. Scrolling down is needed for websites with many menu buttons

If you have several menus for your website, the tendency is that your viewers need to scroll down their to see the other menus placed at the bottom part.

4. Viewers are not used to it

Viewers expect that a website should always have a horizontal navigation, since it is mostly used by web designers. But nowadays, there are already websites that are using vertical navigation and are designed creatively to make it easier and noticeable for visitors.

To give you more idea about vertical navigations, take a look at these websites.