Breadcrumbs führt uns zurück zu dem alten Märchen, das Sie vielleicht in Ihren Kindergartenjahren gelesen haben. Die beiden Kinder Hänsel und Gretel werden aus ihrem Zuhause im Wald vertrieben, als Hänsel beschließt, eine Spur aus Brotkrümeln zu legen, um ihren Weg zurück nach Hause zu verfolgen. Obwohl die Brotkrümel von den lästigen Vögeln im Wald gefressen werden, haben sie es geschafft, viele Jahre nachdem die Geschichte geschrieben wurde, einen Eindruck zu hinterlassen.

Im Webdesign dienen Breadcrumbs einem ähnlichen Zweck wie Hänsel es sich vorgestellt hat. Breadcrumbs dienen als sekundäre Navigation innerhalb Ihrer Website- Navigation, damit die Besucher sicher sein können, sich nicht zu verirren, nachdem sie von einer Seite zur anderen gegangen sind. Wie das alte Märchen hilft es, dem Benutzer zu zeigen, wo er gelandet ist und was sein letzter Standort war.

Sobald Breadcrumbs in die hierarchische Struktur der Website integriert sind, können Benutzer tief in Produktkategorien vordringen und zu ihrem Ausgangspunkt zurückkehren, ohne in einen „Zurück”-Button-Rausch zu verfallen.

Breadcrumbs dienen auch als grafisches Steuerelement, um weniger erfahrenen Besuchern die Navigation auf E-Commerce-Websites zu erleichtern. Für solche Websites muss die interne Struktur intelligent gestaltet sein. Mit Breadcrumbs ist es für Online-Shopping-Plattformen unerlässlich, ihren Besuchern nicht nur eine einfache Bedienung zu bieten, sondern auch zu verhindern, dass potenzielle Kunden ihre Seiten verlassen, weil sie sich verlaufen haben.

Breadcrumb-Navigation

Breadcrumbs sind ein effektives Mittel, um Besucher zu führen, indem sie ihren aktuellen Standort und die Orte, die sie auf ihrem Weg besucht haben, ermitteln. Sie dienen als visuelle Hilfe innerhalb der Hierarchie der Website. Aber in Bezug auf die Benutzererfahrung der Kunden helfen Breadcrumbs ihnen, diese 3 Fragen zu beantworten.

Wo bin ich?

Breadcrumbs halten die Benutzer über ihren Aufenthaltsort auf der Website auf dem Laufenden, von wo aus sie ihre Reise beginnen.
Wohin kann ich gehen?

Es dient als Hilfe für Benutzer, indem es ihnen vorschlägt, wohin sie als nächstes gehen sollen. Da ihnen die Struktur bereits vorgegeben ist, müssen die Nutzer nicht mehr Kategorien oder Seitenbereiche suchen und finden.
Soll ich dorthin gehen?

Breadcrumbs tragen dazu bei, ein besseres Surfen zu fördern und dem Benutzer den Wert des Inhalts zu zeigen. Wenn ein Kunde beispielsweise bei der Suche nach einem Produkt auf einer Webseite landet, findet er möglicherweise andere Produkte, die sich als gut für seine Bedürfnisse erweisen könnten. Dies trägt dazu bei, die Absprungrate der Website zu reduzieren.

Vorteile

Reduziert Aktionen

Um eine Seite auf einer höheren Ebene zu erreichen, helfen Breadcrumbs dabei, das Nein zu reduzieren. der Aktionen, die der Website-Besucher benötigt, um dorthin zu gelangen. Besucher können einfach Breadcrumbs verwenden, um zurück zu navigieren, anstatt ständig die Schaltfläche „Zurück” oder die primäre Navigation der Website zu verwenden.

Benötigt minimalen Platz

Es dauert nur eine horizontale Linie, die mit Textlinks gefüllt ist. Dies erleichtert eine gesunde Webdesign-Struktur, indem es nur wenig Platz einnimmt und anderen Elementen auf der Website ermöglicht, zu atmen. Dies hilft auch dabei, bessere Ladegeschwindigkeiten für die Website zu erzielen.

Jeder Benutzer weiß, wie man Breadcrumbs bedient

Es ist leicht zu verstehen und erfordert keine technischen Kenntnisse, um mit ihnen zu interagieren. Der Text erklärt, wo der Benutzer war, ist und gehen kann. Es ist ein selbsterklärendes Navigationssystem, das für das Verständnis jedes Benutzers universell ist.

Wann sollte man Semmelbrösel verwenden?

Das Erstellen einer Sitemap zur Darstellung der Navigationsstruktur Ihrer Website ist eines der besten Mittel, um festzustellen, ob Ihre Website von Breadcrumbs profitieren kann. Anschließend können Sie versuchsweise analysieren, ob die Breadcrumbs-Navigation den Nutzern durch Ihre Website-Inhalte hilft oder nicht.

Breadcrumbs werden am besten verwendet, wenn es um wesentlich größere Inhalte geht, die innerhalb von Kategorien und in einer sauberen linearen Struktur organisiert werden müssen. Auf den meisten E-Commerce-Websites wird dasselbe Kriterium verwendet, um eine große Vielfalt von Produkten in logische Kategorien zu gruppieren.
Breadcrumbs dürfen nicht für Websites verwendet werden, die keine logische Hierarchie zur Gruppierung von Inhalten oder Produkten aufweisen.

Wann man sie vermeiden sollte

Wo Breadcrumbs für die Struktur der Website unerlässlich sind, gibt es auch Fälle, in denen sie vermieden werden sollten. Wenn es eine Website gibt, die aus einer einstufigen Struktur ohne eindeutige Angabe der Gruppierung besteht, dann ist es im besten Interesse der Website, das Hinzufügen von Breadcrumbs zu vermeiden. Wie oben erwähnt, kann ein Diagramm oder eine Sitemap sehr hilfreich sein, um die Navigationsarchitektur der Website zu bestimmen.

Breadcrumbs sind nur sinnvoll, wenn sie von der Primärnavigation unterstützt werden. Semmelbrösel fungieren als Muskeln, während die primäre Navigation das Skelett ist, das sie zusammenhält. Ohne ihre vollständige Fortbewegung kann die Website-Hierarchie nicht produktiv funktionieren.

Arten von Paniermehl

Es gibt drei Arten von Breadcrumbs, die Sie kennen sollten: Ort, Pfad und Attribut.

1 Standortbasiert

Location Based Breadcrumbs werden verwendet, um die Grundstruktur der Website darzustellen. Sie ermöglichen Benutzern das Navigieren auf Websites mit mehreren Ebenen und umfassenden Inhaltspfaden. Solche Breadcrumbs sind sehr nützlich für Besucher, die auf einer Website von einer externen Quelle landen und eine tiefere Inhaltsebene betreten. Wenn Sie beispielsweise nach einem bestimmten Produkttyp suchen und auf die von Google angezeigten Suchergebnisse klicken, finden Sie sich beim Betreten der Webseite zwischen vielen Kategorien wieder. Die Breadcrumbs helfen Ihnen, Ihren Standort zu bestimmen und zu den Möglichkeiten in der hierarchischen Struktur zu navigieren. Diese Websites, die tiefe Inhaltsebenen enthalten, eignen sich sehr gut für standortbasierte Breadcrumbs. Ein ideales Beispiel ist eBay.

2 Pfadbasiert

Diese Breadcrumbs sind für die Verlaufsnavigation einer Website von Bedeutung. Pfadbasierte Breadcrumbs zeigen grundsätzlich jeden Pfad, den der Benutzer besucht, um seinen aktuellen Standort zu erreichen. Normalerweise werden solche Breadcrumb-Links dynamisch generiert. Während pfadbasierte Plugins für Benutzer hilfreich sein können, die viel Zeit damit verbringen, auf Websites zu surfen, sind sie für die Mehrheit der Benutzer meist verwirrend. Da die meisten Besucher nach eigenem Ermessen surfen, bewegen sie sich von einer Seite zur anderen. Die Schaltfläche „Zurück” im Browser löst die meisten ihrer Bedürfnisse, um ihren Pfad zu ändern. Dies macht es insbesondere für die Art von Besuchern nutzlos, die auf der Site-Seite ankommen, die sich bereits tief in der Website befindet.

3 Attributbasiert

E-Commerce-Websites profitieren am meisten von attributbasierten Breadcrumbs. Sie helfen bei der Auflistung der Kategorien nach der jeweiligen Seite oder dem Produkt. Diese Art von Breadcrumbs ist äußerst hilfreich, um Benutzer zu ermutigen, die Beziehung von Produkten zueinander zu verstehen. Wenn die Website beispielsweise Jeans verkauft, werden sie attributbasierte Breadcrumbs verwenden, um Kunden zu helfen, zwischen Regular Fit, Slim Fit oder Skinny Jeans zu navigieren.

Best Practices für die Breadcrumb-Navigation

Beachten Sie beim Entwerfen einer Breadcrumb-Navigation die folgenden Dinge. Die Breadcrumb-Navigation ist eine zusätzliche Hilfe, um die Erfahrung Ihrer Benutzer auf Ihrer Website zu verbessern.

Vermeiden Sie doppelte Elemente

Wenn Sie wirklich Breadcrumbs zu Ihrer Website hinzufügen möchten, können Sie dies genauso gut auf die richtige Weise tun. Zunächst einmal müssen Sie alle doppelten Elemente beseitigen, die zwischen der Spur der Breadcrumbs auftreten könnten. Leider habe ich dies bei vielen hochrangigen Websites gesehen, bei denen dieselben Seiten in mehrere Kategorien oder die angezeigten Inhaltsebenen fallen. Das verwirrt nicht nur den Besucher, sondern wirft auch ein schlechtes Licht auf Ihre Website.

SEO-Kompatibilität

Breadcrumbs sind nicht nur Navigationssteuerungen für Ihre Besucher, sondern auch große Vorteile für Ihre SEO-Praxis. Sie können Schlüsselwörter innerhalb der Breadcrumbs verwenden, um Ihre Platzierungen in Suchmaschinen zu verbessern. Es wird empfohlen, SEO-freundliche Namen für die Kategorien Ihrer Website zu wählen, damit Suchmaschinen die Breadcrumbs in ihren Ergebnissen problemlos auflisten können.

Verwenden Sie Breadcrumbs als alternative Navigation

Breadcrumbs sind zwar eine ausgezeichnete Quelle, um Benutzern beim Navigieren von einem Punkt zum anderen zu helfen, es ist jedoch wichtig, dass sie nur als sekundäre Quelle behandelt werden sollten. Breadcrumbs sind eine zusätzliche Funktion zur Verbesserung der Benutzerfreundlichkeit für den Besucher und können in keinem Fall die primäre Navigationsstruktur der Website ersetzen.

Es ist sinnlos, die aktuelle Seite in der Breadcrumb-Navigation zu verlinken

Obwohl die Anzeige des aktuellen Standorts des Besuchers auf der Breadcrumb-Spur optional ist, müssen Sie sicherstellen, dass der in der linearen Struktur angezeigte Link nicht angetippt oder anklickbar ist. Es würde den Besucher nur verwirren, ihm den Link der Seite anzuzeigen, auf der er sich gerade befindet.

Trennzeichen hinzufügen

Die Verwendung von Trennzeichen ist eine großartige Praxis, um Ihrer Breadcrumbs-Navigation ein sauberes und ansprechendes Aussehen zu verleihen. Es verhindert, dass der Text zu nahe kommt, wenn der Benutzer in tiefere Ebenen vordringt, und schafft eine dynamische Struktur, die leicht zu verstehen und zu interagieren ist.

Sie können das Zeichen › zur Bezeichnung der Hierarchie verwenden, da es typischerweise in Kategorieformaten wie Kleidung › Hemden › Kragenhemden usw. verwendet wird. Andere Symbole sind Pfeile (→), rechtwinklige Anführungszeichen (») und Schrägstriche (⁄).

Stellen Sie die Größe und Füllung von Paniermehl vor

Beim Entwerfen der Breadcrumbs müssen Sie die Polsterung und die Zielgröße berücksichtigen. Der Abstand zwischen den Breadcrumbs muss erkennbar sein, da die Besucher sie sonst möglicherweise nicht effektiv nutzen können. Stellen Sie gleichzeitig sicher, dass die Größe des Brotkrümels andere Elemente um ihn herum nicht beeinträchtigt, damit die primäre Navigation unbeeinflusst bleibt.

Konzentrieren Sie sich niemals mehr als erforderlich auf das Design von Breadcrumbs

Verwenden Sie niemals helle Farben oder ausgefallene Schriftarten, um Ihre Breadcrumbs darzustellen. Obwohl der Breadcrumb-Trail für die Benutzer wichtig ist, nachdem sie auf der Seite gelandet sind, sollte er nicht das erste sein, was ihnen auffällt. Das Hinzufügen von Glamour zur Breadcrumb-Navigation kann dazu führen, dass der Benutzer die primäre Navigation der Website ignoriert. Dies kann den Benutzer von der eigentlichen Absicht ablenken, die Seite zu betreten, und zum Verlust einer potenziellen Konversion für das Geschäft führen. Google ist da das beste Beispiel. Mit so vielen Ebenen von durchsuchten Inhalten zeigt es einen einfachen Breadcrumb-Navigationspfad ohne ausgefallene Schriftarten oder Farben, sodass Benutzer die Breadcrumbs leicht finden und mit ihnen interagieren können.

Welche Art sollte vermieden werden?

Es ist umstritten, ob standort-/attributbasierte Breadcrumbs oder pfadbasierte Breadcrumbs zum Anzeigen der Site-Hierarchie verwendet werden sollen. Als Faustregel gilt, dass Breadcrumbs nicht den Verlauf des Benutzers zeigen dürfen, sondern die Seitenhierarchie. Nach unserer Einschätzung und Meinung sollten Sie sich wahrscheinlich nicht mehr um pfadbasierte Breadcrumbs kümmern. Zum einen hilft es bei der UX nicht, da es aufgrund der fehlenden Hierarchie zwischen den verschiedenen Ebenen möglicherweise zu Verwirrung bei den Besuchern führen kann. Aus diesem Grund werden orts- und attributbasierte Breadcrumbs gegenüber pfadbasierten Breadcrumbs bevorzugt.

Abschließende Gedanken

Breadcrumbs sind genauso wichtig wie jedes andere Element auf einer Website. Jetzt, da die Technologie die Speicherung größerer Datenmengen, schnellerer Internetgeschwindigkeiten und noch schnellerer Ladezeiten ermöglicht, kann die Navigation auf höheren Hierarchieebenen umfassender dargestellt werden, ohne ins Schwitzen zu geraten. Mit Hilfe von Breadcrumbs wird Ihre Website nicht nur eine bessere Benutzererfahrung erzeugen, sondern auch mehr Umsatz von ihren Kunden generieren. Eine reibungslosere und einfachere Navigation bedeutet einen einfacheren Zugriff auf Produktseiten und behindert weniger Bezahlvorgänge.