Breadcrumbs
Breadcrumbs (oder Brotkrumen) sind eine Navigationshilfe auf Websites, die den Benutzern zeigt, wo sie sich innerhalb der Struktur einer Website befinden. Sie fungieren als sekundäre Navigation und bieten einen klaren, leicht verständlichen Weg zurück zu den übergeordneten Seiten. Der Begriff „Breadcrumbs“ kommt aus dem Märchen von Hansel und Gretel, in dem die Kinder Brotkrumen hinter sich werfen, um ihren Weg zurückzufinden. Auf Websites haben Breadcrumbs eine ähnliche Funktion: Sie helfen den Nutzern, ihren „Weg“ zurück zu den höheren Ebenen der Website zu finden.
1. Funktion und Nutzen von Breadcrumbs
1.1. Hierarchie anzeigen
Breadcrumbs zeigen den Pfad von der Startseite bis zur aktuellen Seite und verdeutlichen die Hierarchie und Struktur der Website. Sie geben den Benutzern eine Orientierungshilfe, wo sie sich in der Informationsstruktur befinden und welche Seiten oder Kategorien vor und nach der aktuellen Seite existieren.
1.2. Erleichterte Navigation
Breadcrumbs bieten eine einfache Möglichkeit für Benutzer, schnell auf übergeordnete Seiten zurückzukehren, ohne den „Zurück“-Button des Browsers oder die Hauptnavigation verwenden zu müssen. Sie erleichtern es, von tief verschachtelten Unterseiten wieder zu den Hauptbereichen oder Kategorien zu gelangen.
1.3. Verbesserung der Benutzererfahrung (UX)
Sie tragen zur Verbesserung der Benutzererfahrung bei, indem sie eine zusätzliche Orientierung bieten und die Navigation effizienter gestalten. Benutzer können mit wenigen Klicks schnell zu verwandten Themen oder höher angesiedelten Seiten springen.
1.4. SEO-Vorteile
Breadcrumbs tragen auch zur Verbesserung der Suchmaschinenoptimierung (SEO) bei. Sie helfen Suchmaschinen wie Google, die Struktur der Website besser zu verstehen und Inhalte korrekt zu indexieren. Oft erscheinen sie auch direkt in den Suchergebnissen und bieten eine visuelle Darstellung der Seitenhierarchie, was für den Benutzer hilfreich ist und die Klickrate erhöhen kann.
2. Aufbau und Format von Breadcrumbs
2.1. Hierarchische Breadcrumbs
Die häufigste Form von Breadcrumbs ist die hierarchische Struktur, bei der die Benutzernavigation von der Startseite bis zur aktuellen Seite angezeigt wird. Ein Beispiel für hierarchische Breadcrumbs könnte so aussehen:
Startseite > Kategorie > Unterkategorie > Aktuelle Seite
Beispiel:
Home > Produkte > Elektronik > Smartphones > iPhone 13In diesem Beispiel ist „Home“ die oberste Ebene, und jeder „Breadcrumb“ zeigt die übergeordnete Seite an, bis zur aktuellen Seite („iPhone 13“).
2.2. Attributive Breadcrumbs
Diese Art von Breadcrumbs wird oft in E-Commerce-Shops verwendet. Hier werden die Nutzer durch die Attribute eines Produkts geführt, z. B. nach Marke, Preisbereich oder Farbe. Ein Beispiel könnte sein:
Startseite > Produkte > Smartphones > iPhone > Rot > iPhone 132.3. Pfadbasierte Breadcrumbs
Diese Breadcrumbs basieren auf dem Pfad, den der Benutzer auf der Website genommen hat, also dem tatsächlichen Weg, den der Benutzer zurückgelegt hat, statt auf einer festen Hierarchie. Diese Form wird seltener verwendet und ist eher für dynamische oder interaktive Websites gedacht.
3. Best Practices für Breadcrumbs
3.1. Sichtbarkeit
Breadcrumbs sollten an einer prominenten Stelle auf der Seite platziert werden, in der Regel unter der Hauptnavigation oder direkt über dem Hauptinhalt. Sie sollten gut sichtbar und leicht zugänglich sein, ohne die Benutzeroberfläche zu überladen.
3.2. Klarheit und Verständlichkeit
Die Links in den Breadcrumbs sollten klar und eindeutig sein. Jede Ebene muss den Benutzer darüber informieren, welche Art von Inhalt oder Seite er zu erwarten hat. Verwenden Sie einfache, verständliche Begriffe, die den Benutzer nicht verwirren.
3.3. Klicken-aber-nicht-übertreiben
Nicht jeder Link im Breadcrumb sollte unbedingt klickbar sein. Normalerweise ist nur der aktuelle Abschnitt (also die Seite, auf der sich der Benutzer gerade befindet) nicht anklickbar. Alle anderen Elemente in der Breadcrumb-Kette sollten verlinkt sein.
3.4. Trennzeichen
Verwenden Sie klare Trennzeichen (z. B. „>“, „/“ oder „|“), um die verschiedenen Ebenen visuell voneinander zu trennen. Dies hilft den Nutzern, die Hierarchie der Seiten auf einen Blick zu verstehen.
3.5. Kurz und prägnant
Die Breadcrumbs sollten kurz und auf den Punkt gebracht sein, ohne unnötige Informationen zu enthalten. Zu viele Details oder lange Phrasen könnten die Navigation erschweren.
4. Fazit
Breadcrumbs sind eine einfache, aber sehr nützliche Navigationstechnik, die dazu beiträgt, die Benutzererfahrung zu verbessern und die Navigation auf Websites und Apps zu vereinfachen. Sie bieten eine klare Struktur, erleichtern das Zurücknavigieren und unterstützen die Benutzer bei der Orientierung innerhalb komplexer Seitenhierarchien. Zudem haben sie SEO-Vorteile, indem sie eine klare Seitenstruktur bieten, die von Suchmaschinen erkannt wird. Wenn sie gut implementiert werden, tragen Breadcrumbs wesentlich dazu bei, die Benutzerfreundlichkeit einer Website zu steigern.
Wir sind darum bemüht die angebotenen Informationen aktuell zu halten und diese in knapper und verständlicher Form darzustellen. Fehler und Irrtümer bleiben aber menschlich und darum vorbehalten. Bei Unstimmigkeiten zu einem Begriff, bitten wir darum dies per E-Mail mit uns zu diskutieren. Bitte nutze hierfür unsere E-Mail: info@jupiterexpress.de« Zurück zum Glossar Index