Breadcrumbs

Breadcrumbs - Alles begann mit Hänsel und Gretel

„Breadcrumbs“ ist zugegebenermaßen einer der merkwürdigsten Begriffe im Internet. Die meisten Internet-Nutzer würden Brotkrümel bzw. Brotkrumen nicht im Entferntesten mit dem Web in Verbindung bringen.

Breadcrumbs

Trotzdem kommst Du als Web-User fast täglich mit Breadcrumbs in Kontakt. Unter Breadcrumbs wird die sekundäre Form der Navigation auf einer Website verstanden. Deshalb wird anstelle des Wortes „Breadcrumbs“ auch häufig der Begriff „Breadcrumb-Navigation“ verwenden.

Bei der Breadcrumb-Navigation handelt es sich schlicht und einfach um einen Link-Pfad, der dem Nutzer einer Webseite anzeigt, wo er sich innerhalb der Seitenstruktur der Seite befindet und ihm dadurch die Navigation vereinfacht. Die Breadcrumb-Navigation ist in der Regel seitenhierarchisch aufgebaut und zeigt dem Besucher einer Webseite den logischen Pfad von der Homepage bis zur aktuell besuchten Unterseite. Üblicherweise befinden sich Breadcrumbs in oberen Bereich einer Webseite.

Mit der Erklärung, was ein Breadcrumb ist, erschließt sich auch die Herkunft des Begriffs. Der Name ist eine Anspielung auf das Märchen „Hänsel und Gretel“. Die beiden Kinder streuten in der Geschichte der Gebrüder Grimm Brotkrumen auf den Pfad, um den Weg zurück nach Hause zu finden. Und genauso sollen Breadcrumbs Website-Usern den Weg durch eine Webseite weisen.

Was bringt eine Breadcrumb-Navigation?

Wie bereits einleitend dargestellt, ist die Hauptfunktion der Breadcrumb-Navigation die Orientierung des Nutzers. In vielen Fällen gelangen User über eine Suchmaschine wie Google oder eine sonstige Verlinkung auf eine Unterseite einer Website. Vor allem, wenn der Nutzer von Google auf eine ihm unbekannte Seite gelangt, hat er möglicherweise Schwierigkeiten, sich darauf schnell zurechtzufinden. Ein Breadcrumb erleichtert dem User die Orientierung, da sie ihm auf einen Blick zeigen, wo er sich gerade in der Seitenstruktur einer Website befindet. So weißt Du beispielsweise beim Lesen des Breadcrumbs (Homepage > Herren > Bekleidung > Shirts) dass Du Dich in der Unterkategorie „Shirts“ im Bereich „Herrenbekleidung“ eines Onlineshops befindest.

Neben der Orientierungsfunktion ist die zweite Hauptfunktion von Breadcrumbs die Inspiration. Ein Breadcrumb verleiten viele Nutzer dazu, sich durch eine Website zu klicken und sich andere Unterseiten anzusehen. So erhöhen es nicht nur die Verweildauer von Nutzern auf einer Webseite, sondern auch die Conversion-Rate. Das oben genannte Breadcrumb mag Dich beispielsweise dazu verleiten, Dir auch noch andere Unterseiten im Bereich der Herrenbekleidung anzusehen.

Welche Arten der Breadcrumb-Navigation gibt es?

Es existieren drei Arten der Breadcrumb-Navigation: Ort (Location), Pfad (Path) und Attribut (Attribute). Welcher dieser drei Arten der Navigation auf einer Website zum Einsatz kommt, hängt sowohl von der Struktur als auch von der Zielsetzung der Seite ab.

Bei ortsbezogenen (location-based) Breadcrumbs gibt das Breadcrumb die aktuelle Position des Users in der Hierarchie der Website an. Diese Art der Breadcrumb-Navigation findest Du besonders häufig bei großen, streng hierarchisch aufgebauten Websites mit einer Vielzahl von Unterebenen. So könnte ein ortsbezogenes Breadcrumb einer Reise-Webseite folgende Struktur haben: Startseite > Europa > Deutschland > Nordrhein-Westfalen > Köln > Kölner Dom.

Bei einer pfadbezogenen (path-based) Breadcrumb-Navigation zeigt das Breadcrumb den Klickpfad des Users an, über den er zu seiner aktuellen Position gelangt ist. Diese Art der Navigation wird aus zwei Gründen eher selten angewendet. Zum einen kann der Klickpfad bei komplexen Seiten sehr lange werden und zum anderen erfüllen die Vor- und Zurück-Buttons des Webbrowsers im Grund genommen die gleiche Funktion.

Attributbezogene (attribute-based) Breadcrumbs zeigen die Attribute einer bestimmten Unterseite an. Im Gegensetz zu den ortsbezogenen Breadcrumbs weisen sie nicht auf die aktuelle Position auf der Website, sondern liefern dem Nutzer Meta-Daten. Diese Art der Breadcrumb-Navigation wird häufig von Onlineshops verwendet. Ein Beispiel für ein attributbezogenes Breadcrumb wäre Home > Oberbekleidung > Shirts > Herren > XL > blau.

Wo kann man Breadcrumbs einsetzen?

Die Breadcrumb-Navigation hat sich in den letzten Jahren als Standard etabliert und kommt inzwischen auf den meisten Webseiten zum Einsatz. Vor allem bei sehr großen Websites und Portalen, die in der Regel eine recht komplexe hierarchische Struktur aufweisen, bietet sich die Brotkrumen-Navigation zur Orientierung der User an. Auch für Onlineshops aller Größenordnungen ist eine derartige sekundäre Navigationshilfe von Vorteil.

Lediglich bei kleinen Webseiten und bei Seiten ohne logische Hierarchie ist von einer Brotkrumen-Navigation eher abzuraten. Wichtig ist jedoch der Hinweis, dass Breadcrumbs als sekundäre Navigation niemals Menüs als primäre Navigation ersetzen können oder sollten. Die Breadcrumb-Navigation ist immer eine Unterstützung der primären Menü-Navigation.

Wie werden Breadcrumbs grafisch dargestellt?

Die grafische Darstellung von Breadcrumbs auf Webseiten fällt sehr unterschiedlich aus. In der Regel werden sie durch typografische Symbole wie Pfeile oder Schrägstriche voneinander getrennt. Oftmals wird auch ein Button zur Darstellung eines einzelnen Breadcrumbs verwendet.

Grundsätzlich sind die Brotkrumen dezent grafisch gestaltet. Sie sollen weder den eigentlichen Seiteninhalt noch die primäre Menü-Navigation in den Hintergrund rücken. Wichtig ist bei der Verwendung einer Brotkrumen-Navigation, dass diese auf allen Unterseiten einer Website zum Einsatz kommt. Wenn dies nicht der Fall ist, könnten Nutzer verwirrt werden.

Was sind die Vorteile einer Breadcrumb-Navigation?

Breadcrumbs liefern dem Nutzer einer Website eine ganze Reihe von Vorteilen. In erster Linie erleichtern sie dem User die Orientierung auf der Seite. Zudem erlauben sie eine schnellere Navigation innerhalb einer Website. Mithilfe eines Breadcrumbs kann sich ein Nutzer mit einem Klick auf die Startseite, eine Kategorie- oder Meta-Ebene bewegen.

Neben der besseren Orientierung und der schnelleren Navigation, die vor allem für Webseiten-Nutzer wichtig sind, hat die Breadcrumb-Navigation auch zwei wesentliche Bedeutungen für Website-Betreiber. Zum einen erhöht sie die Verweildauer der Nutzer auf der Seite, da ein Breadcrumb Nutzer dazu animiert, sich andere Unterseiten anzusehen. Und zum anderen verringert Brotkrumen die Bounce Rate, also den Prozentsatz der Nutzer, die eine Seite verlassen.

Häufige Fragen und Antworten

Was sind Breadcrumbs?
Breadcrumb (deutsch: Brotkrumen, Brotkrümel) ist eine sekundäre Navigation innerhalb einer Webseite. Sie wird auch als Breadcrumb- oder Brotkrumen-Navigation oder Brotkrümelnavigation bezeichnet. Brotkrumen bieten in der Anwendung den Benutzern die Möglichkeit, den Weg zurück zur Einstiegsseite zu finden oder andere Ebenen der Website schnell zu erreichen.
Wie nutzen Suchmaschinen Breadcrumbs?
Breadcrumbs helfen Suchmaschinen dabei, einzelne Unterseiten besser in die allgemeine Struktur der Seite einzuordnen. Da Suchmaschinen Webseiten häufig nicht in sequentieller Reihenfolge – beginnend mit der Startseite – crawlen, sondern vorher vom Scheduler festgelegte Unterseiten aufrufen, kann eine Brotkrumen-Navigation dafür sorgen, dass die Suchmaschine ein besseres Bild der Seitenstruktur bekommt.
Was ist eine Breadcrumb-Navigation?
Eine Breadcrumb-Navigation ist ein Entwurfsmuster für die Gestaltung grafischer Benutzeroberflächen. Üblicherweise ist es eine Textzeile, die dem Benutzer anzeigt, in welcher Verzweigung er sich innerhalb einer Applikation befindet.