Image Image Image Image Image Image Image Image Image Image

Technologies Review | May 24, 2017

Scroll to top

Top

Web

Breadcrumbs Links: Guidelines For Navigation

Breadcrumbs Links: Guidelines For Navigation
EditorOne

Breadcrumbs are contextual links which helps in performing navigation within the document. Usually, on top of a page below title bar, the breadcrumbs appears in horizontal manner.

Breadcrumbs Links: Guidelines For Navigation

There is a link which navigates to previous page from where the user can link to current page. Breadcrumbs helps the user to navigate to the starting or entry point. A greater than sign is used as a hierarchy separator along with other elements such as >> or >.

Structure of Breadcrumb Links:

The structure of breadcrumbs is given below:

Home page > Section page > Subsection page

or

Home page : Section page : Subsection page

or

home page : section page 1 : section page 2

The file managers such as Windows Explorer (from Windows Vista onwards), Mac OS’s Finder, GNOME’s Nautilus, KDE’s Dolphin, Xfce’s Thunar, MATE’s Caja, and SnowBird allow breadcrumb navigation.

Types

The type of breadcrumbs which are location and attribute are listed below:

  • Location: Provides information about location of page in the website hierarchy.
  • Attribute: Provides information about the current page.

Usability

Location breadcrumbs are not suitable for sites where there is a lot of diversity in content and single category does not fully justify the content. The breadcrumbs allow us to trace back to previous location and enable us to reach current page.

Types

The three types of breadcrumb links which are given below:

Location-Based Breadcrumb Links

The location based breadcrumb link displays the structure of website in textual form. The visitor navigates from home page to current page. User can view the information related to other products which eventually helps to understand the hierarchy in an efficient manner.

Path-Based Breadcrumb Links

The path based breadcrumb link allows user to provide information about the steps which the user will take in order to reach at particular page.The number of reasons due to which breadcrumb links are not recommended such as:

  • Back button provides redundancy
  • Helps user to navigate to wrong section
  • Reaches to web page

Attribute-Based Breadcrumb Links

This link provides information about particular item related to web page. There are several ways in which user can reach particular item. The location based and attribute appears on the same page. The visited and unvisited will be displayed in different color.

Advantages Of Breadcrumb Links

The Breadcrumb links offers various advantages which are listed below:

1. Breadcrumb Links Support Website Navigation

Location-based breadcrumb links provides option to navigate within the website.

2. Breadcrumb Links Support Website Usability

The two factors involving usability are:

  • Effectiveness (Task Completion): Whether user can achieve the goal?
  • Efficiency (Quick-And-Easy): How quickly user can achieve the goal?

3. Breadcrumb Links Support Content Findability

The location-based breadcrumb link support searching which helps the searchers to navigate in your website.

4. Breadcrumb Links Provide Information Scent

The information helps to provide answers to queries such as:

  • Where can I go?
  • Where am I?
  • What shall I click?

5. Breadcrumb Links Communicate Content Aboutness

A location-based breadcrumb starts with a link and ends at the current page. This helps to navigate as the user moves to the internal of the hierarchy. The site hierarchy includes page heading, communicate to user and listing in the search engine about the page content.

Breadcrumb Link Dos And Don’t s

There are various Do’s and Don’t of Breadcrumb links which are listed below:

Breadcrumb Dos

  • You can begin a location-based breadcrumb which takes you to home page and ends at the current page.
  • There   are simple separators between different levels of links.A forward slash (/), less-than sign (<), or a double less-than sign symbols are widely used.
  • The breadcrumb links are clickable items.

Breadcrumb Don’ts

  • It is advised not to use reverse breadcrumb-link text for your site .
  • Do not use the URL structure for breadcrumb. The URLs should be easyto type and remember.
  • Do not make the breadcrumb so small that the user finds it difficult to read it.
  • Do not allow breadcrumb links to dominate. They should never distract the visitor from content heading and navigation.