Tag Archives: website navigation

Align site navigation with strategy and user needs.

Breadcrumb Navigation Prevents Confusion

Bread crumb navigation links in the top left corner of web pageClear, easy navigation determines whether visitors stay on your site, and how long they stay. People want to find what they’re looking for quickly and easily–with just one or two clicks. If they get confused, they move on to the next site in Google’s search results list.

Breadcrumb navigation is a great way to make sure visitors to your site always know where they are.

Most visitors who arrive at your site from Google land on a page within your site, rather than on your home page. There are three questions that users usually have when they arrive at your site:

  • Where am I?
  • What’s here?
  • Where can I go from here?

Breadcrumb navigation shows users the architecture of your site and makes it easy for the first-time visitor to get oriented. It helps visitors know where they are no matter what page they’re looking at. Put it on every page of your site, in the upper left corner of the page, beneath the navigation menu.

(Of course the structure of your site has to make sense or it doesn’t matter what you do with navigation links.)

Usability expert Jakob Nielsen endorses breadcrumb navigation

In an article on breadcrumb navigation, usability guru Jakob Nielsen says that breadcrumbs offer many benefits at minimal cost:

  • Breadcrumbs show people their current location relative to higher-level concepts, helping them understand where they are in relation to the rest of the site.
  • Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links.
  • Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
  • Breadcrumbs take up very little space on the page.

Wikipedia categorizes breadcrumbs into 3 types:

Path (History)–breadcrumbs are dynamic and show the path the user has taken to arrive at the current page. Because this approach is equivalent to using the browser’s Back and Forward functions, it isn’t widely used.

Location–breadcrumbs are static and show where the page is located in the website hierarchy [this is the category I use and am describing in this post]. The position of the current page is shown as it relates to the home page.

Attribute–Hongkiat Lim explains it this way: these breadcrumbs indicate the attributes or categories ascribed to the current page.

Often seen on e-commerce website, products may not only fall under a category but under certain attributes as well. For example, a car may be categorized as an SUV with attributes of being the color black and released in the year 2010. This blog uses attribute breadcrumb navigation–you can see that this post is preceded by the Website Best Practices category.

Use breadcrumb navigation at the top of every page, in the same position. Use a small font to minimize visual clutter and ensure that they are not the focal point of the page. Hyperlink all but the current page.

If WordPress is your website platform, you can download a plugin that automatically places breadcrumb navigation on your pages. I use Breadcrumb NavXT.