Bread Crumbs
Inhaltsverzeichnis
Definition
Breadcrumbs, auf Deutsch Brotkrümel, sind ein sekundäres Navigationsschema, das den Standort des Benutzers auf einer Website oder in einer Webanwendung anzeigt. Der Begriff stammt aus dem Märchen von Hänsel und Gretel, in dem die beiden Kinder Brotkrümel als Wegmarkierung ausstreuten, um den Weg zurück zu ihrem Zuhause zu finden. Genau wie im Märchen bieten Breadcrumbs in realen Anwendungen den Benutzern eine Möglichkeit, den Weg zurück zu ihrem Ausgangspunkt zu verfolgen.
Obwohl alle Brotkrümel im Webdesign dem gleichen Zweck dienen, die Auffindbarkeit innerhalb der Website zu verbessern, gibt es drei unterschiedliche Arten der Breadcrumb-Navigation, die derzeit verwendet werden.
Ortsbasierte Breadcrumbs
Ortsbasierte Breadcrumbs zeigen dem Benutzer, wo er sich in der Hierarchie der Website befindet. Sie werden üblicherweise für Navigationsschemata mit mehr als 2 Ebenen verwendet. Im folgenden Beispiel steht jedes Element für eine Seite, die sich eine Ebene höher befindet als die Seite rechts davon.
Home > Seite1 > Unterseite > Aktuelle Position
Attributbasierte Breadcrumbs
Attributbasierte Breadcrumb-Trails zeigen die Attribute einer bestimmten Seite an. Sie weisen somit nicht nur auf den aktuellen Standort auf der Website hin, sondern liefern auch Meta-Informationen zu jeder Seite. Der Zugriff auf diese Art von Breadcrumb-Navigation führt nicht notwendigerweise auf den Pfad zurück, über den ein Besucher in der Navigation der Webseite gekommen ist. Diese Art von Breadcrumb-Navigation wird häufig für E-Commerce-Websites verwendet, bei denen eine einzelne Produktseite über verschiedene Pfade zugänglich ist. Ein Beispiel für attributbasierte Breadcrumbs:
Home > Fahrräder > Mountainbikes > Herren > 29 Zoll > Orange
Diese Art von Breadcrumbs wird beispielsweise bei Zalando genutzt:
Screenshot mit Breadcrumb-Navigation von zalando.de
Pfadbasierte Breadcrumbs
Pfadbasierte Breadcrumb-Trails zeigen Benutzern die Schritte an, die sie unternommen haben, um zu einer bestimmten Seite zu gelangen. Pfadbasierte Breadcrumbs sind insofern dynamisch, als dass sie die Seiten anzeigen, die der Benutzer besucht hat, bevor er auf der aktuellen Seite angekommen ist.
Home > Seite 1 > Seite 2 > Home > Seite 3 > Warenkorb
Für die Umsetzung und Implementierung der Brotkrümel in eine Webseite werden bei Content Management Systemen wie WordPress oder Joomla Plug-ins verwendet. Bei anderen Webseiten können Breadcrumbs mit Hilfe von Skriptsprachen wie PHP oder JavaScript eingefügt werden. Alternativ lassen sich Breadcrumbs auch manuell in den HTML Code einbauen.
Die Breadcrumb-Navigation bietet neben ihrer einfachen Implementation viele weitere Vorteile. Die Verbesserung der Usability oder Benutzerfreundlichkeit einer Webseite ist einer davon, denn auf Websites mit vielen Unterseiten können Breadcrumbs Benutzern bei der Orientierung helfen. Breadcrumbs stellen hierbei eine effektive visuelle Hilfe dar, die den Standort des Benutzers innerhalb der Hierarchie der Website anzeigt. Im Hinblick auf die Benutzerfreundlichkeit reduzieren Breadcrumbs zudem die Anzahl der Aktionen, die ein Website-Besucher durchführen muss, um auf eine höhere Seite zu gelangen. Somit bieten Breadcrumbs Benutzern die Möglichkeit, mit nur einem Klick zu übergeordneten Seiten zu navigieren, statt mehrere Male auf die Schaltfläche "Zurück" des Browsers klicken zu müssen, um zur ursprünglichen Seite zu gelangen. Zudem verbessern sie die Auffindbarkeit bestimmter Unterseiten.
Breadcrumbs erweisen sich aber nicht nur für die Usability, sondern auch für die Suchmaschinenoptimierung (SEO) als nützlich. Suchmaschinen wie Google helfen die sekundären Navigationselemente dabei, die Struktur der Website besser zu verstehen und dadurch relevantere und genauere Informationen in ihren Suchergebnissen anzuzeigen. Durch die internen Links erhalten Suchmaschinen zudem mehr Informationen über eine bestimmte Seite und die Seiten, mit denen sie verbunden ist. Darüber hinaus zeigt Google in den Suchergebnissen Breadcrumbs an, wie in der nachfolgenden Abbildung zu sehen ist. Das Suchergebnis wird dadurch für Suchmaschinennutzer interessanter, mit positiven Auswirkungen auf die CTR (Click-Through-Rate) und den Traffic einer Webseite.
Screenshot mit Breadcrumbs in den SERPs von google.de
Breadcrumbs erhöhen die Verweildauer und verringern die Bounce Rate
Über die SERPs von Google und anderen Suchmaschinen gelangen User oft direkt auf Unterseiten einer Webseite, wenn sie nach spezifischen Informationen oder Produkten suchen. Breadcrumbs zeigen diesen Besuchern, dass es sich um einen Unterseite handelt und erleichtern ihnen beispielsweise die Navigation zu einer übergeordneten Kategorie mit einem Überblick über das gesamte Angebot. Dadurch wird die Website für User interessanter und sie werden wahrscheinlich länger auf ihr verweilen, sie weiter erkunden und nicht schnell wieder verlassen. Die somit erzeugte längere Verweildauer und verringerte Bounce Rate sind für Google wichtige Faktoren bei der Bewertung der Relevanz einer Webseite für bestimmte Suchanfragen.
Was sollte bei der Implementierung beachtet werden?
Die Breadcrumb Navigation sollte nicht als Ersatz, sondern als Ergänzung zur allgemeinen Navigation einer Webseite genutzt werden.
Zudem wird in einem Breadcrumb-Pfad das letzte Element, das heißt die aktuelle Seite, auf der sich der User befindet, nicht mit sich selbst verknüpft und somit nicht als Link dargestellt.
Die einzelnen Breadcrumbs sollten für eine bessere Übersichtlichkeit durch Zeichen oder Symbole voneinander getrennt werden. Das herkömmliche Zeichen, das zum Trennen zweier Breadcrumb-Navigationselemente verwendet wird, ist das Größer-als-Zeichen " > ". Andere gebräuchliche Zeichen sind ein Schrägstrich " / " oder ein senkrechter Strich " | ", der sogenannte "Pipe". Die Schriftgröße sollte angemessen und nicht zu groß sowie wie die Abstände zwischen den Elementen nicht zu klein gewählt werden.
Bei mobilen Webseiten sollte auf Breadcrumbs verzichtet werden, denn je nach Tiefe der Webseitenstruktur nimmt die sekundäre Navigation zu viel Platz auf den kleinen Displays ein. Für eine bessere User Experience auf mobilen Geräten sollte der Benutzer stattdessen in der Lage sein, in der App selbst zu navigieren.
Keyword Consistency ist ein wichtiger Aspekt im Hinblick auf die SEO. Da Breadcrumbs hierbei eine wichtige Rolle spielen können, sollte sichergestellt werden, dass dieselben Keywords in den Breadcrumb-Ankertexten verwendet werden, wie sie im Seitentitel und in der Seiten-URL vorhanden sind.
Weiterführende Links
- https://www.usability-tipps.de/info/index.php/verbesserte-usability-durch-breadcrumbs/
- https://yoast.com/breadcrumbs-seo/
- https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/