Breadcrumb

Mit Breadcrumb (deutsch Brotkrümel beziehungsweise Brotkrümelnavigation) bezeichnet man Navigationselemente in einem User Interface, die dem Benutzer erlauben den Weg und die Tiefe der Navigationsstruktur nachzuvollziehen. Sie sind dabei sekundäre Navigationselemente. Sie zeigen dem User die eigene Position in der Ordnung einer Website. Der Begriff leitet sich von der Spur von Brotkrumen ab, mit der Hänsel und Gretel im gleichnamigen Märchen ihren Nachhauseweg markieren. Neben Breadcrumbnavigationen, die die Position innerhalb einer Struktur zeigen, gibt es ein anderes Prinzip. In diesem wird in der Breadcrumb nicht die Struktur abgebildet, sondern der genaue Weg, den ein User genommen hat. Umso mehr Schritte der User geht, desto mehr Stationen werden angezeigt. Dadurch sind auch Schritte vor und zurück nachzuvollziehen. Diese Definition passt genauer zur Brotkrümel Metapher. In der Praxis wird diese Art den Weg des Users nachzuzeichnen, aber selten verwendet. Ein Grund hierfür ist, dass User eher die Vor- und Zurückbuttons im Browser nutzen, um ihren eigenen Weg auf Webseiten nachzuvollziehen. In den allermeisten Fällen bezeichnen Bradcrumb Navigationen, die auf Hierarchie oder Kategorien basieren und nicht auf der Nachzeichnung des User Weges. Nutzer von Webseiten bewegen sich zu Beginn zwar oft entlang der Hierarchie einer Webseite, mit zunehmender Nutzungsdauer werden aber auch Querverweise genutzt oder es folgen Schritte zurück.

Beispiele für Hierarchie orientierte und Klickweg basierte Navigationsmuster

Beispiel für eine hierarchische Navigationsstruktur

Home > Produkte > Schuhe > Nike

Beispiel für Klickweg

Home > Produkte > Schuhe > Home > Inspirationen > Blog > Jacken

Im Folgenden wird das Prinzip der Breadcrumb als hierarchisch oder Attribut basiertes organisiertes Navigationselement behandelt.

Ort und Attribut basierte Brotkrümmel Implementationen

Breadcrumb helfen dabei, Seiten mit vielen tiefen Elementen zu ordnen und zu strukturieren. Breadcrumbs werden dabei typischerweise in zwei verschiedene Arten unterteilt.

  1. Location bzw. Ort basierte Breadcrumbs. Sie zeigen dem Benutzer die Position innerhalb der Website. Ein typisches Beispiel sind Internetforen. Viele Foren sind in verschiedene Kategorien mit jeweiligen Unterforen geordnet.
  2. Attribut basierte Breadcrumbnavigation. Seiten, häufig Produktseiten oder deren übergeordnete Kategorien werden nach Merkmalen der Produkte kategorisiert. Diese können statisch organisiert sein. In diesem Fall gibt es kaum Unterschiede zu einer Location basierten Breadcrumb. Häufig macht es aber auch Sinn, Seiten oder Produkte nach verschiedenen Merkmalen in mehrere Kategorie einzuordnen. Je nach Userinteresse und Intention können dann verschiedene Breadcrumbs ausgespielt werden. Eine Möglichkeit dies umzusetzen ist das Anbieten von verschiedenen Wegen über die Hauptnavigation. So könnte sich ein Schuh sowohl unter dem Attribut einer bestimmten Farbe, einer Marke oder nach der Art des Schuhes finden. Dies ist vor allem in Shop Systemen üblich. Man kann in diesem Fall von parallelen Hierarchien sprechen. Attribut basierte Breadcrumb machen häufig den Einsatz einer Datenbank in der die unterschiedlichen Attribute beispielsweise eines Produktes gespeichert sind notwendig. Häufig werden auch Ort und Attribut basierte Implementationen kombiniert. Dabei werden meist die Top Elemente hierarchisch eingeordnet und am Ende der Breadcrumb spezifische Kategorien über Attribute hinzugefügt.

Vorteile für die Nutzer Erfahrung

Breadcrumb Navigationen helfen dem User sich besser auf der Seite zurechtzufinden.

  • Die einzelnen Elemente der Breadcrumb Navigation sind in der Regel anklickbar. Dies ist praktisch, wenn zu einem übergeordneten Element zurück navigiert werden soll. Da die Breadcrumb mehrere Ebenen abbildet, ist dies praktischer als Nutzung des Back Buttons.
  • Breadcrumb helfen bei der Orientierung auf der Webseite, da sie die im Moment besuchte Seite in die gesamte Struktur der Seite einordnen. Dies ist vor allem dann nützlich, wenn der Nutzer den Weg auf einer Webseite nicht auf der Startseite beginnt. Tiefere Seiten sind nicht immer leicht einzuordnen, die Breadcrumb Navigation hilft dem User dabei.
  • Breadcrumb stellen oft eine sehr schnelle Möglichkeit der Navigation dar. Teilweise sind weniger Klicks nötig, um zum gewünschten Ziel zu kommen, als es bei der Hauptnavigation der Fall ist.
  • Sie nehmen wenig Platz ein. Sie erhöhen also die Bedienbarkeit der Seite, ohne dass viel Platz geopfert werden muss.

Relevanz für die Suchmaschinenoptimierung

Der Hauptnutzen von Breadcrumbs besteht darin die Usererfahrung auf der Webseite zu verbessern und die Konversionwahrscheinlichkeit zu erhöhen. Aber auch aus SEO Sicht bietet eine Breadcrumb in vielen Fällen Vorteile. Gerade wenn ein User aus der organischen Suche auf eine Seite kommt, hilft die zusätzliche Orientierung durch die Breadcrumb die Bounce Rate zu senken. Eine niedrige Bounce Rate gilt als Faktor für das Suchmaschinenranking. Zudem spielt Google zum Teil auch die Breadcrumb selbst im angezeigten Snippet aus. Durch den zusätzlichen Raum und die Informationen erregt ein in solcherweise angereichertes Rich Snippet mehr Aufmerksamkeit, wodurch die CTR (Click Through Rate) gesteigert werden kann. Im Code der Seite sollte das Mikroformat oder das RDFa Format genutzt werden.

Breadcrumb Implementationen können in Bezug auf Duplicate Content für Probleme sorgen, wenn Seiten über mehrere Attribute erreicht werden können. Es sollte mit dem Canonical Tag gearbeitet werden, um hier Probleme zu vermeiden.

Quellen

 

Ihr Weg zu mehr Besuchern und Umsatz