Bread­crumbs (Brotkrumen-Navigation)

Wie im Märchen von Hänsel und Gretel, wo die beiden Kinder eine Spur aus Brotkrümeln nutzten, um den Weg zurück nach Hause zu finden, sollen auch Breadcrumbs deinen Nutzer:innen den Weg weisen.

Indem sie deinen Nutzer:innen ermöglichen, ihre Schritte innerhalb der Website leicht zurückzuverfolgen und ohne viel Aufwand zu übergeordneten Seiten zurückzukehren, geben sie nicht nur eine weitere Navigations­möglichkeit, sondern erhöhen auch die Benutzenden­freundlichkeit deiner Webseite und helfen ganz nebenbei auch bei der Such­maschinen­optimierung.

Definition

Breadcrumb-Navigation

Breadcrumbs dienen als sekundäre Navigation oder Navigationshilfe auf Webseiten und zeigen deinen Nutzer:innen ihre aktuelle Position innerhalb der Struktur der Webseite.

Sie werden typischerweise am oberen linken Rand positioniert und bestehen aus einer Reihe von Links, die den Pfad von der Startseite bis zur aktuellen Seite nach­zeichnen. Jedes Element dieser Spur, oft als „Krümel“ bezeichnet, repräsentiert eine Seite innerhalb der Webseite.

Obwohl die Links traditionell durch das Symbol „>“ voneinander getrennt wurden, bieten moderne Webdesigns eine Vielzahl an Gestaltungs­möglichkeiten, einschließlich Pfeilen oder anderen visuellen Trenn­zeichen, um den Weg intuitiv und ansprechend zu gestalten.

Inhaltsübersicht

    Welche Vorteile hat eine Brotkrumen-Navigation?

    Icon

    Bessere Navigation: Breadcrumbs bieten deinen Nutzer:innen eine klare Sicht auf ihre aktuelle Position auf deiner Webseite und er­möglichen es ihnen, mit Leichtigkeit zu jeder früheren Seite der Navigationskette zurückzukehren.

    Icon

    Erhöhte Benutzendenfreundlichkeit: Sie verbessern das Nutzungserlebnis, indem sie eine intuitive Navi­gation mit minimalen Klicks ermöglichen. Besonders für Menschen mit Ein­schränkungen können sie eine wertvolle Navigationsstütze sein, die die Bedien­barkeit der Webseite vereinfacht.

    Icon

    Geringere Absprungraten: Durch die Bereit­stellung eines klaren Navigationspfades können Breadcrumbs die Frustration von Erstbesucher:innen mindern und sie dazu ermutigen, länger auf der Seite zu verweilen. Sie bieten schnelle Orientierungshilfen, die auf übergeordnete Seiten und damit verbundene Inhalte hinweisen, was das Interesse der Nutzer:innen wecken und sie auf der Webseite halten kann.

    Icon

    SEO-Vorteile: Wenn du Breadcrumbs mit strukturierten Daten versiehst, erleichterst du Suchmaschinen das Verständnis der Struktur deiner Webseite. Dies kann die Darstellung deiner Seite in den Suchergebnissen positiv beeinflussen und so die Sichtbarkeit erhöhen.

    Wann solltest du Breadcrumbs nutzen?

    Die korrekte Anwendung von Breadcrumbs hängt stark von der Struktur und Größe deiner Webseite ab. Sie eignen sich besonders für umfangreiche Webseiten mit hierarchisch gegliederten Unterseiten, da sie deinen Nutzer:innen helfen, ihren Weg durch die verschiedenen Ebenen der Website zu finden. Für Webseiten, die lediglich aus einer einzigen Seite bestehen, einem einzigen Hierarchielevel oder die keine klare logische Hierarchie aufweisen, sind Breadcrumbs hingegen weniger geeignet.

    Als Hilfsmittel für die Entscheidung, ob Breadcrumbs eine sinnvolle Ergänzung für deine Webseite sind, kann eine Sitemap dienen. Überprüfe, ob Breadcrumbs die innerhalb von Pfaden und Kategorien für deine Nutzer:innen erleichtern würden. Grundsätzlich gilt: Sind sie hilfreich, sollten sie implementiert werden. Dies kann sogar bei kleinere Webseiten mit einer älteren Zielgruppe sinnvoll sein, da Breadcrumbs die Orientierung und Navigation vereinfachen können.

    Betrachte Breadcrumbs stets als zusätzliches Navigationsmittel. Sie sollten niemals die primäre Navigation oder das Hauptmenü einer Webseite ersetzen, sondern diese vielmehr ergänzen und den Nutzer:innen einen Mehrwert bieten, indem sie die Übersichtlichkeit und Benutzer:innen­freundlichkeit erhöhen.

    Arten von Breadcrumb-Navigationen

    Die Breadcrumbs auf einer Webseite können in verschiedene Arten unterteilt werden, die jeweils unterschiedliche Informationen und Orientierungs­hilfen bieten:

    Location-based Breadcrumbs: Diese zeigen den Nutzer:innen, wo sie sich innerhalb der Hierarchie der Webseite befinden. Sie sind besonders nützlich für Webseiten mit einem Navigationsschema, das mehr als zwei Ebenen umfasst. Durch diese Art von Breadcrumbs erhalten die Nutzer:innen einen klaren Überblick über die strukturelle Einordnung der aktuellen Seite innerhalb der Webseite.

    Attribute-based Breadcrumbs: Attributbasierte Breadcrumbs stellen die spezifischen Eigen­schaften oder Attribute einer Seite dar. Diese Variante findet häufig Anwendung auf Webseiten mit Produktkategorien, wo beispielsweise die Auswahlkriterien eines Produkts wie Farbe, Größe oder Marke als Breadcrumb-Pfad angezeigt werden. Sie helfen den Nutzer:innen, die gewählten Attribute einer Produktauswahl zu verstehen und bei Bedarf schnell Anpassungen vorzunehmen.

    Path-based Breadcrumbs: Diese Art von Breadcrumbs zeichnet die individuellen Schritte der Nutzer:innen auf der Webseite nach. Sie sind dynamisch und variieren von Nutzer zu Nutzer, abhängig von dem individuellen Navigations­pfad, den sie auf der Webseite zurückgelegt haben. Path-based Breadcrumbs bieten eine persönliche Navigationshistorie, die es den Nutzer:innen ermöglicht, ihre bisherigen Schritte rückwärts nachzuvollziehen.

    Noch nicht das Richtige gefunden?

    Willst du richtig tief in ein Thema eintauchen und mit einer Anleitung einen spezifischen Bereich selbst lernen? Dann findest du in unserem Webseiten Ratgeber genau die richtigen Inhalte für dich!

    Webseiten Ratgeber