Navigation design for usability

Navigation should be instantly understandable to visitors. They are unlikely to want to spend time puzzling out how to get from one page to another on your site, so if your navigation is not intuitive the visitor may leave the site.

Navigation on a web page not only provides visitors with a means of seeing what other pages are on a web site, but also provides an indication of what those pages are about, and by implication what the web site is about.

Navigation position

Ensure that your navigation will be visible to visitors without the need to scroll. That means placing the navigation within the top 500 pixels of your page.

Group your navigation together in a navigation bar or panel. Visitors will expect navigation to be on the left or top of a page. Your page would be nearly impossible to navigate if the links were spread through the text.

Use recognizable navigation features

Historically, links have been written in blue text with an underline. The link would change to red on mouse over. This format is still the best way to make sure visitors realize your links are indeed links, however it is possible to make navigation perfectly recognizable without using this convention.

Text links on a white or light colored background should always be blue. An alternative to underlining the links is to make the links bold, then underline them on mouse over. The links will still stand out, but will be easier to read without the underline.

Navigation buttons or tabs are perfectly acceptable as long as they are grouped together. Ensure the colors and appearance change on mouse over as this confirms to the visitor that the button is definitely a link.

Be Consistent

Whatever format you choose for your navigation, be consistent. If you use underlined links on one part of the page, don't use links without underlines on another part of the page, and don't underline any non-link text.

Use common navigation throughout your site. Your visitor will become used to the style of your navigation as they begin to use the web site. They will become confused if the style of navigation changes from page to page. A confused visitor is an unhappy one and will most likely leave your site.

Navigation words

Text in your navigation should provide a one or two word summary of the page being linked. Your visitor will click on the link if it looks useful to them.

Avoid using symbols without supporting text. Use a picture of a house to indicate the home page by all means, but include the word home beneath it.

Avoid the use of frames

Frames are commonly used for navigation. Frames combine an html content page with an html navigation page. Unfortunately, a search engine will always direct a visitor to the most appropriate page on a site, and this is normally one of the html content pages. The page will work in it's own right, but would not include the navigation page, so visitors would not be able to navigate the web site.

Avoid frames. Use CSS instead.

Number of clicks

Ensure the visitor can navigate from any page on your site to any other page in 2 clicks, or at the most 3 clicks.

It takes time for every new page to load, and it is frustrating to have to click through a number of pages to get to the required page.

Consider accessibility

JavaScript is a very popular tool for creating drop-down menus. Unfortunately not everyone can read JavaScript. Visitors using Netscape browsers, many disabled people, and search engine robots are among those who may not be able to use drop down menus.

Drop down menus can be a useful navigational tool, however it is important to include redundant links (text based links elsewhere on the page) to make the site accessible to these groups.


Next > Web page usability

HOME - ACCESSIBILITY - SEO - SPECIFICATION - CSS - USABILITY - STANDARDS

Introduction

Layout

Usability

Web images

Web Accessibility

Website Specification

Search Engine Optimisation

Learn CSS

Web Design Guide

Web Standards

Business web design
VORD Web Design