Performance Autor: Verena 13.09.2019

Mittels Navigation zur Einstiegsseite zurück: Das ist Bread Crumb!

Manchmal ist es gar nicht mehr so einfach, den Pfad bestimmter Unterseiten einer Webseite nachzuvollziehen – so schnell und zu viele Informationen werden mittlerweile dank unzähliger Tabs über ein und denselben Browser verarbeitet. Vorteile bieten da Webseiten, die eine sekundäre Navigation innerhalb ihrer Menüstruktur bieten. Man spricht auch von einer Bread Crumb-Navigation, übersetzt etwa „Brotkrumen“ oder „Brotkrümel“.

Wer eine Webseite aufruft, die sich mittels Bread Crumb navigieren lässt, kann zu jedem Zeitpunkt nachvollziehen, welche Unterseiten bereits zuvor aufgerufen wurden. Die klassische sekundäre Navigation, die zumeist hierarchisch und strikt nach Seiten aufgebaut ist, stellt den sogenannten Seitenstrukturbaum sinnvoll und stringent nachvollziehbar dar. Auf diese Weise lässt sich jederzeit logisch nachvollziehen, wie der User vom Beginn bis hin zur aktuellen Stelle gelangt ist.

Bread Crumb-Navigationen sind meist sehr kleinteilig aufgebaut und im oberen Seitenbereich integriert, sie werden meist gar nicht richtig wahrgenommen. Die Suchhelden empfehlen die Implementierung einer Bread Crumb-Navigation, die nur wenig Aufwand erfordert, zugleich aber einen wesentlichen Pluspunkt hinsichtlich der Usability der Webseite darstellt.

Kurzum: Die sekundäre Seitennavigation im Bread Crumb-Schema fügt sich nahtlos in die grafische Benutzeroberfläche der Seite ein, man spricht auch von einer Darstellung „above the fold“. Die Kategorien und Unterkategorien, so wird auch die aktuelle Position auf der Seite anhand einer klaren Seitenstruktur dargestellt.

Ableitung des Begriffes

Wer kennt Sie nicht, die Erzählungen von „Hänsel und Gretel“ sind eines der beliebtesten Märchengeschichten der Gebrüder Grimm. Mittels Brotkrumen versuchen die beiden, sich den Weg zum Hexenhaus zu merken bzw. den Weg zurück irgendwie darstellbar zu machen. Dasselbe Prinzip verfolgt eine Bread Crumb-Navigation.

Der User ist zu jedem Zeitpunkt in der Lage, seine Position innerhalb der jeweiligen Hierarchie der Seite nachzuvollziehen und zwischen diesen Ebenen zu springen.

Eine klassische Bread Crumb-Navigation könnte lauten: Startseite > Hilfe > Fragen und Antworten.

Wie werden Bread Crumbs grafisch dargestellt?

Die Implementierung einer Bread Crumb-Navigation ermöglicht es Ihnen, die eigene Corporate Identity ganzheitlich umzusetzen. Die Gliederung der Seitenstruktur, die standardmäßig durch Trennzeichen erfolgt, kann gleichzeitig auch durch Buttons, Grafiken oder andere typografische Symbole dargestellt werden. Jegliche Seiten, die auf dem Weg bis hin zur aktuellen Position aufgerufen wurden, sind anklickbar – ausgenommen die aktuelle, die ja derzeit aufgerufen ist.

Wie bei allen Dingen auch, gilt es bei der Bread Crumb-Navigation eine gewisse Stringenz umzusetzen: Wer eine sekundäre Navigation ermöglicht, sollte diese so dezent einbringen, dass sie eine Ergänzung zur Hauptnavigation darstellt, zugleich darf sie aber ebenso wenig auf einzelnen Seiten fehlen.

Zur Unterscheidung und den einzelnen Arten von Bread Crumbs

Der klassische Weg zu einer bestimmten Unterseite ist nicht immer logisch, kann durch Links verfälscht werden oder das Problem mit sich bringen, dass mehrere Sprünge hin und her folgten, die Chaos in die Struktur bringen. Es bestehen Ähnlichkeiten mit Klickpfaden, denn auch diese sind nicht immer logisch, zirkulär oder aber durch Hin- und Herwechseln zwischen den jeweiligen Hierarchieebenen gekennzeichnet.

Um die Darstellungsform einzelner Bread Crumbs zu erklären, ist es notwendig, die relativen Webseitenebenen oder aber die Klickpfade in Bezug zur Bread Crumb-Navigation zu setzen.

• Attribute (Kategorien)

Gerade bei Hilfe- oder Wiki-Seiten wird häufig eine attributbasierte Bread Crumb-Navigation implementiert. Der User kann jederzeit sehen, welcher Kategorie die aktuelle Seite zugeordnet wird bzw. welche Attribute damit assoziiert werden. Man findet diese Art von Bread Crumbs vor allem auf Onlineshops oder anderen E-Commerce-Webseiten, wo etwa Produkte logisch dargestellt werden und durch Suchfunktionen eingegrenzt oder mittels Personalisierungsfunktionen dem Bedarf entsprechend geordnet werden können. Dies erfordert ggfs. eine Anpassung der Datenbank und eine umfassendere Planung, denn die Funktionalität der Seite ist Basis für die Gestaltung der Bread Crumbs selbst.

• Location (Ort)

Gewissermaßen der Klassiker der Bread Crumbs sind sogenannte location-based Bread Crumbs. Sie zeigen die jeweilige Position des Anwenders an, und geben so Rückschlüsse auf die weitere Webseitenstruktur bzw. -hierarchie. Wenn es mehr als zwei Unterebenen gibt, lässt sich so schnell zurück du den sog. Vaterelementen des Seitenbaums klicken.

• Path (Klickpfad)

Die path-based Bread Crumbs zeichnen den tatsächlichen Klickpfad nach, der den Anwender bis hin zur aktuellen Position geführt hat. Je mehr Pfade und je tiefergehend die Struktur der Seite, desto unzuverlässiger und unübersichtlicher wird das Ganze. Diese Art von Bread Crumbs ist damit gewissermaßen das, was der Browser schon mittels Vor- und Zurück-Button ermöglicht. Das Risiko ist groß, dass pfadbasierte Navigationen ziemlich lang und damit unpraktikabel werden.

Wie können Bread Crumbs auf der Webseite technisch umgesetzt werden?

• Mittels Plugin, beispielsweise im beliebten CMS WordPress, lassen sich Bread Crumbs relativ einfach einfügen. Je nach Bedarf können Webseitenbetreiber bestimmte Einstellungen vornehmen, um das Ganze an ihre Bedürfnisse anzupassen. Damit Suchmaschinen all das auslesen oder aber die Strukturen auf den SERPs angezeigt werden können, bedarf es der Unterstützung mittels sogenannter Mikrodaten oder strukturierter Daten. Auch andere Content-Management-Systeme bieten die Möglichkeit, Shops oder andere Systeme über das Backend mit Bread Crumbs auszustatten.
• HTML bietet die Möglichkeit, mittels Links manuell eine Art Bread Crumb umzusetzen, indem das Ganze in einem Div zusammengefasst wird. Mittels relativer Pfade ist ein Rückschluss auf zuvor aufgerufene Seiten möglich. In Kombination mit CSS kann das Ganze einheitlich und nahtlos in das vorhandene Seitendesign implementiert werden.
• Zuletzt bieten sich außerdem PHP sowie JavaScript an, um sie bedarfsgerecht in den vorhandenen Quellcode einzubinden. Die Definierung der PHP-Funktion ist notwendig, um sie im jeweiligen Dokument abrufbar zu machen. Mittels JavaScript lässt sich das Ganze selbst bei dynamischen Webseiten umsetzen, die Art und Weise der Umsetzung ist mit der PHP-Variante vergleichbar.

Wo und wie werden Bread Crumbs in der Praxis eingesetzt?

Je komplexer die Hierarchie einer Seite und je umfassender die eigentliche Seitenstruktur, desto eher werden Sie in der Praxis eine Bread Crumb-Navigation vorfinden. Wer häufig online einkaufen geht, der wird vielfach in Online-Shops dieser Art der sekundären Navigation bereits selbst genutzt haben. Bread Crumbs sind aber kein Allheilmittel, sondern eher eine Unterstützung dem User gegenüber, sich in der komplexen Seitenstruktur zurechtzufinden – wenn die Hierarchie der Seite nicht selbst eine gewisse Logik verfolgt, dann hält sich der Nutzen von Bread Crumbs in diesem Beispiel auch arg in Grenzen.

Am ehesten kann man mittels einer Sitemap erkennen, ob die Einbindung einer Bread Crumb-Navigation eine Verbesserung der Benutzerführung ermöglicht. Mehrere Ebenen in der Seitenstruktur zeigen sich in der Sitemap. Diese Sitemap bilden dann die Grundlage für die Realisierung der Bread Crumb-Navigation.

Doch Vorsicht: Bread Crumbs ersetzen weder eine Hauptnavigation oder erfordern weitreichende Flächen im Layout der Seite. Sie sind und bleiben stets nur eine weitere Option, eine praktische Hilfe für alle, die sich besser auf der Seite zurechtfinden möchten.

Bread Crumbs und Suchmaschinenoptimierung (SEO)

Wir bei den Suchhelden tun unser Bestes, um Ihren Erfolg im E-Commerce langfristig zu sichern. Aus diesem Grunde setzen wir sehr häufig auf Bread Crumbs, da eine Reihe von Usability-Tests darauf hindeuten, dass eine Bread Crumb-Navigation wesentlich zur besseren Navigation innerhalb der Seite beiträgt. Doch wie bei fast allem gilt: Die Umsetzung muss stimmen, denn sonst verpufft der Effekt von Bread Crumbs für die Suchmaschinen- oder OnPage-Optimierung.

Die Google SERPs kennzeichnen Bread Crumbs seit kurzem als Rich Snippets in der URL-Leiste. So ist auch wenig verwunderlich, dass der Google Crawler in der Lage ist, semantisch ausgezeichnete Elemente nicht nur auszulesen, sondern diese zugleich im Index zu speichern und damit eine Anzeige in den SERPs zu ermöglichen. Mittels Mikrodaten, JSON-LD oder RDFa kann eine sekundäre Navigation mittels Bread Crumbs semantisch ausgezeichnet werden.

Fazit: Die Vorteile von Bread Crumbs für Webseitenbetreiber

• Die Navigation und damit der eigentliche Gebrauch der Webseite wird durch Bread Crumbs erleichtert, denn durch die Anzeige der aktuellen Position ist ein Bezug zu weiteren Hierarchieebenen der Webseite möglich.
• Mit nur einem Klick gelangen Besucher in die Seitenhierarchie, sodass auch jene, die über Suchmaschinen wie Google oder Deep Links auf die Seite gekommen sind, sich besser zurechtfinden.
• Bread Crumbs lassen sich leicht und schnell in bestehende Webseiten einfügen.