Web surfers are basically an impatient bunch and if a website is hard to figure out because the links are not obvious, they will click away never to return. Website navigation is one of the most crucial elements in determining the effectiveness of a website. This article discuses the basic principle of designing website navigation.
To be effective website navigation must first and foremost make sense to the average person. While there is always room for creativity, well-designed websites tend to have similar navigation layouts.
As a web designer you must always keep in mind the basic purpose of the website and the intended audience when designing navigational elements. Most websites exist to either inform the visitor about a product or service or to actually sell the product or service. Therefore there are some basic guidelines to follow:
Make sure all navigational elements are clearly links by using standard conventions for links such as buttons, menus, underlining the text or changing color on mouse. Resist the temptation to use clever or ambiguous names for links.
When using non-conventional links, explicitly tell the visitor that this is a link. For example, suppose you design a web page where you want to use a map showing several different cities and want to let the user click on the city name to pull up information about that city. Just make sure you tell the user to click on the city name to get more information about that city.
Remember the “Three Click Rule” that most professional web designers use. Studies have shown that most users will not click more than three links to get to the information they want. So every page on your website should be reachable within three clicks.
I do not recommend using a flash movie or other type of splash page on your website. Keep the web page design simple yet attractive. But if you do decide to use one, make certain you use the META REFRESH tag to take the visitor automatically to your home page after a few seconds and provide a clickable, clearly marked button or link so the visitor can skip the entry page and go directly to your home page otherwise a large percentage of visitors will just click away never to return. Remember most visitors are looking for information not entertainment.
Navigation Element Locations
Top Menus – a top of the page menu bar is usually located directly below the page header graphic that contains the site logo. These menu items may be single links, drop down menus, or expanding menus. Each menu item can be represented by a graphic or just text. In ether case a hyperlink is associated with each item that the visitor can click on to get to the information described.
Left Side Navigation – left side navigation is typically implemented as either a column or text area on the left top portion of the webpage. Like the top menu, each item can be a single link or an expanding menu.
Right Side Navigation – right side navigation is not used that often, but when used, it is implemented as a column or text area on the top right side of the webpage. Most designers use this area for advertisements rather than site navigation.
Bottom Menus – bottom menus can be either a menu bar or footer. Menu bars use either graphics or text links while footers almost exclusively use text links.
Important Navigation Elements
Internal Page Links – Every page on the website should be within two or three clicks from the home page. Important pages should be ONE click away. The type of website will determine which links are more prominently displayed.
Login Boxes – login boxes should be prominently displayed. Common locations are top left, top right or inside the page header.
Shopping Carts – if you use a shopping cart to sell your products, you should prominently display a view cart button on each page. The most commonly used location is the top right side just below or as part of the header.
Order Buttons – if you use individual order buttons they should be large and visible. The fewer clicks it takes to get to your order page, the more orders you will get.
Breadcrumbs – breadcrumbs are both links and a graphical representation of where you are in the site. Breadcrumbs are usually located at the top left of the page just under the header. Each word is a link back to the previous page. They are in the form
Home-> Articles-> Marketing
External Links – external links can be used anywhere but are most frequently used inside the text areas on a website. They may be references to more information located on another site, to recommended products, or to almost anything else.
Advertisements – advertisements are usually either a graphic or text with an associated hyperlink. Ads can be placed anywhere on a webpage but are usually used just under the header banner, down the right hand side of the page, under navigation elements on the left margin, across the bottom of the page or even interspersed within the test areas of the page. Studies show that ads “above the fold” are more effective.
(“Above the fold” refers to the area of a webpage that is visible without having to scroll.)
Downloadable Items – if you offer downloadable items such as audio, video or pdf files, make sure that you tell the user haw big the file is and whether they need an application to use the file. If they do an application, provide a link to the application. For example, provide a link to the free Acrobat reader if you offer pdf files.
Site Map – A site map is a good way to layout your entire site for your visitor. (Search engine spyders like them too.) It is just a hierarchical listing of every page on your site with a clickable hyperlink to that page.
Summary
A good navigation system can increase the numbers of pages viewed by each visitor. This in turn can increase signups, customers, sales, members or whatever it is your site is designed to do and make your website more successful.
To be effective website navigation must first and foremost make sense to the average person. While there is always room for creativity, well-designed websites tend to have similar navigation layouts.
As a web designer you must always keep in mind the basic purpose of the website and the intended audience when designing navigational elements. Most websites exist to either inform the visitor about a product or service or to actually sell the product or service. Therefore there are some basic guidelines to follow:
Make sure all navigational elements are clearly links by using standard conventions for links such as buttons, menus, underlining the text or changing color on mouse. Resist the temptation to use clever or ambiguous names for links.
When using non-conventional links, explicitly tell the visitor that this is a link. For example, suppose you design a web page where you want to use a map showing several different cities and want to let the user click on the city name to pull up information about that city. Just make sure you tell the user to click on the city name to get more information about that city.
Remember the “Three Click Rule” that most professional web designers use. Studies have shown that most users will not click more than three links to get to the information they want. So every page on your website should be reachable within three clicks.
I do not recommend using a flash movie or other type of splash page on your website. Keep the web page design simple yet attractive. But if you do decide to use one, make certain you use the META REFRESH tag to take the visitor automatically to your home page after a few seconds and provide a clickable, clearly marked button or link so the visitor can skip the entry page and go directly to your home page otherwise a large percentage of visitors will just click away never to return. Remember most visitors are looking for information not entertainment.
Navigation Element Locations
Top Menus – a top of the page menu bar is usually located directly below the page header graphic that contains the site logo. These menu items may be single links, drop down menus, or expanding menus. Each menu item can be represented by a graphic or just text. In ether case a hyperlink is associated with each item that the visitor can click on to get to the information described.
Left Side Navigation – left side navigation is typically implemented as either a column or text area on the left top portion of the webpage. Like the top menu, each item can be a single link or an expanding menu.
Right Side Navigation – right side navigation is not used that often, but when used, it is implemented as a column or text area on the top right side of the webpage. Most designers use this area for advertisements rather than site navigation.
Bottom Menus – bottom menus can be either a menu bar or footer. Menu bars use either graphics or text links while footers almost exclusively use text links.
Important Navigation Elements
Internal Page Links – Every page on the website should be within two or three clicks from the home page. Important pages should be ONE click away. The type of website will determine which links are more prominently displayed.
Login Boxes – login boxes should be prominently displayed. Common locations are top left, top right or inside the page header.
Shopping Carts – if you use a shopping cart to sell your products, you should prominently display a view cart button on each page. The most commonly used location is the top right side just below or as part of the header.
Order Buttons – if you use individual order buttons they should be large and visible. The fewer clicks it takes to get to your order page, the more orders you will get.
Breadcrumbs – breadcrumbs are both links and a graphical representation of where you are in the site. Breadcrumbs are usually located at the top left of the page just under the header. Each word is a link back to the previous page. They are in the form
Home-> Articles-> Marketing
External Links – external links can be used anywhere but are most frequently used inside the text areas on a website. They may be references to more information located on another site, to recommended products, or to almost anything else.
Advertisements – advertisements are usually either a graphic or text with an associated hyperlink. Ads can be placed anywhere on a webpage but are usually used just under the header banner, down the right hand side of the page, under navigation elements on the left margin, across the bottom of the page or even interspersed within the test areas of the page. Studies show that ads “above the fold” are more effective.
(“Above the fold” refers to the area of a webpage that is visible without having to scroll.)
Downloadable Items – if you offer downloadable items such as audio, video or pdf files, make sure that you tell the user haw big the file is and whether they need an application to use the file. If they do an application, provide a link to the application. For example, provide a link to the free Acrobat reader if you offer pdf files.
Site Map – A site map is a good way to layout your entire site for your visitor. (Search engine spyders like them too.) It is just a hierarchical listing of every page on your site with a clickable hyperlink to that page.
Summary
A good navigation system can increase the numbers of pages viewed by each visitor. This in turn can increase signups, customers, sales, members or whatever it is your site is designed to do and make your website more successful.