Breadcrumbs im Webdesign: Kleine Krümel, große Wirkung

In unserem heutigen Blogbeitrag möchten wir Ihnen ein Basic-Element aus dem Webdesign näher vorstellen, zu dem wir regelmäßig Fragen von unseren Kunden bekommen: Die Breadcrumbs. Wir möchten Ihnen erläutern, was es mit dem Navigations-Element mit dem literarischen Namen auf sich hat, welche unterschiedlichen Typen es gibt und inwiefern Sie von dessen Einbau profitieren können.

Was sind Breadcrumbs?

Als Breadcrumbs bezeichnet man die Bestandteile einer bestimmten “Second-Level-Navigation”, mit deren Hilfe sich die Besucher einer Website besser auf dieser zurechtfinden. In der Regel findet sich die Navigation im oberen Bereich der Seite und ermöglicht dem Nutzer einen guten Überblick über seinen derzeitigen “Standort” und ein leichtes Navigieren zu den höher liegenden Ebenen.

Ein Beispiel:

Woher kommt der Begriff?

Der Name “Breadcrumbs” ist tatsächlich eine Anlehnung an das Märchen “Hänsel und Gretel”. Hier versuchen die beiden Kinder mithilfe von Brotkrumen den Weg aus einem dunklen, unübersichtlichen Wald zu finden. Im Deutschen findet sich daher auch die Bezeichnung “Brotkrumen-Navigation”.

Eine andere, ebenso mythische Bezeichnung für dieses Navigationselement ist “Ariadnepfad”, in Anlehnung an die griechische Mythologie. Theseus wird in der Geschichte von Daidalos in ein Labyrinth verbannt, dessen Ausweg er mithilfe eines Wollknäuels fand, das er von Ariadne erhielt.

Beide Geschichten fassen das Wesen der Breadcrumb-Navigation perfekt zusammen: Gerade auf Webseiten mit vielen, hierarchisch angeordneten Unterseiten bietet diese Form der Navigation den nötigen Halt, um die Orientierung “im dichten Wald” oder im “unüberschaubaren Labyrinth” der Inhalte behalten zu können.

Welche Arten der Breadcrumb-Navigation gibt es?

Grundsätzlich lässt sich sagen, dass eine Breadcrumb-Navigation i.d.R. horizontal angeordnet ist und anzeigt, wo sich der Lesende gerade befindet. Gleichzeitig enthält sie Links zu den jeweils darüber liegenden Verzeichnis-Ebenen. Zumeist sind die Breadcrumbs im oberen Bereich der Website zu finden, manchmal werden Sie auch unterhalb des Contents in Footer-Nähe eingebaut.

Location-Breadcrumbs

Diese Art der Breadcrumbs zeigt die aktuelle Position des Seitenbesuchers ausgehend von der Hauptseite an. Hier kann der Nutzer also seinen aktuellen “Standort” in Relation zu den übergeordneten Kategorien ablesen und sich durch die Verlinkung auch schnell wieder nach oben navigieren.

Beispiel:

Startseite >> Kategorie 1 >> Unterkategorie 1.2 >> Unterkategorie 1.2.1

Path-Breadcrumbs

Das englische Wort “Path” bedeutet übersetzt “Pfad”. Diese Breadcrumbs zeigen dem Nutzer seinen aktuellen Klickpfad an, wodurch er sich innerhalb seiner eigenen Bewegung auf der Website schnell zurück navigieren kann.

Beispiel:

Kategorie 1 >> Startseite >> Kategorie 3 >> Unterkategorie 3.2

Attribute-Breadcrumbs

Diese letzte Art der Breadcrumbs nutzt für die Navigation eine semantische Herangehensweise. Gerade wenn Seiten sehr umfangreich sind, bietet sich diese Form der Second-Level-Navigation an. Hier werden dem Nutzer verschiedene Wege zu seinem Suchergebnis angezeigt, sodass er die Möglichkeit hat, sich auf unterschiedlichen semantischen Pfaden zu bewegen.

Beispiel:

Startseite >> Mode >> Kinder >> Schuhe >> Winterstiefel
Startseite >> Schuhe >> Winter >> Kinder >> Winterstiefel

Welche Art der Breadcrumb-Navigation Sie für Ihre Website wählen, sollten Sie auf jeden Fall anhand der Inhalte und der Architektur der Seite entscheiden. Breadcrumbs sind nur dann sinnvoll eingesetzt, wenn der Nutzer auch wirklich davon profitieren kann und diese Navigationspunkte nutzt.

Wie nützen Breadcrumbs meiner Website?

Breadcrumbs sollten in keinem Fall die Hauptnavigation der Website (z.B. über eine Menüleiste) ersetzen. Sie bieten als Second-Level-Navigation aber eine sehr benutzerfreundliche Möglichkeit der Bewegung auf der Website. Außerdem verdeutlichen Sie in der Regel die hierarchischen Strukturen der Seite deutlich besser als die Hauptnavigation vermag.

Nutzen für den User

Ohne viele Klicks können die Nutzer auf die nächsthöhere Ebene navigieren. Dies ist gerade auch in Bezug auf Erstbesucher Ihrer Seite interessant, die nicht über die Startseite, sondern eine Unterkategorie auf Ihre Inhalte stoßen. Breadcrumbs reduzieren hier die sog. Bounce-Rate, also das schnelle Verlassen der Website wegen unpassender Inhalte. Die Breadcrumb-Navigation lädt die Besucher quasi ein, ihre Recherche nicht durch Verlassen der Seite fortzuführen, sondern durch das Bewegen in den nächsthöheren Kategorie-Ebenen. Auf diese Weise können die Breadcrumbs auch das Interesse der Nutzer für bestimmte Inhalte auf Ihrer Seite wecken, das zuvor eventuell noch gar nicht vorhanden war.

Sie sehen: Der Nutzen für die Besucher ist vielseitig. Und durch die horizontale Ausrichtung benötigen die Breadcrumbs kaum Raum auf der Seite.

Nutzen für die Suchmaschinenoptimierung (SEO)

Auch für die Suchmaschinenoptimierung hat die Breadcrumb-Navigation einen nicht zu verkennenden Nutzen. Zunächst ist dabei das Offensichtliche zu nennen: Diese Navigationsform schafft eine gute Orientierung für den Nutzer auf der Seite – und wenn sich der Nutzer gut zurechtfindet, findet sich auch der Crawler der Suchmaschine gut zurecht.
Aber auch für die interne Verlinkung der Inhalte bieten die Breadcrumbs eine gute Möglichkeit. Schließlich ist jeder Navigationspunkt auch ein Link auf die entsprechende Seite.

Eine Besonderheit gibt es noch in Bezug auf die Suchmaschine Google zu nennen. Diese hat seit einige Zeit begonnen, korrekt kodierte Breadcrumbs auch als Teil der Suchergebnisse anzuzeigen. Auf diese Weise wird in den Google Suchergebnissen nicht nur Ihre Unterseite angezeigt, sondern auf den ersten Blick auch eine Übersicht über die weitere Struktur Ihrer Seite gegeben.

Ein Beispiel:

Breadcrumbs auf der Internet-Seite des Fokus

Darstellung der Breadcrumb-Elemente in den Google Suchergebnissen

Breadcrumbs und Webdesign: Wir beraten Sie gern

Sie haben noch Fragen oder möchten gern Breadcrumbs in Ihre Website einbauen lassen? Kontaktieren Sie uns gern. Als Agentur für Webdesign in Berlin haben Erfahrungen mit der optisch ansprechenden Erstellung und der optimalen Codierung von Breadcrumbs und stehen Ihnen gern mit Rat und Tat zur Seite. Natürlich beraten wir Sie auch gern zu anderen Themen aus dem Bereichen Webdesign und Usability, wie z.B. das Hamburger Menü für die mobile Darstellung Ihrer Website, Design Microsite oder Call-to-Action-Buttons.