Breadcrumbs (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 Navigationsmöglichkeit, sondern erhöhen auch die Benutzendenfreundlichkeit deiner Webseite und helfen ganz nebenbei auch bei der Suchmaschinenoptimierung.
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 nachzeichnen. 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 Gestaltungsmöglichkeiten, einschließlich Pfeilen oder anderen visuellen Trennzeichen, um den Weg intuitiv und ansprechend zu gestalten.
Inhaltsübersicht
Welche Vorteile hat eine Brotkrumen-Navigation?
Bessere Navigation: Breadcrumbs bieten deinen Nutzer:innen eine klare Sicht auf ihre aktuelle Position auf deiner Webseite und ermöglichen es ihnen, mit Leichtigkeit zu jeder früheren Seite der Navigationskette zurückzukehren.
Erhöhte Benutzendenfreundlichkeit: Sie verbessern das Nutzungserlebnis, indem sie eine intuitive Navigation mit minimalen Klicks ermöglichen. Besonders für Menschen mit Einschränkungen können sie eine wertvolle Navigationsstütze sein, die die Bedienbarkeit der Webseite vereinfacht.
Geringere Absprungraten: Durch die Bereitstellung 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.
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:innenfreundlichkeit erhöhen.
Arten von Breadcrumb-Navigationen
Die Breadcrumbs auf einer Webseite können in verschiedene Arten unterteilt werden, die jeweils unterschiedliche Informationen und Orientierungshilfen 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.
Beispiel – Lindt
URL: https://www.lindt.de/onlineshop/schokoladentypen/vegan
Die URL der Seite, auf der du dich gerade befindest, entspricht den Breadcrumbs. Die Breadcrumbs bilden also den Standort innerhalb der Seitenstruktur ab.
Attribute-based Breadcrumbs
Attributbasierte Breadcrumbs stellen die spezifischen Eigenschaften 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.
Beispiel – Zalando
URL: https://www.zalando.de/damenbekleidung-hosen-trainingshosen/
Die URL entspricht nicht den Breadcrumbs. Die Breadcrumbs beziehen sich auf die Merkmale der angezeigten Produkte.
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 Navigationspfad, 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.
Verwandte Artikel
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!
