Website Navigation
Web Page Mistakes

Website navigation is important to the sucess of your website visitor’s experience to your website. The website’s navigation system is like a road map to all the different areas and information contained within the website.

Using a consistent navigation scheme from page to page helps the website visitor learn your website navigation system.

Types of Website Navigation

There are different types of website navigation:

• Hierarchical website navigation

  The structure of the website naviation is built from general to specific. This provides a clear, simple path to all the web pages from anywhere on the website.

• Global website navigation

  Global website navigation shows the top level sections/pages of the website. It is available on each page and lists the main content sections/pages of the website.

• Local website navigation

  Local navigation would the links with the text of your web pages, linking to other pages within the website.

Styles of Website Navigation

Styles of website navigation refers to how the navigation system is presented.

• Text Links

  Text links are words (text) which are surrounded by the anchor set of tags to create clickable text which takes the visitor to another web page within your website, a downloadable document from your website, or to another website on the Internet.

• Breadcrumbs

  Breadcrumb navigation shows the website visitor the path within your website to the page they are currently on.

• Navigation Bar

  A navigation bar is the collection of website navigation links all grouped together. A navigation bar can be horizontal or vertical.

• Tab Navigation

  Tab navigation is where the website navigations links appear as tabs, similar to the tabs you use in a binder to divide the contents into sections.

• Sitemap

  A sitemap is a page within your website that lists all the sections and web pages (if you don’t have too many) that are contained within the website. This is different from Google Sitemaps and Yahoo Sitemaps.

  A traditional sitemap provides navigation for your website visitors should they get lost, a shorter path to the different areas of the website for those who know what exactly they are looking for and a means for the search engines to find all the pages within your website.

• Dropdown Menu

  A dropdown menu is a style of website navigation where when the visitor places their mouse over a menu item, another menu is exposed. A dropdown menu can include a flyout menu (see next item).

  A dropdown menu system can create accessibility issues and a problem as far as the search engines not being able to read the links in the menu, but if constructed properly, these issues can be overcome.

• Flyout Menu

  A flyout menu is constructed similar to the dropdown menu. When the visitor places their mouse over a link, another menu “flys out”, usually to the right, from the link where the mouse is placed.

  Flyout menus face the same challenges as dropdown menus but if constructed properly, they can be accessible and readable by the search engines.

• Named Anchors

  Named anchors are the type of links that take you directly to a spot on the current page or on another web page.

Website Navigation Use

To be effective, the website navigation system needs:

• To be consistent throughout the website.

  The website visitors will learn, through repetition, how to get around the website.

• The main navigation links kept together.

  This makes it easier for the visitor to get to the main areas of the website.

• Reduced clutter by grouping links into sections.

  If the list of website navigation links are grouped into sections and each section has only 5-7 links, this will make it easier to read the navigation scheme.

• Minimal clicking to get to where the visitor wants to get to.

  If the number of clicks to the web page the visitor wishes to visit is minimal, this leads to a better experience.

  Some visitors can become confused or impatient when clicking a bunch of links to get to where they want to be. In large websites, this can be difficult to reduce. Using breadcrumbs is one way to help the visitor see where they are within the website and the path back up the navigation path they took.

Creating the website navigation system at the planning stage of the website will effect the overall design of the web page layout and help develop the overall plan for the website.

Further Reading

Jakob Nielsen’s Alertbox Newsletter of March 31, 2008 points out:

“Between the ages of 25 and 60, people’s ability to use websites declines by 0.8% per year — mostly because they spend more time per page, but also because of navigation difficulties. …problem is that people have more trouble navigating websites as they age….”

Middle-Aged Users’ Declining Web Performance (Jakob Nielsen’s Alertbox)

Don’t Make Me Think,A Common Sense Approach to Web Usability, Second Edition by Steve Krug is a short book written for web designers, website owners and anyone else involved in the development of a website. Well worth reading as Mr. Krug works through website navigation and other issues related to the usability of websites.

Web Pages That Suck and Son of Web Pages That Suck by Vincent Flanders and co authors is another good set of books to read. Mr. Flanders coined the phrase “meatless navigation” for navigation systems that leave the website visitors clueless as to what each symbol in the website navigation is for.

Colour blindness on the Web is written by a person with colour blindness. Within the article he points out:

“…aspect of red-seeming-black that causes me problems on the Web. The issue arises when designers specify links to be dark red but don’t underline or embolden them. This means the link is indistinguishable from the rest of the text. …So be careful with your link colours (or simply make sure they are all underlined or emboldened)…”

Colour blindness on the Web

Importance of link architecture – Part of Google Webmaster Central Blog’s Linking series October 2008.

“…Link architecture—the method of internal linking on your site—is a crucial step in site design if you want your site indexed by search engines….”

Importance of link architecture.

Copyright © 2005 - 2024 Web Page Mistakes. All rights reserved.

What's next?

Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:

This entry was last modified January 6, 2013 at 12:21 pm and is filed under Site Design . You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.