Der Breadcrumb, zu Deutsch auch Brotkrümelnavigation, Brotkrumennavigation oder Ariadnepfad, ist ein Navigationsmuster, bei dem nach bestimmten Ordnern und Unterordnern die Navigation auf einer Seite erleichtert werden soll.
Herkunft des Namens „Breadcrumb“
Der Name „Brotkrümelnavigation“ (englisch: Brotkrümel = Breadcrumb) geht zurück auf das Märchen von Hänsel und Gretel. Im Märchen legt Gretel entlang eines Pfades Stückchen für Stückchen kleine Brotkrümel aus, um den Weg zurückzufinden.
Auch der Name „Ariadnepfad“ soll an eine Geschichte erinnern: In der griechischen Mythologie schenkt Ariadne Theseus ein Wollknäuel, welches dieser in einem Labyrinth schrittweise entrollt, um sicher den Weg zurückzufinden. Die Namen der Breadcrumb Navigation lassen auf deren Funktionsweise und Hintergrund schließen.
Was ist Breadcrumb?
Der Breadcrumb ist ein Entwurfsmuster für ein Navigationselement, das die schrittweise Verfolgung des eingeschlagenen Navigationspfades bis zum aktuellen Element darstellt und die Seitenhierarchie festlegt.
Je nach Sortierung in Ordner und Unterordner, bzw. Kataloge und Kategorien, kann der Besucher einer Webseite mithilfe der Breadcrumb Navigation schnell und übersichtlich verfolgen, welche Seiten er zuletzt besucht hat und wie er auf die derzeitige Seite gekommen ist. Besonders praktisch ist dies im Hinblick auf die Hinweise zur Thematik und zum schnellen Wechsel zurück in eines der Oberthemen.
Breadcrumb: Die verschiedenen Arten
Für gewöhnlich befindet sich die Breadcrumb Navigationsleiste horizontal am Seitenanfang, selten stark hervorgehoben, zumeist eher simpel in der optischen Gestaltung und größtenteils auch gewollt subtil. Es kann sowohl eine Orientierung von links nach rechts in der linken oberen Ecke der Seite eingebaut sein, oder aber eine Navigation, die sich von rechts nach links erstreckt, in dem Fall meistens in der rechten oberen Ecke.
Seltener gibt es auch eine Breadcrumb Navigation, die sich von oben nach unten erstreckt. Auffällig ist dabei die starke Zurückhaltung der Breadcrumb Navigation, welche das Menü bzw. die Hauptnavigation nicht übertönen oder in den Hintergrund stellen soll. Meistens werden zwischen die Elemente Pfeile gesetzt, sodass die Richtung des Elemente-Weges klar und deutlich aufgezeigt wird.
Ebenfalls häufig auf Websites anzutreffen sind die durch vertikale Striche getrennten Bedienelemente, die jedoch den Nachteil aufweisen, keine Richtung und somit keine sofortige Wegerkennen bereitzustellen. Eher selten gibt es auch die Trennung der Elemente durch Doppelpunkte. Hier wird wieder eine eindeutige Richtung festgelegt, allerdings können die textgebräuchlichen Doppelpunkte Verwirrung stiften.
In den letzten Jahren hat sich vor allem die Darstellung anhand von Pfeilen durchgesetzt. Nicht alle Breadcrumbs beinhalten das aktuelle Element. Manche zeigen lediglich den Weg, unabhängig vom Ziel. Diese Darstellung ist sinnvoll bei einem Location-Breadcrumb, kann bei Path- oder Attribute-Breadcrumbs jedoch schnell zu Verwirrung oder Unverständnis führen, womit ein Breadcrumb seinen Nutzen verliert.
Verwendung der Breadcrumb Navigation
Die Breadcrumb Navigation wird häufig in Kombination mit anderen Navigationselementen angewendet. Besonders für Mega-Drop-Down-Navigationsmenüs ist das Anlegen eines Breadcrumbs sinnvoll. Das Mega-Dop-Down-Menü ist eine Navigationsart, bei der unter meist wenigen Hauptkategorien mit Mouse-Over Funktion große Registerkarten erscheinen.
Diese Art des Menüs ist häufig auf Online-Shops aufgrund deren großer Angebote zu finden. Die integrierte Breadcrumb-Navigation ermöglicht es dem Nutzer dabei, den Pfad zurückverfolgen zu können, ohne in Verwirrung zu geraten, und schnell zurück in Hauptkataloge zu springen, falls das Gesuchte nicht gefunden wird.
Eine Navigationsart, die zumeist kein Breadcrumb Element benötigt, ist das Sliding-Tabs genannte übersichtliche Katalog-Navigationselement. Dabei öffnen sich die einzelnen Registerkarten untereinander, sodass der Besucher immer genau weiß, in welcher Kategorie aus welchem Ordner er sich befindet, und welche alternativen Kategorien sich in diesem Ordner befinden.
Breadcrumb Navigationsarten
Bei der Anlegung einer Breadcrumb Navigation kann man zwischen verschiedenen Arten wählen. Unterschieden wird grundsätzlich zwischen Location-Breadcrumbs, Path-Breadcrumbs und Attribute-Breadcrumbs. Jede dieser Navigationstools hat andere Eigenschaften und somit andere Vorteile für den Besucher.
- Die geläufigste Variante ist der erstgenannte Location-Breadcrumb. Hierbei wird der Element-Zweig angezeigt. Dies bedeutet, dass der Besucher genau verfolgen kann, aus welchem Wurzelelement das aktuelle Element entspringt, und welche weiteren Elemente zwischen Wurzelelement und aktuellem Element liegen. Der Vorteil dieser Art der Breadcrumb Navigation liegt in einer hohen Strukturiertheit und Themenrelevanz. Schon durch den Blick auf die Location-Breadcrumbs können wesentliche Informationen vermittelt werden. Diese Navigationsart wird auch als „statisch“ bezeichnet, mit dem Hintergrund des „Sie sind jetzt hier“.
- Der Path-Breadcrumb ist ebenfalls häufig auf erfolgreichen Websites anzutreffen. Dieser beschreibt im Gegensatz zum Location-Breadcrumb keinen direkten Element-Zweig. Das englische Wort „Path“, welches übersetzt „Weg“ oder „Pfad“ heißt, gibt bereits die Grundzüge des Path-Breadcrumb preis. In diesem Navigationselement wird nämlich jeder einzelne Navigationsschritt des Besuchers dokumentiert und kann dementsprechend zurückverfolgt werden. Es ist eine weniger übersichtlich strukturierte, sondern eher benutzerfreundlich gedachte Navigation. Der Gedanke dabei ist, dass der Besucher immer im Blick haben kann, wo er gerade gewesen ist, damit er schnell und einfach wieder dorthin zurückgelangt. Anders als der Location-Breadcrumb ist der Path-Breadcrumb „dynamisch“ als Anzeige des Weges „So sind Sie hierhergekommen“ zu verstehen.
- Den Attribute-Breadcrumb findet man seltener auf Websites. Er ist besonders sinnvoll auf Blogs einzusetzen. Er basiert auf den Meta-Daten der aufgerufenen Seiten und zeigt anhand unterschiedlicher Informationen einen unsichtbaren Weg zum aufgerufenen Element. Dabei werden Keywords, Suchbegriffe und ähnliches angezeigt, die nicht notwendigerweise vom Besucher eingegeben bzw. ausgewählt worden sein müssen. Es geht lediglich um eine andere Art der Orientierung.
Zusammenfassung
Die Breadcrumb-Navigation dient als Hilfsmittel zur Orientierung auf Websites und zeigt den Verlauf der besuchten Seiten oder Kategorien. Dieses Navigationsmuster nimmt seinen Ursprung aus Märchen wie Hänsel und Gretel oder der griechischen Mythologie um Ariadne und Theseus. Die Breadcrumb-Leiste wird meist horizontal am Anfang der Seite dargestellt und soll die Hauptnavigation nicht übertönen.
Es gibt verschiedene Typen von Breadcrumbs: Location-Breadcrumbs zeigen eine strukturierte Hierarchie und sind eher statisch, während Path-Breadcrumbs dynamisch sind und jeden Navigationschritt des Benutzers dokumentieren. Der Attribute-Breadcrumb ist seltener und basiert auf Meta-Daten der jeweiligen Seite, bietet jedoch eine andere Form der Orientierung.
Die Breadcrumb-Navigation wird oft mit anderen Navigationselementen wie Mega-Drop-Down-Menüs kombiniert, insbesondere in Online-Shops mit großem Produktangebot. Sie hilft dem Nutzer, schnell zurück zu Hauptkatalogen zu springen, falls das Gesuchte nicht gefunden wird. Ein alternatives Navigationsmodell, das keine Breadcrumbs benötigt, ist das Sliding-Tabs-Element, bei dem die Kategorien untereinander aufgelistet sind.
Häufige Fragen und Antworten
Was ist ein Breadcrumb?
Der Breadcrumb, auch Brotkrümelnavigation genannt, ist ein Navigationsmuster, das die schrittweise Verfolgung des Navigationspfades einer Webseite ermöglicht. Dabei können Besucher schnell und übersichtlich sehen, welche Seiten sie zuletzt besucht haben und wie sie zur aktuellen Seite gekommen sind. Breadcrumbs sind besonders praktisch für die Themenorientierung und den schnellen Wechsel in die Oberthemen.
Welche Arten von Breadcrumbs gibt es?
Es gibt verschiedene Arten von Breadcrumbs. Die geläufigste Variante ist der Location-Breadcrumb, der den Element-Zweig anzeigt und somit eine strukturierte Hierarchie aufzeigt. Eine weitere Art ist der Path-Breadcrumb, der jeden einzelnen Navigationsschritt des Besuchers dokumentiert. Der Attribute-Breadcrumb basiert auf den Meta-Daten der aufgerufenen Seiten und zeigt Informationen wie Keywords oder Suchbegriffe an.
Wie wird die Breadcrumb Navigation verwendet?
Die Breadcrumb Navigation wird häufig in Kombination mit anderen Navigationselementen wie Mega-Drop-Down-Menüs verwendet. Insbesondere auf Online-Shops mit vielen Produkten ist die Verwendung von Breadcrumbs sinnvoll. Sie ermöglichen es dem Nutzer, den Pfad zurückzuverfolgen und schnell zurück zu den Hauptkatalogen zu gelangen, falls das Gesuchte nicht gefunden wird. Auch in Blogs oder anderen Websites kann die Breadcrumb Navigation zur Orientierung eingesetzt werden.