Breadcrumb (navigation)

Last updated
GNOME Files, demonstrating its implementation of location-based breadcrumb navigation. Breadcrumb navigation in Nautilus.png
GNOME Files, demonstrating its implementation of location-based breadcrumb navigation.
Breadcrumb in Dolphin file manager. Dolphin barra indirizzi.png
Breadcrumb in Dolphin file manager.

A breadcrumb or breadcrumb trail is a graphical control element frequently used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain awareness of their locations within programs, documents, or websites.

User interface means by which a user interacts with and controls a machine

The user interface (UI), in the industrial design field of human–computer interaction, is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine from the human end, whilst the machine simultaneously feeds back information that aids the operators' decision-making process. Examples of this broad concept of user interfaces include the interactive aspects of computer operating systems, hand tools, heavy machinery operator controls, and process controls. The design considerations applicable when creating user interfaces are related to or involve such disciplines as ergonomics and psychology.

Web page single document that is directly viewable via the World Wide Web and web browsers

A web page is a document that is suitable to act as a web resource on the World Wide Web. In order to graphically display a web page, a web browser is needed. This is a type of software that can retrieve web pages from the Internet. When accessed by a web browser it may be displayed as a web page on a monitor or mobile device. Typical web pages are hypertext documents which contain hyperlinks, often referred to as links, for browsing to other web pages.

Contents

The term is a reference to the trail of bread crumbs left by Hansel and Gretel in the German fairy tale of the same name. [1]

Bread crumbs small particles of dry bread

Bread crumbs or breadcrumbs are sliced residue of dry bread, used for breading or crumbing foods, topping casseroles, stuffing poultry, thickening stews, adding inexpensive bulk to soups, meatloaves and similar foods, and making a crisp and crunchy covering for fried foods, especially breaded cutlets like tonkatsu and schnitzel. The Japanese variety of bread crumbs is called panko.

Hansel and Gretel fairy tale

"Hansel and Gretel" is a well-known German fairy tale recorded by the Brothers Grimm and published in 1812. Hansel and Gretel are a young brother and sister kidnapped by a cannibalistic witch living in a forest in a house constructed of cake, confectionery, candy, and many more treats. The two children escape with their lives by outwitting her. The tale has been adapted to various media, most notably the opera Hänsel und Gretel (1893) by Engelbert Humperdinck. "Hansel and Gretel" is classified under Class 327А of the Aarne–Thompson classification system.

Germany Federal parliamentary republic in central-western Europe

Germany, officially the Federal Republic of Germany is a country in Central and Western Europe, lying between the Baltic and North Seas to the north and the Alps, Lake Constance and the High Rhine to the south. It borders Denmark to the north, Poland and the Czech Republic to the east, Austria and Switzerland to the south, France to the southwest, and Luxembourg, Belgium and the Netherlands to the west.

Usage

A breadcrumb trail tracks and displays each page viewed by a visitor of a website, either in the order the pages were viewed, [2] or in other definitions, displaying a hierarchy of the current page in relation to the website's structure. [3] Breadcrumbs are typically placed in horizontal form under the masthead or navigation of a website. [4]

Navigation The process of monitoring and controlling the movement of a craft or vehicle from one place to another

Navigation is a field of study that focuses on the process of monitoring and controlling the movement of a craft or vehicle from one place to another. The field of navigation includes four general categories: land navigation, marine navigation, aeronautic navigation, and space navigation.

Website set of related web pages served from a single web domain

A website or web site is a collection of related network web resources, such as web pages, multimedia content, which are typically identified with a common domain name, and published on at least one web server. Notable examples are wikipedia.org, google.com, and amazon.com.

Websites

Breadcrumbs typically appear horizontally across the top of a Web page, often below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point. [1] A greater-than sign (>) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical icons.

Glyph Element of writing

In typography, a glyph is an elemental symbol within an agreed set of symbols, intended to represent a readable character for the purposes of writing. Glyphs are considered to be unique marks that collectively add up to the spelling of a word or contribute to a specific meaning of what is written, with that meaning dependent on cultural and social usage.

A breadcrumb trail or path based on viewing history is typically rendered as follows :

Page viewed > Page viewed > Page viewed > Page viewed > Page currently being viewed

For instance, in this scenario, a website visitor views seven pages (note how the pages are tracked in order the user viewed them) :

Home page > Services > About Us > Home page > Latest Newsletter > Home page > Page currently being viewed

Typical breadcrumbs following a hierarchical structure are shown as follows:

Home page > Section page > Subsection page

Software

Current file managers including Linux Mint's Nemo, Windows Explorer (from Windows Vista onwards), Finder (for Macintosh operating systems), GNOME's Nautilus, KDE's Dolphin, Xfce's Thunar, MATE's Caja, and SnowBird allow breadcrumb navigation, often replacing or extending an address bar.[ citation needed ]

Linux Mint Desktop focused Ubuntu-based Linux distribution

Linux Mint is a community-driven Linux distribution based on Ubuntu that strives to be a "modern, elegant and comfortable operating system which is both powerful and easy to use." Linux Mint provides full out-of-the-box multimedia support by including some proprietary software and comes bundled with a variety of free and open-source applications.

Nemo (file manager) file manager

Nemo is a free and open-source software and official file manager of the Cinnamon desktop environment. It is a fork of GNOME Files.

Windows Vista personal computer operating system by Microsoft released in 2006

Windows Vista is an operating system that was produced by Microsoft for use on personal computers, including home and business desktops, laptops, tablet PCs and media center PCs. Development was completed on November 8, 2006, and over the following three months, it was released in stages to computer hardware and software manufacturers, business customers and retail channels. On January 30, 2007, it was released worldwide and was made available for purchase and download from the Windows Marketplace; it is the first release of Windows to be made available through a digital distribution platform. The release of Windows Vista came more than five years after the introduction of its predecessor, Windows XP, the longest time span between successive releases of Microsoft Windows desktop operating systems.

Types

There are three types of Web breadcrumbs:

[5] [6]

Usability

Location breadcrumbs are not necessarily appropriate for sites whose content is so rich that single categories do not fully describe a particular piece of content. For this reason, a tag may be more appropriate, though breadcrumbs can still be used to allow the user to retrace their steps and see how they arrived at the current page.

Tag (metadata) metadata used for classifications or adding of informations

In information systems, a tag is a keyword or term assigned to a piece of information. This kind of metadata helps describe an item and allows it to be found again by browsing or searching. Tags are generally chosen informally and personally by the item's creator or by its viewer, depending on the system, although they may also be chosen from a controlled vocabulary.

Other names

Some commentators and programmers alternatively use the term "cookie crumb" as a synonym to describe the navigation design.
This should not be confused with the term cookie, which refers to HTTP cookies (text files websites write on a visitor's machine that record data such as login information).

Michigan Community College's Virtual Learning Collaborative uses the term "Navigation Path", [7] as do some Drupal users. [8]

French and Spanish speakers sometimes use instead the term Ariadne's thread (in French fil d'Ariane) in relation to the thread left by Ariadne to Theseus so he can find the exit of the labyrinth after killing the Minotaur, on a LIFO (stack) instead of FIFO (queue) way.[ citation needed ]

Related Research Articles

A file manager or file browser is a computer program that provides a user interface to manage files and folders. The most common operations performed on files or groups of files include creating, opening, renaming, moving or copying, deleting and searching for files, as well as modifying file attributes, properties and file permissions. Folders and files may be displayed in a hierarchical tree based on their directory structure. Some file managers contain features inspired by web browsers, including forward and back navigational buttons.

Graphical user interface user interface allowing interaction through graphical icons and visual indicators

The graphical user interface is a form of user interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation, instead of text-based user interfaces, typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on a computer keyboard.

Konqueror Web browser

Konqueror, a free and open-source web browser and file manager, provides web access and file-viewer functionality for file systems. It forms a core part of the KDE Software Compilation. Developed by volunteers, Konqueror can run on most Unix-like operating systems. The KDE community licenses and distributes Konqueror under the GNU General Public License version 2.

World Wide Web System of interlinked hypertext documents accessed over the Internet

The World Wide Web (WWW), commonly known as the Web, is an information system where documents and other web resources are identified by Uniform Resource Locators, which may be interlinked by hypertext, and are accessible over the Internet. The resources of the WWW may be accessed by users by a software application called a web browser.

Web browser software application for retrieving, presenting and traversing information resources on the World Wide Web

A web browser is a software application for accessing information on the World Wide Web. When a user opens a particular website, the web browser retrieves the necessary content from a web server then displays the resulting web page on the user's device.

Drupal Web content management system

Drupal is a free and open-source content management framework written in PHP and distributed under the GNU General Public License. Drupal provides a back-end framework for at least 2.3% of all websites worldwide – ranging from personal blogs to corporate, political, and government sites. Systems also use Drupal for knowledge management and for business collaboration.

Toolbar element of computer graphical interface

In computer interface design, a toolbar is a graphical control element on which on-screen buttons, icons, menus, or other input or output elements are placed. Toolbars are seen in many types of software such as office suites, graphics editors and web browsers. Toolbars are usually distinguished from palettes by their integration into the edges of the screen or larger windows, which results in wasted space if too many underpopulated bars are stacked atop each other or interface inefficiency if overloaded bars are placed on small windows.

A navigation bar is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in file browsers, web browsers and as a design element of some web sites.

Web analytics is the measurement, collection, analysis and reporting of web data for purposes of understanding and optimizing web usage. However, Web analytics is not just a process for measuring web traffic but can be used as a tool for business and market research, and to assess and improve the effectiveness of a website. Web analytics applications can also help companies measure the results of traditional print or broadcast advertising campaigns. It helps one to estimate how traffic to a website changes after the launch of a new advertising campaign. Web analytics provides information about the number of visitors to a website and the number of page views. It helps gauge traffic and popularity trends which is useful for market research.

Google Analytics is a tool which shows real time traffic of your website.

According to IFABC Global Web Standards, a unique user (UU) is "An IP address plus a further identifier. The term "unique visitor" may be used instead of "unique user" but both terms have essentially the same meaning. Sites may use User Agent, Cookie and/or Registration ID." Note that where users are allocated IP addresses dynamically, this definition may overstate or understate the real number of individual users concerned.

An HTTP cookie is a small piece of data sent from a website and stored on the user's computer by the user's web browser while the user is browsing. Cookies were designed to be a reliable mechanism for websites to remember stateful information or to record the user's browsing activity. They can also be used to remember arbitrary pieces of information that the user previously entered into form fields such as names, addresses, passwords, and credit card numbers.

Path analysis, is the analysis of a path, which is a portrayal of a chain of consecutive events that a given user or cohort performs during a set period of time while using a website, online game, or eCommerce platform. As a subset of behavioral analytics, path analysis is a way to understand user behavior in order to gain actionable insights into the data. Path analysis provides a visual portrayal of every event a user or cohort performs as part of a path during a set period of time.

The front controller software design pattern is listed in several pattern catalogs and related to the design of web applications. It is "a controller that handles all requests for a website", which is a useful structure for web application developers to achieve the flexibility and reuse without code redundancy.

Mobile web analytics studies the behavior of mobile website visitors in a similar way to traditional web analytics. In a commercial context, mobile web analytics refers to the use of data collected as visitors access a website from a mobile phone. It helps to determine which aspects of the website work best for mobile traffic and which mobile marketing campaigns work best for the business, including mobile advertising, mobile search marketing, text campaigns, and desktop promotion of mobile sites and services.

Web navigation refers to the process of navigating a network of information resources in the World Wide Web, which is organized as hypertext or hypermedia. The user interface that is used to do so is called a web browser.

A web beacon is one of various techniques used on web pages and email, to unobtrusively allow checking that a user has accessed some content. Web beacons are typically used by third parties to monitor the activity of users at a website for the purpose of web analytics or page tagging. They can also be used for email tracking. When implemented using JavaScript, they may be called JavaScript tags.

References

  1. 1 2 Mark Levene (18 October 2010). An Introduction to Search Engines and Web Navigation (2nd ed.). Wiley. p. 221. ISBN   978-0470526842 . Retrieved 12 November 2012.
  2. "Breadcrumb Navigation | Spidergems". Spidergems. Retrieved 2018-04-27.
  3. Demetri. "16 Important Do's and Don'ts of Effective Web Design". Design Toronto Web. Retrieved 21 June 2016.
  4. Martini, Brands (October 26, 2018). "Everything You Need To Know About Breadcrumbs". Brands Martini.
  5. "Breadcrumbs In Web Design: Examples And Best Practices". smashingmagazine.com. 17 March 2009.
  6. "Breadcrumb Navigation: Good for Website Usability or Not? - Usabilla Blog". usabilla.com. 28 September 2016.
  7. MCCVLC Black Board Help
  8. Setting the Navigation Path by Context in Drupal