Wer erinnert sich nicht an das bekannte grimmsche Märchen „Hänsel und Gretel“? Zwei in einem Wald ausgesetzte Geschwister streuen hinter sich Brotkrümel aus, um den Weg zurück nach Hause zu finden. Die Kinder geraten in die Fänge einer menschenfressenden Hexe, können aber entfliehen und aus dem Wald herausfinden. Was dieses düstere Märchen mit Webdesign zu tun hat? Ganz einfach: Auch das World Wide Web und insbesondere komplexe Websites erscheinen mitunter wie ein großer dunkler Wald. Bei der Navigation durch umfangreiche Onlineshops oder weitverzweigte Webportale wünscht man sich als verirrter User mitunter ebenfalls Brotkrümel, um den unkomplizierten Weg zurück auf übergeordnete Seiten zu finden. Die Breadcrumb-Navigation (deutsch: „Brotkrümelnavigation“) dient genau diesem Ziel. Lesen Sie, was eine Brotkrümelnavigation ist, wie ein Breadcrumb-Trail idealerweise aussieht und welche Bedeutung er für die Usability von Websites und SEO hat.
Die Breadcrumb-Navigation ist ein sekundäres Navigationselement, das unterstützend zu den klassischen Menüs im oberen Bereich einer Website eingesetzt wird. Es ermöglicht Nutzern in mehrfacher Hinsicht eine bessere Orientierung: Zum einen ist für den User mit einer Brotkrümelnavigation immer erkennbar, wo auf der Website er sich gerade befindet, und zum anderen zeigt sie typischerweise auch an, welcher Weg zu den übergeordneten Bereichen führt. Der sogenannte Breadcrumb-Trail (deutsch: „Brotkrümel-Pfad“) stellt die einzelnen Stationen logisch-aufeinanderfolgend und üblicherweise hierarchisch gegliedert dar. User bewegen sich von der Startseite über die Kategorieseiten zu den konkreten Inhalten. Der Breadcrumb-Trail bietet Links zu all diesen Stationen an. So können Nutzer die Struktur der Website nachvollziehen und mit nur einem Klick zurückspringen.
Die Breadcrumbs auf Websites erfüllen also die gleiche Funktion wie die Brotkrümel in der Märchenvorlage – mit der entscheidenden Ausnahme, dass sie nicht von Vögeln weggepickt werden können, was Hänsel und Gretel im Märchen den Rückweg erschwert. Die Darstellung einer Breadcrumb-Navigation variiert: Verbreitet sind Pfeilsymbole oder das Größer-als-Zeichen(>), die als Trennzeichen fungieren und zugleich die Hierarchie der Website abbilden. Häufig werden auch grafische Buttons in Pfeilform verwendet. So ergibt sich in der Regel ein Pfad, der ungefähr folgendem Schema entspricht:
Auf besonders komplexen Seiten gibt es häufig noch weitere Kategorien und Subkategorien zwischen der Startseite und der aktuellen Position. Eine Breadcrumb-Navigation nach obigem Schema wird auch Location-Breadcrumb genannt, da die Position und der Weg zur Startseite dargestellt werden. Eine weitere, aber seltenere Darstellungsvariante ist der Path-Breadcrumb, der statt auf die Location den Fokus auf den tatsächlichen Klickpfad legt, was bei komplexen Seiten schnell verwirrend sein kann. Der Path-Breadcrumb bildet das Surfverhalten des Anwenders auf der Site ab – ganz gleich, wie sprunghaft selbiges ist. Diese Variante könnte wie folgt aussehen:
Eine dritte Variante bilden die kategorie- oder attribut-basierten Breadcrumbs: Diese findet man häufig im E-Commerce-Bereich und vor allem bei Onlineshops. Sie zeigen dem Anwender die Kategoriezugehörigkeit der aktuell geöffneten Seite und die zugeschriebenen Attribute an. Ermittelt werden selbige anhand von Meta-Informationen. Eine Jeans gehört beispielsweise zur Kategorie der Hosen, kann gleichzeitig aber auch die Attribute „Blau“ und „Größe 32“ tragen:
Man unterscheidet drei unterschiedliche Arten von Breadcrumbs: Die Location-, Path- und Kategorie- bzw. Attribut-Breadcrumbs. Location-Breadcrumbs zeigen die Position auf der Website an, Path-Breadcrumbs bilden den zurückgelegten Weg nach und Attribut-Breadcrumbs weisen auf die ausgewählten Kategorien und Filter-Optionen hin.
Manch einer mag sich jetzt fragen, wozu eine Breadcrumb-Navigation überhaupt gut sein soll – immerhin hat man ja auch Menüleisten, über die die Navigation abläuft. Zudem verfügt jeder gängige Browser über Buttons zum Vor- und Zurückblättern. Diese Elemente machen die Navigation zwar möglich, sind aber in einigen Fällen sehr umständlich und kompliziert. Eine der wichtigsten Regeln für ein gutes User-Experience-Design lautet schließlich: Je weniger Klicks Nutzer benötigen, desto besser fällt die User-Experience aus. Dieser Grundsatz gilt insbesondere für die Navigation. Es gibt kaum etwas Nervigeres, als beim Zurückspringen ständig auf den „Zurück“-Pfeil im Browser klicken oder eine Kategorie in der Menüleiste von neuem durchforsten zu müssen.
Darüber hinaus wissen Nutzer mit Breadcrumbs stets, wo sie sich auf der Website befinden: Die Hierarchie und Struktur der Seite ist mit einer Breadcrumb-Navigation deutlich transparenter als mit einer singulären Menü-Navigation. Selbst wenn die Nutzer über einen externen oder internen Link auf die Zielseite gelangen und sich nicht von der Startseite bis zur aktuellen Position durchgeklickt haben, erkennen sie mit nur einem Blick in die Breadcrumb-Navigation, wo sie sich gerade befinden. Zudem lädt sie zum Stöbern auf der jeweiligen Seite ein und mindert das Risiko, dass Nutzer abspringen: Die übergeordnete Kategorie ist nur einen Klick entfernt und eine neue Suchanfrage muss dank der Breadcrumb-Navigation nicht gestellt werden. Das bindet auch solche Nutzer, die über externe Links von anderen Seiten oder über Suchmaschinen auf die jeweilige Unterseite gelangt sind.
Für ihre Nutzung spricht auch, dass es im Regelfall schnell und unkompliziert ist, eine Breadcrumb-Navigation zu erstellen und in die Website einzubinden. Der Vorteil für die User-Experience ist gemessen am Aufwand immens. Sie ist unauffällig und fügt sich in nahezu jedes Design nahtlos ein. Selbst wenn sie nur von einem Teil der Besucher aktiv genutzt wird, stört sie in den meisten Fällen die übrigen Anwender nicht. Es gibt somit kaum einen Grund, der gegen ein Breadcrumb-Design spricht. Lediglich Websites mit sehr flacher Hierarchie profitieren kaum von Breadcrumbs als sekundäre Navigation.
Was gut für den Nutzer ist, ist auch gut für Suchmaschinen. Dieser Onlinemarketing-Grundsatz trifft auch auf die Breadcrumb-Navigation zu: Inzwischen werden Breadcrumbs in den Google-SERPs gelegentlich sogar anstatt einer langen und unübersichtlichen URL angezeigt. Die Suchmaschinen werten Breadcrumbs offensichtlich also auch als positives Signal: Ihre Ansicht zeigt dem Nutzer noch bevor er die Website besucht, was ihn erwartet und in welcher Kategorie er landet.
Schaut man sich die Bezeichnungen der einzelnen Breadcrumbs an, fällt direkt der zweite wichtige Vorteil für die Suchmaschinenoptimierung auf: Die Breadcrumb-Navigation bietet die perfekte Möglichkeit, ganz natürliche interne Links mit relevanten Keywords zu unterfüttern. Ein logisch strukturiertes Webdesign mit Breadcrumbs macht es dementsprechend nicht nur den Nutzern, sondern auch den Crawlern der Suchmaschinen leichter, den Aufbau und die Relevanz einer Website zu verstehen. Crawler folgen den internen Links und nehmen die gefunden Seiten in den Suchmaschinenindex auf. Im Idealfall resultiert daraus ein besseres Ranking der Seite. Bei den Besuchern wiederum sorgt die bessere Navigation idealerweise für einen längeren Aufenthalt auf der Seite: Und die Aufenthaltsdauer und die Absprungrate der User sind ebenfalls wichtige Rankingfaktoren für die Suchmaschinen.
Eine Breadcrumb-Navigation kann die Usability und sogar das Suchmaschinen-Ranking verbessern – vorausgesetzt, sie wird richtig eingebunden, sinnvoll platziert und bietet tatsächlich einen Mehrwert. Im Folgenden erklären wir alle Dos and Don’ts anhand von Beispielen.
Es gibt nur wenige Fälle, in denen eine Breadcrumb-Navigation ernsthaft irritiert: Einer davon ist es, wenn sie eigentlich keinerlei Funktion erfüllt. Websites ohne tiefgreifende Struktur mit nur einer oder wenigen mehr Seiten benötigen keine Breadcrumbs. Die Navigation geschieht in diesem Fall über die primäre Menüleiste oder den Header der Seite. Sinnvoll und einen deutlichem Mehrwert bietend ist im Gegensatz dazu die attribut-basierte Breadcrumb-Navigation von Amazon.
Im Onlineshop von Amazon ist die Brotkrümelnavigation eine sinnvolle Ergänzung: Je komplexer die Suchanfragen sind, desto wichtiger ist es für den Nutzer, die Suche unkompliziert zurücksetzen zu können. Zudem wird so sichergestellt, dass der Nutzer stets weiß, wo er sich befindet und welche Filter aktuell aktiv sind. In dem folgenden Beispiel hingegen ist die Breadcrumb-Navigation nahezu obsolet.
Auf diesem Portal für regionale Nachrichten aus dem Ballungszentrum Mannheim/Ludwigshafen am Rhein gibt es nach der Startseite nur eine weitere Kategorie für die in der Seitennavigation aufgelisteten Ressorts. Wählt man eine beliebige Kategorie aus – hier im Screenshot etwa „Speyer“ – fällt auf, dass es danach keine weiteren Subkategorien gibt. Der Location-Breadcrumb bietet bei einer solch flachen Seitenstruktur kaum Mehrwert.
Websites, die viele Navigationsmöglichkeiten anbieten, laufen Gefahr, ihre Nutzer mit zu vielen Optionen zu irritieren. Besonders kritisch sind Dopplungen wie aus dem vorigen Beispiel. Zwar sind Breadcrumbs eher unauffällig und fügen sich in die meisten Designs gut ein, doch wenn sie nur die Funktion der primären Navigationsleiste spiegeln, ist niemandem geholfen. Nicht immer hält doppelt auch besser. Ganz anders in folgendem Positivbeispiel: Auf der Website des t3n-Magazins wird Mehrwert geboten und der Breadcrumb-Trail dezent und leicht auffindbar eingebunden. Die Breadcrumb-Navigation ist absolut logisch, leicht nachvollziehbar und fügt sich zudem noch bestens in das Seitendesign ein.
Weniger elegante Lösungen verwirren mit gänzlich unlogischen Breadcrumb-Trails. In dem folgenden Beispiel taucht beispielsweise weder die Startseite noch eine übergeordnete Kategorie im Pfad auf. Dieser besteht lediglich aus der aktuellen Position ohne weitere Orientierungs- und Navigationsangebote zum Vor- oder Zurückspringen. Der klickbare Link ist ebenso sinnlos, da er auf die Seite verweist, auf der sich der Besucher ohnehin bereits befindet. Die Positionsanzeige bietet ohne Kontext wenig Mehrwert und sorgt mit einem Link zur aktuellen Position unter Umständen sogar für mehr Verwirrung.
Eine Breadcrumb-Navigation sollte lediglich unterstützend und als sinnvolle Ergänzung zur Hauptnavigation eingesetzt werden. Dementsprechend sollte man sie eher klein halten. So lenkt sie nicht vom eigentlichen Inhalt ab. Auch sollte sie die primäre Seitennavigation nicht in den Schatten stellen und lediglich einer feinstufigen Navigation sowie einer schnellen Orientierung dienen. Nur in Ausnahmefällen führt eine sehr umfangreiche Brotkrümelnavigation zu einer besseren Usability – etwa auf der Website zu dem Computerspiel Diablo III, die hier als Grenzfall vorgestellt werden soll.
Gegner von Breadcrumbs argumentieren bei Fällen wie diesem vermutlich, dass die Navigationsmöglichkeit hier eher ein Anzeichen für mangelhaftes Webdesign sei und der Unübersichtlichkeit dieser Website Ausdruck verleihe. Betrachtet man den Screenshot der Diablo-III-Website näher, dürfte aber schnell auffallen, wie umständlich die Navigation ohne Breadcrumbs wäre: Auf der Website gibt es zahlreiche Klassen und Fähigkeiten zu entdecken. Die Struktur der Website geht von der Startseite über den Spielguide bis zu einzelnen Fähigkeiten der Figuren über viele Kategorien weit in die Tiefe. Die Breadcrumb-Navigation mit umfangreichen Mouseover-Dropdown-Menüs ergänzt die Hauptnavigation daher trotz ihres Umfangs sinnvoll und hilft, bei all den Unterkategorien nicht den Überblick zu verlieren. Zudem beschleunigt sie die Auswahl und das Springen von Kategorie zu Kategorie.
So viel zur Theorie – bleibt noch zu klären, wie Sie Breadcrumbs eigentlich erstellen. Dafür stehen Ihnen – je nach Anspruch und vorhandenem CMS – unterschiedliche Wege zur Verfügung: Relativ einfach lassen sich Breadcrumbs mit HTML erstellen. Mit CSS können Sie anschließend das Erscheinungsbild anpassen. Das folgende Code-Beispiel zeigt, wie sich Breadcrumbs mit HTML umsetzen lassen:
<div id="breadcrumbs">
<a href="/index.html">Startseite</a>
>
<a href="/ebene1.html">Ebene 1</a>
>
<a href="/ebene1-3.html">Unterpunkt zu Ebene 1</a>
</div>Bei dem oben aufgeführten Code-Beispiel fehlt für eine fertige und logische location-basierende Navigation nur noch die Auszeichnung der aktuellen Position. Hierfür ist kein weiterer Hyperlink notwendig, da man sich logischerweise bereits an dieser Stelle befindet. Man kann dafür zudem das Listenelement („li“) verwendet. Alternativ zum „id“-Tag kann auch „class“ und statt „div“ ebenso das „nav“-Tag genutzt werden. Um die Breadcrumbs suchmaschinenfreundlicher zu gestalten, bieten sich optional auch Mikrodaten, RFDa oder JSON-LD an. Werden die Breadcrumbs im Quellcode auf diese Weise semantisch ausgezeichnet, können die Crawler der Suchmaschinen die Elemente auslesen – so lassen sie sich in den SERPs auch als Rich-Snippets darstellen.
Neben der Umsetzung via HTML und CSS gibt es noch einige weitere Möglichkeiten, um Breadcrumbs einzubinden: Die einfachste Variante bieten Content-Management-Systeme an. Dort erfolgt die Implementierung im Backend für gewöhnlich schnell und mit wenigen Klicks. Für CMS, die keine Fertiglösung anbieten, gibt es in der Regel entsprechende Plug-ins. Mit PHP oder JavaScript ist es zudem möglich, auch in dynamischen Websites eine Breadcrumb-Navigation zu implementieren.
Eine Breadcrumb-Navigation kann die User-Experience auf komplexen Websites mit vielen Kategorien und Subkategorien sehr viel angenehmer gestalten. Sie verbessert die Usability, bietet eine schnelle Orientierung über die Seitenstruktur und fügt sich gut in die meisten Designs ein. Auch aus SEO-Sicht lohnt sich die Implementierung aufgrund des Zugewinns natürlicher interner Links und der Möglichkeit, dass die Breadcrumb-Navigation in den Google-SERPs die URL ersetzt. Voraussetzung ist eine logische und sinnvolle Realisierung mit Mehrwert für den User und eine korrekte Einbindung. Websites mit sehr flachen Hierarchien benötigen allerdings selten eine Breadcrumb-Navigation.
Nutzen Sie einen Iconfont, um funktionale Piktogramme auf Vektorbasis in Ihre Webseite einzubinden. Gegenüber klassischen Pixelbildern haben Vektorgrafiken den Vorteil, dass sie sich ohne Qualitätsverlust beliebig skalieren lassen. Zudem bietet die Einbindung über CSS (Cascading Style Sheets) weitreichende Möglichkeiten der einfachen codebasierten Ausgestaltung. Zahlreiche Open-Source-Projekte...
Die Anforderungen an eine Website sind in den letzten Jahren erheblich gestiegen, vor allem in einer Hinsicht: Der Anpassungsfähigkeit. Denn Websites müssen nicht mehr nur auf Desktop-PCs gut aussehen und sich ideal navigieren lassen, auch auf anderen Endgeräten muss das Nutzererlebnis perfekt sein. Responsive Design sorgt dafür, dass sich die Inhalte einer Website dynamisch an die Oberfläche von...
Wir lesen Texte im Web anders als eine gedruckte Zeitung: Schnell überfliegen wir die wichtigsten Absätze, filtern relevante Informationen und klicken schon wieder auf den nächsten Link. Die Anforderungen an einen Text sind klar: Informationen müssen schnell und leicht zu finden sein. Das erreichen Sie am effektivsten mit dem Prinzip der umgekehrten Pyramide. Was das ist und wie Sie die umgekehrte...
Die Entwicklung neuer digitaler Produkte kann zur teuren Investition werden. Wie lässt sich im Vorfeld abschätzen, ob sich die Mühe lohnt? Beziehen Sie Ihre Nutzer mit in die Produktentwicklung ein. User-Centered Design nennt sich dieser Ansatz, von dem Unternehmen und Kunden gleichermaßen profitieren.
