Navigation elements can make or break any web site. If a user cannot find what they are looking for or get lost in a sea of nonsense than you as a designer will most likely have lost a user. Embracing usability as a standard for your designs can have a big impact on your ‘residual’ audience.

That being said often navigational elements are one of the toughest issues you can face in a web design project. Determining the best way for users to move around in your site is generally a guessing game and often web developers tend to use their favorite methods.

I like to let the nature of the content and the depth of the site map determine navigational style. For example if your are a small company with few pages, you can use simple tabs or simple link lists. If you are a large e-commerce site you may use lists for sub pages and breadcumbs to maintain hierarchy.

There are some cases when you really just do not know. In that case, perform a study. A recent presentation to the Usability Professionals Association (UPA) 2005 Conference has done just that by studying website navigation methods. They have also released the complete paper.

The study compares six different navigational methods:

1) Yahoo Style (list everything)
2) Rollover (one link with ‘tooltip’)
3) Flash (eeew)
4) Expand / Collapse
5) Drop-downs (eeew)
6) Fly-outs

To make a long story short, the Yahoo Style won because it caused less ‘error’ (which includes getting lost and/or not finding what you were looking for) in the user experience.

UPDATE: thanks to a comment from Klas I mistyped and said Yahoo Style won when in fact it was the dropdown.

I’m still a proponent of sliders.

Read More: A Study of Website Navigation Methods

tags: web design, css, design, web