Breadcrumb
Breadcrumb is a secondary navigation within a website (also called breadcrumb navigation). Breadcrumbs offer the users on the website the option, in the form of internal links, to quickly find their way back to the homepage or another level of the website. With breadcrumb navigation, the user can therefore reconstruct which pages they have previously visited. This secondary path-navigation is usually built hierarchically according to website and shows the logical path from the homepage to the current position. A breadcrumb navigation can be found regularly in the upper area of a website, and is usually not too noticeable as a design element.
Background
The term derives from the fairy tale “Hansel and Gretel” from the Brothers Grimm. In the fairy tale, two children used breadcrumbs to find their way back home. Breadcrumbs, as it applies to the Internet, offer users the ability to find their way back to the main page. Breadcrumb navigation traces your preceding pages. This navigation is structured hierarchically and shows the path from the home page through to the current location in the page tree. Breadcrumb navigation is often at the top of the page and is usually not displayed in a flashy way.
Graphic portrayal of breadcrumbs
Tags will be portrayed through arrows, other typographic symbols, or graphics and buttons. Through a click, the user either ends up on the homepage or on the main page of the wiki. The last point of the navigation can't therefore be clicked on. Breadcrumbs are constantly shown in an "Above-the-fold" area of a website, they are however fairly discreet in terms of font and colour so that the main navigation is still noticeable. Consistence is also relevant: if a secondary navigation is used, this should be available on all pages and subpages.
Types of Breadcrumbs
Strictly speaking, Breadcrumbs are to be differentiated from the click path, because click paths can be distinguished by jumps to different hierarchical levels, possibly circular and not necessary logically. However, the data for the production of breadcrumbs often comes from the click path that the user has followed. Depending on the variation of bread crumb, the navigation with a click path is identical or is relative to other elements and levels of a website.
Breadcrumb navigation can therefore be differentiated according to which relative website level or click path the user is currently on.
- Clickpath: This is a path based navigation which traces the actual click path and shows the current position. With extensive paths and websites with a deep structure, the variation is less feasible. Above all, the user can realize the same function with the forward and back buttons of the browser. The implementation of the data depends on the data from the click path analysis and in certain circumstances, a path based navigation can be very long.
- Location: a so-called location based breadcrumb refers to the user's current position in the hierarchy of the website. Websites with more than 2 sub-levels often implement this variation in order to be able to quickly reach the parent elements in the page tree.
- Categories (attribute): attribute based breadcrumbs allow the user to see to which category the currently visited page belongs to, and to which attribute this page can be ascribed to. Usually, such navigation systems will be used by E-commerce websites and online shops on the product level, and together with search and offered together with search and personalization functions. The implementation is therefore more complex, as the breadcrumb has to be adapted to the functions of the websites, and possibly also to the database.
Applications
Breadcrumb navigation is mainly used for very large websites and portals that have a complex hierarchical structure. You will come across breadcrumb navigation options in online stores often as well, as these assist users in finding their way in the large category and product selection. If a website does not have a logical hierarchy, then breadcrumb navigation is not recommended. One way to do is to build the breadcrumb structure like a sitemap, which usually reflects the website architecture.
It is worth creating a sitemap and then cheking whether a breadcrumb navigation would help. In case the page structure includes many levels, this should be visible in the sitemap. Finally, the breadcrumb can be built up like the sitemap, as they reflect the page-architecture. The following rule is important: the breadcrumb navigation is constantly a secundary help that replaces neither the menu or a navigation. Therefore, primary and secondary navigation should be separated, even in regard to layout and design.
Implementation of Breadcrumbs on a website
Breadcrumbs can be integrated in many ways:
- Plug in: Depending on the CMS (for example word press), different plug-ins are possible for breadcrumbs. The additional program makes it possible to conduct changes and to integrate the secondary navigation. The support of structured data or microdata is optional, because breadcrumbs can be read by search engines and shown in the SERPs.
- PHP and JavaScript: alternatively, elements of code of different programmer and script languages can be integrated in the source code. For example, a function was defined in PHP and then retrieved in the document. This occurs in a similar way with JavaScript, although also dynamic generated websites get a breadcrumb.
- Content Management System: a few CMS and shop systems offer breadcrumbs also an option in the backend. The implementation is normally relatively easy and is possible with few clicks.
- HTML: the manual variation is based on links which can be summarized in a Div. Relative paths point to previously visited sides. The design is shaped via the CSS and should be consistent.
Breadcrumbs have the following advantages for usability on websites:
- They show the users the current position relative to other hierarchy levels of a website. With this, breadcrumbs are a support for use and navigation.
- They make it possible to navigate the page hierarchy with one click above. If the user lands over the Google-Search or deep links in the middle of the information architecture, breadcrumbs are a quick and uncomplicated navigation help.
- Breadcrumbs don't take much place up on a website and are relatively easy to implement.
- According to Jakob Nielsen, a usability expert, they never cause problems with user-testing. Users know what this secondary navigation is and how they can use breadcrumbs.
Importance for search engine optimization
Based on numerous usability tests, it is believed that breadcrumb navigation greatly assists users with navigating. From a usability standpoint breadcrumb is therefore indispensable. From an SEO and OnPage optimization perspective it is important to implement breadcrumb correctly. For some time now Google SERPs partly display breadcrumb navigation in the URL line as rich snippets. It is recommended to tag breadcrumb navigation in the source code using microdata (more information can be found at Google Support).
In a further sense, breadcrumbs help search engines with crawling and summarising websites. Through the navigation, the internal linking will be strengthened and URLs that thematically fit together will be linked via the navigation element. Therefore, via the breadcrumb navigation, deeper lying directories in the page hierarchy can be reached and more quickly crawled.
Web Links