Breadcrumb-Navigation: So macht sie eure Website benutzerfreundlicher

Benutzerfreundlich ist eine Website unter anderem dann, wenn der User jederzeit weiß, wo er sich innerhalb des gesamten Online-Auftritts befindet. Eine Breadcrumb-Navigation (Brotkrümel-Navigation) ermöglicht ihm genau diese Orientierung. Das Wichtigste auf einen Blick.

(Karte / Pixabay-Lizenz)

Was ist eine Breadcrumb-Navigation?

Die Breadcrumb-Navigation ist nach dem Märchen "Hänsel & Gretel" benannt: Um den Weg zurück aus dem Wald zu finden, streuten die Kinder Brotkrümel (engl. breadcrumbs) hinter sich. Entlang dieser Spur wollten sie wieder nach Hause gelangen (was im Märchen, wenn sich euer Blogger recht entsinnt, nicht klappte: Unkooperative Waldbewohner fraßen die Krümel). 

In der Online-Welt funktioniert eine Breadcrumb-Navigation ähnlich: Ein Online-Auftritt ist vergleichbar mit dem offenen Ozean, es gibt keinen Anfang, kein Ende und keine vorgegebene Richtung (wie bei einem gedruckten Buch). Entsprechend wichtig ist es, dem Website-Besucher Orientierung zu bieten.

Eine Breadcrumb-Navigation zeigt auf jeder einzelnen Seite in einer Pfad-Ansicht, wo innerhalb des gesamten Online-Auftritts sich der Besucher gerade aufhält. Nehmen wir als Beispiel den Musikinstrumente-Händler Thomann (für eine größere Ansicht bitte in das Bild klicken): 

Breadcrumb-Navigation am Beispiel von thomann.de

Von links nach rechts: 

➤ Haus-Symbol: Dieses steht für die Startseite von thomann.de. Würde der User darauf klicken, käme er auf selbiger raus. 

➤ "Alle Kategorien": Dieser zweite "Brotkrümel" ist ebenfalls klickbar und würde den User auf der Übersichtsseite aller Shop-Kategorien von thomann.de führen.

➤ "Gitarren und Bässe": Dieser dritte (ebenfalls klickbare) Brotkrümel-Navigationspunkt zeigt dem User, in welcher Shop-Oberkategorie er sich aktuell befindet. 

➤ "E-Gitarren": Dieser vierte (auch aufrufbare) "Brotkrümel" sagt dem User, in welcher Shop-Unterkategorie er sich befindet.

➤ "Heavy Gitarren": Der fünfte und letzte "Krümel" zeigt ihm schließlich, in welcher Shop-Detailkategorie er sich befindet. 

Diese Breadcrumb-Navigation auf thomann.de hilft dem User zu erkennen, wo er sich hierarchisch innerhalb des gesamten Online-Auftritts aufhält. 

Wichtig: Der jeweils letzte Brotkrümel-Navigationspunkt soll ausdrücklich nicht klickbar sein, da sich der User bereits auf der Seite befindet.

Breadcrumb-Navigation: Was sind die Usability-Vorteile?

Die Usability ist ein Teilaspekt der User-Experience (UX) und fragt, wie gebrauchstauglich ein Online-Auftritt ist. Die Usability interessiert sich nicht für Farben oder Ästhetik. Sie will stattdessen nur wissen: Wie lange braucht ein User, bis er verstanden hat, um was es auf einer Website geht und was er dort machen kann? Die Usability-Grundfrage lautet stets: Wie selbsterklärend ist ein Online-Auftritt?

Was eine Breadcrumb-Navigation aus Usability- und SEO-Sicht leistet:

1. Orientierung: Der User weiß dank der Breadcrumb-Navigation jederzeit, wo innerhalb des gesamten Online-Auftritts er sich befindet. Dies ist vor allem wichtig, wenn Besucher über die Google-Suche direkt auf einer Unterseite des Online-Auftritts rauskommen. Hier entscheiden die ersten Sekunden des Besuchs darüber, ob sich ein Besucher zurechtfindet, ob er weiß, wo er ist, von wem der Online-Auftritt ist und was er hier tun kann. 

2. Verweildauer: Über eine Breadcrumb-Navigation ermöglicht ihr es euren Website-Besuchern, tiefer in euer Angebot einzutauchen. Nehmen wir das Thomann-Beispiel (s. o.): Wenn mir Heavy-Gitarren nicht zusagen, kann ich in der Brotkrümel-Navigation die Ober-Kategorie "Gitarren und Bässe" anklicken und mir das weitere Thomann-Gitarren-Angebot anschauen. 

3. SEO-Vorteil: Je leichter es Google fällt, die Architektur eures gesamten Online-Auftritts zu verstehen, desto besser kann die Suchmaschine eure komplette Website erfassen. Und desto logisch-stringenter wirkt euer Online-Auftritt auf Google. So wird die Suchmaschine eure Website eher als hochwertig und benutzerfreundlich einstufen. Richtig ausgezeichnet kann eure Breadcrumb-Navigation auch direkt in Google-Suchtreffern angezeigt werden (Erklärung folgt unten).

Wichtig: Eine Breadcrumb-Navigation soll die Haupt-Navigation (die sog. globale Navigation) eines Online-Auftritts weder ersetzen noch in den Schatten stellen. Sie soll die Haupt-Navigation unterstützen.

Welche Arten von Breadcrumb-Navigationen gibt es?

1. Ortsbezogene Breadcrumb-Navigation: Diese gängigste Variante zeigt dem User immer ausgehend von der Startseite des Online-Auftritts hierarchisch absteigend, wo er sich befindet. Das obige thomann.de-Beispiel ist eine klassische ortsbezogene Breadcrumb-Navigation.

2. Eigenschaftsbezogene Breadcrumb-Navigation: Sie arbeitet wie eine ortsbezogene Breadcrumb-Navigation, ergänzt diese aber in Online-Shops um Eigenschaften (Attribute) des jeweiligen Produktes wie Farbe, Form oder Größe. Jedoch bilden viele Online-Shops solche Produkt-Eigenschaften nicht über die Breadcrumb-Navigation ab, sondern über separat angezeigte Filter-Kategorien. Am Beispiel von thomann.de (für eine größere Ansicht bitte in das Bild klicken):

Produkt-Attribute am Beispiel von thomann.de

3. Pfadbezogene Breadcrumb-Navigation: Sie zeigen dem User nicht hierarchisch, wo innerhalb des Online-Auftritts er sich befindet, sondern entlang seiner zuletzt aufgerufenen Seiten. Es wird exakt der Weg nachgezeichnet, den der User bislang auf eurer Website gegangen ist.

1, 2 oder 3: Welche Breadcrumb-Navigations-Variante ist zu empfehlen? Ich bemühe mal wieder einen unter Juristen beliebten Satz und sage: Es kommt ganz darauf an. Mit Variante 1 (ortsbezogene Breadcrumb-Navigation) seid ihr aber in den allermeisten Fällen in Sachen Usability auf der sicheren Seite – vor allem hinsichtlich Website-Besuchern, die über die Google-Suche auf einer eurer Unterseiten rauskommen und schnell wissen sollten, wo sie gelandet sind.
  

Braucht die mobile Smartphone-Ansicht auch eine Breadcrumb-Navigation?

Hier gehen die Meinungen auseinander: Manche argumentieren, eine Breadcrumb-Navigation würde auf einem kleinen Smartphone-Screen zu viel Platz einnehmen.

Ich plädiere dennoch dafür, auch in der mobilen Ansicht mit einer Brotkrümel-Navigation zu arbeiten, evtl. in einer verkürzten Version (indem z. B. nur die letzten beiden Hierarchie-Ebenen angezeigt werden).

Auch für Smartphone-User gilt: Sie brauchen Orientierung. So arbeitet zum Beispiel otto.de in der mobilen Ansicht ebenfalls mit einer Brotkrümel-Navigation (für eine größere Ansicht bitte in das Bild klicken):

Breadcrumb-Navigation in der mobilen Ansicht von otto.de 

Für die mobile Ansicht gilt dasselbe wie für die Desktop-/Laptop-Darstellung: Die Breadcrumb-Navigation soll die Haupt-Navigation weder ersetzen noch in den Schatten stellen. Sie soll die Haupt-Navigation unterstützen.

Wie lässt sich eine Breadcrumb-Navigation implementieren?

Nutzt ihr ein gängiges Open-Source-CMS wie Typo3, Joomla, Drupal oder Wordpress, bietet euch die jeweilige Community schlüsselfertige Plug-ins bzw. Add-ons, um eine Breadcrumb-Navigation zu implementieren.

Alternativ ist eine Brotkrümel-Navigation durch einen Web-Programmierer via HTML und CSS umsetzbar.

Wichtig: Zeichnet eure Breadcrumb-Navigation semantisch mittels schema.org aus, damit Google diese eindeutig erkennen und in den Suchtreffern abbilden kann (für eine größere Ansicht bitte in das Bild klicken):

Breadcrumb-Navigation innerhalb eines Google-Suchtreffers

Google bietet dazu in seiner Search Central die Anleitung "Strukturierte Daten für Navigationspfade (BreadcrumbList)".

Abschließender Tipp: Stellt sicher, dass ausnahmslos jede einzelne Seite eures Online-Auftritts eine Breacrumb-Navigation bietet.

Ich wünsche euch viel Erfolg beim Brotkrümelstreuen. ;-)

Link-Tipps:

• Web-Usability: So wird eure Website benutzerfreundlicher
• User-centered Design: So gelingt euer Web-Auftritt
• Unternehmens-Website: Welches CMS ist das richtige?