Breadcrumbs sind Navigationshilfen, mit denen Benutzer ihre aktuelle Position im Auge behalten können. Wenn du das Märchen "Hänsel und Gretel" kennst, erinnerst du dich sicher daran, dass sie ihren Weg aus dem dunklen Wald (und weg von der Hexe, die sie fressen wollte) fanden, indem sie zuvor einen Pfad aus Brotkrümeln ausgelegt hatten, dem sie folgen konnten.
Der Hintergedanke bei dieser Breadcrumbs-Navigation ist der gleiche – Benutzer können über Breadcrumb-Links den Weg von einer Webseite zur anderen finden. Im Gegensatz zur Hauptnavigation deiner Website (auch als Primärnavigation bezeichnet), wie beispielsweise das Seitenmenü auf deiner Homepage, handelt es sich hierbei um eine Art Sekundärnavigation.
Lies weiter, um zu erfahren, was Breadcrumbs sind und wie sie Benutzer dabei helfen, sich auf deiner Website zurechtzufinden. Auch findest du hier Tipps, wie du Breadcrumbs am besten einsetzt, damit Besucher deine Website leicht durchstöbern können und direkt zu den Seiten gelangen, die für sie am relevantesten sind.
Was ist Breadcrumb-Navigation?
Es müssen viele Überlegungen bei der Gestaltung einer Website berücksichtigt werden. Zum Beispiel, sicherzustellen, dass deine Website ein attraktives Design hat, dein Produkt oder deine Dienstleistung gut sichtbar präsentiert und für Online-Zahlungen gesichert ist.
Aber vergiss auch nicht die Informationsarchitektur deiner Website. Wenn sie gut designt ist, sorgt das dafür, dass alles auf deiner Website leicht zu finden und zu verstehen ist. Du möchtest beispielsweise sicherstellen, dass Benutzer direkt zur Kaufseite navigieren können, anstatt sie erst googeln zu müssen. Nutzung strukturierter Daten – die Standardisierung der Art und Weise, wie Informationen auf deiner Website präsentiert werden – ist wichtig, und die Breadcrumb-Navigation ist dazu in der Lage.
Ein Breadcrumb-Trail, also eine Spur von Brotkrümeln, zeigt den Betrachtern auf, wo sie sich in der Hierarchie deiner Website befinden und wie sie dorthin gelangen, wohin sie möchten. Breadcrumbs ermöglichen es den Benutzern, Trails zu sehen, die zurück zu allen Seiten führen, die sie bereits durchgeblättert haben, um dorthin zu gelangen, wo sie sich aktuell befinden. Oder sie zeigen ihnen auf, wo sie sich in der hierarchischen Struktur deiner Website gerade befinden. Anstatt durch Klicken des Buttons "zurück" zur vorherigen Seite und der davor liegenden Seite zu gelangen, können sie den Breadcrumb-Navigationspfad nutzen, um direkt von der aktuellen Seite oder einer übergeordneten Seite in der Struktur zurückzuspringen.
Beispiele für Breadcrumb-Navigation
Breadcrumbs können zwar die primäre Navigation deiner Website nicht ersetzen, sind aber ein nützliches Tool, mit dem du eine verbesserte Benutzererfahrung bieten kannst.
Du hast die Breadcrumb-Navigation mit Sicherheit schon einmal gesehen, auch wenn du sie zu dem Zeitpunkt nicht als solche erkannt hast. Wenn du ein neues Paar Schuhe kaufen möchtest, kommst du vielleicht auf die Seite für ein bestimmtes Paar (entweder durch die Navigation auf der Website oder direkt über einen Link in einer Suchmaschine wie Google) und siehst oben auf der Website etwas wie das hier:
Homepage > Produkte > Schuhe > für Damen > Sport > Laufen > Markenname > Stil
Im obigen Beispiel wird jedes Element zwischen dem >-Symbol als Breadcrumb bezeichnet. Es ermöglicht Benutzern, den genauen Pfad zu sehen, den sie gewählt haben, um zur aktuellen Seite zu gelangen, oder wo er sich auf deiner Website befindet. Wenn die Schuhe, die du dir gerade ansiehst, nicht die richtigen sind, kannst du direkt zu einer vorherigen Seite zurückkehren und deine Suche fortsetzen.
Breadcrumbs können auch helfen, wenn Benutzer mehrere Aktionen durchführen müssen. E-Commerce-Websites können Benutzer beispielsweise dazu auffordern, für einen Warenkorb zur Kasse zu gehen, indem sie zuerst Versandinformationen, dann die Zahlung und dann die Bestellung bestätigen. Eine Website mit Breadcrumb-Navigation kann Links zu jedem vorherigen Schritt anzeigen, sodass Benutzer Änderungen vornehmen können.
Warum die Breadcrumb-Navigation verwenden?
Wieso solltest du eine Breadcrumb-Navigation verwenden wollen und welche Vorteile kann sie den Benutzern deiner Website bieten?
Einfache Website-Navigation
Breadcrumbs helfen Benutzern, sich zu orientieren, wo sie sich gerade in der Struktur deiner Website befinden und wie sie dorthin gelangt sind. Sie können die Angst der Benutzer davor verringern, sich zu verlieren, wenn sie zu zusätzlichen Seiten navigieren, und ihnen helfen, sich zu orientieren, wenn sie gerade von einem externen Anbieter wie Google auf der Seite gelandet sind. Darüber hinaus ermöglichen Breadcrumb-Links den Benutzern, einfach von einer Stelle in deiner hierarchischen Struktur zur nächsten zu springen.
Motivieren zum Surfen
Wenn Benutzer darauf vertrauen können, dass sie zu jeder Seite zurückkehren können, die sie sich schon einmal angesehen haben, können sie sich in Ruhe umsehen und genau das finden, wonach sie suchen – oder vielleicht etwas, von dem sie nicht einmal wussten, dass sie es brauchten, bis sie es gefunden haben. Breadcrumb-Navigation ist besonders nützlich auf E-Commerce-Websites, auf denen Produkte anhand von Kategorien angeordnet werden können. So können Benutzer sich einzelne Artikel ansehen und leicht zu einer umfassenderen Kategorie zurückkehren, um weiter zu surfen.
Verbessere Durchsuchbarkeit
Breadcrumbs wurden ursprünglich geschaffen, um das Navigieren zu vereinfachen. Heute werden sie eingesetzt, um verschiedene Aspekte der Interaktion mit Benutzern im Web zu beeinflussen.
Google und andere Suchmaschinen nutzen die Breadcrumb-Navigation, um mehr Informationen über Websites zu gewinnen, was die Suche akkurater gestalten und sicherstellen kann, dass die Ergebnisse mit den nützlichsten Inhalten verlinkt sind.
Suchergebnisse führen Benutzer oft direkt zu einer Seite innerhalb der Hierarchie deiner Website und nicht einfach zu deiner Homepage oder Landingpage. Zum Beispiel können die Ergebnisse potenzielle Kunden direkt von einer Google-Suche zur Kaufseite eines Artikels weiterleiten.
Außerdem hast du vielleicht Suchergebnisse auf Websites wie Google gesehen, die mehr als nur Links zu Websites enthalten – sie könnten auch ein Foto oder ein kurzes Stück Text von der Zielseite selbst enthalten. Dies ist ein Beispiel für "umfangreiche Ergebnisse", die viel mehr ins Auge fallen als nur ein Link. Breadcrumbs gehören zu den Elementen, die Google (oder jeder anderen Suchmaschine) dabei helfen, Informationen zu gewinnen und diese in ihren umfangreichen Suchergebnissen zu präsentieren, was die Wahrscheinlichkeit erhöht, dass Benutzer sich zu deiner Website durchklicken.
Gezielte Keywords leiten Benutzer zur richtigen Seite weiter
Du wünschst dir ein Suchergebnis, das Benutzer direkt zu den Informationen oder Produkten bringt, nach denen sie suchen. Die Verwendung eines Breadcrumb-Trails ermöglicht es Google und anderen Suchmaschinen, direkt Links zu den am relevantesten Landingpages bereitzustellen – beispielsweise zu Einzelheiten zu Produkteigenschaften – und den Benutzer dann die Möglichkeit zu bieten, direkt auf übergeordnete Seiten zu gelangen, um mehr über deine Marke zu erfahren. Dies reduziert auch die "Bounce-Rate deiner Website" – die Anzahl der Benutzer, die deine Website verlassen, nachdem sie sich nur eine Seite angesehen haben.
Wann du die Breadcrumb-Navigation nicht verwenden solltest
Obwohl Breadcrumbs auf vielen Websites nützlich sein können, gibt es einige Gründe, warum sie für dich vielleicht keinen Sinn ergeben.
Website-Design ist nicht hierarchisch
Wenn dein Website-Design einfach gestaltet ist, nur aus wenigen Seiten besteht oder nicht viele Unterseiten hat, ist es sehr wahrscheinlich, dass Benutzer ohne Navigationshilfe wie Breadcrumbs problemlos auf deiner Website navigieren können. Wenn du sie integrierst, vermittelt das womöglich den Eindruck, deine Website sei komplexer als sie in Wirklichkeit ist, was manche Benutzer dann abschreckt.
Zusätzlicher Codierungsaufwand für wenig Nutzen
Breadcrumbs sind zwar gängig und nicht schwierig zu implementieren, erfordern aber einiges an Arbeit, um sie zu erstellen und zu pflegen. Wenn deine Website keine Informationen in mehreren Kategorien bereitstellt oder wenn es eine andere, einfachere Möglichkeit gibt, auf deiner Seite zu navigieren (z. B. Buttons oder Links als Teil der Seite selbst), lohnt sich der zusätzliche Aufwand vermutlich nicht.
Das kann die Benutzer verwirren
Je mehr Text auf der Seite vorhanden ist, desto verwirrender kann es für Websitebesucher sein. Überlege dir, welche Zielgruppe du ansprichst und ob die Breadcrumbs hilfreich sind oder deine Website, die mit einem einfachen, geradlinigen visuellen Design besser funktioniert, nur unnötig mit Daten überladen.
Arten der Breadcrumb-Navigation
Es gibt verschiedene Arten der Breadcrumb-Navigation. Jede davon eignet sich für einen anderen Standort. Hier erfährst du mehr über die verschiedenen Kategorien, damit du herausfinden kannst, was für deine Website das Richtige sein könnte.
Pfad- oder verlaufsbasierte Breadcrumbs
Pfadbasierte Breadcrumbs auch bekannt als verlaufsbasierte Breadcrumbs, zeigen Benutzern, wie sie dorthin gelangt sind, wo sie sich gerade befinden. Wenn du möchtest, dass Benutzer leicht zu einer vorherigen Seite auf deiner Website zurückspringen können, ist diese Art von Breadcrumb-Trail wahrscheinlich die beste Lösung für dich.
Standort- oder verlaufsbasierte Breadcrumbs
Eine weitere Art der Breadcrumb-Navigation ist die standortbasierte Breadcrumb-Navigation oder die verlaufsbasierte Breadcrumb-Navigation. Standortbasierte Breadcrumbs sind statisch und ändern sich nicht. Sie erlauben Benutzern eine Übersicht über die Gesamtstruktur der Website und dienen ihnen als Navigationshilfe. Standortbasierte Breadcrumbs sind besonders nützlich für Websites mit zahlreichen hierarchischen Informationen.
Eine gemeinnützige Organisation könnte zum Beispiel Informationen zu zahlreichen Programmkategorien haben, von denen jede mehrere Unterkategorien mit Links zu detaillierteren Daten hat. Wenn du Breadcrumbs nutzt, um Personen bei der Suche nach den Informationen zu unterstützen, die er benötigt, hältst du sie auf Kurs.
Eigenschaftsbasierte Breadcrumbs
Schließlich gibt die eigenschaftsbasierte Breadcrumb-Navigation den Benutzern mehr Informationen über die Eigenschaften der aktuellen Seite. Eigenschaftsbasierte Breadcrumbs sind beispielsweise auf E-Commerce-Seiten beliebt, auf denen Benutzer die Suchergebnisse nach Farbe, Größe oder Typ filtern möchten.
10 Tipps für die Verwendung der Breadcrumb-Navigation
Sobald du entschieden hast, dass Breadcrumbs deinen Benutzern helfen, sich in deiner Website-Struktur zurechtzufinden und deine Website in Suchmaschinen wie Google besser sichtbar zu machen, solltest du einige Dinge beachten, um die Erfahrung für alle zu erleichtern.
Sorge dafür, dass die Breadcrumb-Titel mit den Seitentiteln übereinstimmen
Da Breadcrumbs dazu dienen, Verwirrung zu vermeiden, solltest du aufpassen, dass die Namen der Breadcrumbs mit den Titeln der jeweiligen Seiten selbst übereinstimmen. Wenn die Bezeichnungen übereinstimmen und einheitlich sind, können Benutzer sich darauf verlassen, dass sie auf derselben Seite sind, auf der sie sich wähnten.
Lass den Breadcrumb-Trail bei deiner Homepage beginnen
Auch wenn Benutzer über einen Link auf deine Website gelangen, der aus einem Suchergebnis von einer Seite stammt, die sich tief in der Hierarchie deiner Website befindet, sollte das erste Element auf dem Trail deine Homepage sein – zumindest, wenn die hierarchische Breadcrumb-Struktur sinnvoll aufgebaut ist. Auf diese Weise können Benutzer immer direkt dorthin zurückkehren.
Halte den Umfang der Breadcrumb-Navigation in Grenzen
Wenn dein Breadcrumb-Trail so lang wird, dass er in eine zweite Zeile übergeht, übertreibst du es vermutlich. Einfache, kurze Breadcrumbs funktionieren am besten und deine primäre Navigation sollte prominenter anwesend sein.
Füge den gesamten Navigationspfad ein
Wenn du tief in die Hierarchie einer Website eindringst, kann es verlockend sein, die Breadcrumb-Navigationspfade zu kürzen oder Schritte auszulassen. Dies kann Benutzer allerdings verwirren, wenn sie beispielsweise auf bestimmte übergeordnete Seiten navigieren möchten, die aber nicht finden können.
Es ist jedoch möglich, zu viele Informationen aufzunehmen. Wenn die URL-Struktur deiner Website irrelevante Informationen enthält, die für Benutzer verwirrend sein könnten (wie etwa eine Strukturebene auf deiner Website, die keiner Seite entspricht, nach der jene gegebenenfalls suchen), kannst du diese in deinen Breadcrumb-Links entfernen.
Nur verwenden, wenn dies für deine Website-Struktur sinnvoll ist
Breadcrumbs haben viele Verwendungsmöglichkeiten, aber sie sollten die Hauptnavigation einer Website eher unterstützen, anstatt sie zu ersetzen. Wenn deine primäre Navigation einfach und klar ist, ist die Verwendung von Breadcrumbs überflüssig.
Du musst deine Zielgruppe kennen
Überlege dir, wie erfahren die Zielgruppe deiner Website mit der Internetnutzung und Navigation ist. Die Breadcrumb-Navigation eignet sich für die meisten Zielgruppen, allerdings ist sie unter Umständen nicht die richtige Wahl, wenn sich deine Website beispielsweise an Benutzer richtet, die weniger Erfahrung mit dem Internet haben und Einfachheit suchen.
Rein und übersichtlich halten
Auch wenn Breadcrumbs sehr nützlich sein können, sollten sie nicht von den Hauptinformationen auf den Seiten deiner Website ablenken. Wenn du den Text klein, aber gut lesbar und an einer festen Stelle anordnest, hilft das den Benutzer, sich auf die aktuelle Seite zu konzentrieren, bis sie bereit sind, einem Link zu einem anderen Thema zu folgen.
Verlauf von der Seite der höchsten Ebene zur Seite der niedrigsten Ebene
Dein Breadcrumbs-Trail sollte übergeordnete Seiten auf der linken Seite auflisten und sich zu den untergeordneten Seiten auf der rechten Seite vorarbeiten. Es mag verlockend sein, mit der Norm zu brechen, dies ist allerdings ein Punkt, an dem sich Benutzerfreundlichkeit und die Abbildung der Hierarchie deiner Website in einer Weise, wie von Benutzern erwartet, auszahlen.
Navigationspfad leicht sichtbar halten
Um sicherzustellen, dass Benutzer deiner Website deine Breadcrumb-Navigation nutzen können, musst du dafür sorgen, dass der Breadcrumb-Trail leicht zu finden ist. Behalte Position, Design und Länge der Breadcrumbs im Auge, sodass du eine möglichst benutzerfreundliche Erfahrung bietest.
Kreativ werden mit Design
Während viele Websites das Größer-als-Zeichen (>) verwenden, um die Schritte auf dem Breadcrumb-Trail zu markieren, wählen andere Websites einen Schrägstrich (/), einen Doppelpunkt (:) oder einen Pfeil, um die Position der aktuellen Seite anzuzeigen. Auf manchen Websites öffnen sich sogar Drop-down-Menüs, wenn Benutzer mit dem Mauszeiger über die Breadcrumbs fahren, so dass sich ihnen ein direkter Pfad zu Stellen erschließt, die sich möglicherweise nicht in der direkten Hierarchie der aktuellen Seite befinden.
Überlege dir, was den Pfad der Breadcrumbs möglichst deutlich macht. Natürlich solltest du es nicht übertreiben, doch mit einem Tool wie dem Website-Builder von Mailchimp kannst du das Erscheinungsbild deiner Breadcrumbs an die Struktur und das Design deiner Website anpassen.
Die Integration von Breadcrumbs in dein Webdesign kann deine primäre Navigation unterstützen und den Besuchern deiner Seite dabei helfen, sich zurechtzufinden – sei es in Form von eigenschaftsbasierten Breadcrumbs für ein E-Commerce-Unternehmen oder in Form von standortbasierten Breadcrumbs für eine Organisation mit einer Vielzahl von Informationen. Breadcrumbs sind eine intelligente Lösung für eine möglichst benutzerfreundliche Gestaltung deiner Website, die Steigerung deiner Präsenz auf Google oder anderen Suchmaschinen und für Links zu genau den Informationen und Produkten, nach denen deine Kunden suchen.
Hoffentlich brauchen deine Besucher nicht wie Hänsel und Gretel einer bösen Hexe entkommen, aber wenn du sie davor bewahrst, die Orientierung zu verlieren und ihnen mit digitalen Brotkrümeln dabei hilfst, sich leicht zurechtzufinden, wird es sich auszahlen!