Types of Website Navigation

Wednesday, July 01, 2009 - (2194) Comments

image

There are a variety of ways to set up navigation on a website. Each type has its own purposes and advantages, as well as disadvantages. Read on for an overview of what they are.

Header Navigation

image

Putting your navigation in the header of your page makes a lot of sense. Most web visitors are used to looking for navigation either in the header or within a sidebar, so it automatically gives you a leg up on those who opt for more unique navigation in terms of usability. Header navigation can consist of links, buttons, JavaScript, or other dynamic links.

Advantages

  • Easily identifiable by visitors.
  • Excellent when you want navigation to really stand out.

Disadvantages

  • Can be difficult to use if you have to include a large number of links.
  • Might not work if the number of links you have changes regularly.

Sidebar Navigation

image

Sidebars are another obvious place for navigation. New visitors will automatically look to these areas for navigation elements in many cases. Sidebar navigation also gives a bit more flexibility than header navigation, especially if you have a lot of links you need to include.

Advantages

  • Very flexible in the way it can be implemented.
  • Size not limited by page width.
  • Easy to add or remove links without messing up the layout of the site.

Disadvantages

  • Can be unwieldy with really large numbers of links unless drop-downs or other dynamic content is used.
  • Can make links further down the page seem less important than those toward the top.
  • Can look cluttered if links aren't kept uniform.

Table of Contents

image

While these usually aren't actual tables, a list of related pages or content at the beginning of a page can be a very useful navigation method. These work especially well for sections within a site to make it easy to find articles on related topics. They can be used to link to different sections within the same page or to link to related pages.

Advantages

  • Easily accessible and usable by visitors.
  • Works well to showcase related content or different sections within a page.

Disadvantages

  • Can be unwieldy if there are a large number of links.
  • Not really appropriate for site-wide navigation.

Breadcrumbs

image

Breadcrumbs are an excellent secondary-navigation method that's especially useful for sites that have deep navigation (pages with multiple sub-pages where the sub-pages also have sub-pages, etc.) and really improve a site's usability. Breadcrumbs are usually text links that show the pages a visitor clicked through to get to the current page (or the parent pages for that particular page).

Advantages

  • Makes it easy for visitors to see how they got to the page they're on.
  • Allows visitors to easily move between related content.

Disadvantages

  • Can get cluttered if your site has very deep navigation.
  • Not appropriate for main site navigation.
  • Only lets you go back in navigation, not forward.

Tabs

image

Tabbed navigation is one of the most user-friendly forms of navigation out there. Tabs have a psychological effect on people that makes them more likely to click through to other areas. This is because tabs equate more with how we browse content in the real world (like tabs in a notebook or folder tabs). They're a great method for navigation between the major sections or pages on your site.

Advantages

  • Psychologically, they're more user-friendly than other navigation types.
  • Easily recognizable as navigation.

Disadvantages

  • Only work for small numbers of links.
  • Generally use graphics, which can slow your page load times (though usually not significantly if done properly).

Sitemaps

image

Sitemaps are an excellent way to make it easy for your visitors to find the exact page they're looking for. A sitemap is basically a hierarchical list of all the sections and pages within a website. They work really well on small- to medium-size sites with a few dozen pages.

Advantages

  • Very accessible and user-friendly.
  • Helps with search-engine optimization.

Disadvantages

  • Not appropriate for main navigation in most cases (it can work on very, very small sites).
  • Doesn't work well for navigation on very large sites (like those with hundreds of pages), though it does still help with SEO.

Search-Based Navigation

image

This type of navigation isn't used for primary navigation on very many websites. But it can be very handy on large sites where browsing for content can be nearly impossible. Search-based navigation works well within subsections of sites, too (such as in knowledge-base or help sections). While pretty much all sites should include a search function of some kind, it can be used for primary navigation on large sites where visitors are likely to have a good idea of what they're looking for. Just make sure that whatever engine you use for your search function works really, really well.

Advantages

  • Keeps a site's navigation very simple and user-friendly.
  • If done well, makes navigation of large sites much faster than browsing.

Disadvantages

  • Trickier to pull off well than manually-built navigation.
  • Some visitors may not know exactly what they're looking for, making it harder for them to navigate.

Combination Approaches

Combining any of the navigation types above is usually the best method. While the exact types will depend on your individual site requirements, a combination approach generally results in a more user-friendly and accessible website.

Lamp

Recent Comments

Picture of Tim Timson

Tim Timson says: September 30, 2009

I’m a blog response I love it when I work.

Picture of Kevin

.(JavaScript must be enabled to view this email address) says: November 30, 2009

Are you selling templates? I saw similar work to yours on this site http://www.obox-design.com/

Who’s the actual designer?

Picture of dyengtieqr

dyengtieqr says: January 12, 2010

O300Uw csawolpzibte, bqwsxyouzhyb, [link=http://spmodpicnvmc.com/]spmodpicnvmc[/link], http://onlmuamdevzm.com/

Page 1 of 88 pages  1 2 3 >  Last »

Have your say: