Free Press

Im Märchen Hänsel und Gretel lassen zwei Kinder Brotkrümel im Wald fallen, um den Weg nach Hause zu finden.

Heutzutage verirren Sie sich wahrscheinlich nicht mehr so oft im Wald, aber ich wette, dass Sie sich auf schlecht gestalteten Websites frustrierend orientierungslos gefühlt haben.

Beim Website-Design ist die Brotkrümelnavigation eine Möglichkeit, Ihren Benutzern ihren Standort und den Weg dorthin zu zeigen (ähnlich wie Hänsels Brotkrümel). Sie hilft den Nutzern auch, übergeordnete Seiten schneller zu finden, wenn sie über eine Suche oder einen Deep Link auf Ihrer Website gelandet sind.

Jakob Nielsen, Mitbegründer der Nielsen Norman Group, empfiehlt die Breadcrumb-Navigation seit 1995 und macht ein starkes Argument für sie geltend: „Alles, was Breadcrumbs bewirken, ist, dass die Benutzer sich leichter auf der Website bewegen können, vorausgesetzt, der Inhalt und die Gesamtstruktur sind sinnvoll. Das ist ein ausreichender Beitrag für etwas, das nur eine Zeile im Design einnimmt.“

Wenn die Website Ihres Unternehmens aus mehreren Ebenen besteht, könnten Sie die Einführung einer Breadcrumb-Navigation in Betracht ziehen, um die Navigation auf Ihrer Website zu erleichtern. Doch wie bei jedem Designelement gibt es auch hier eine richtige und eine falsche Vorgehensweise. Im Folgenden finden Sie neun Tipps und Beispiele, mit denen Sie sicherstellen können, dass Sie die Breadcrumb-Navigation für Ihre Benutzer so effektiv wie möglich gestalten.

Tipps und Beispiele zur Breadcrumb-Navigation

Verwenden Sie die Breadcrumb-Navigation nur, wenn sie für die Struktur Ihrer Website sinnvoll ist.

Die Breadcrumb-Navigation hat eine lineare Struktur, daher sollten Sie sie nur verwenden, wenn sie für die Hierarchie Ihrer Website sinnvoll ist. Wenn Sie untergeordnete Seiten haben, die von verschiedenen Landingpages aus zugänglich sind, verwirrt die Breadcrumb-Navigation nur die Leser, die immer wieder von verschiedenen Ausgangspunkten aus auf dieselben Seiten zugreifen. Wenn Sie eine relativ einfache Website mit nur wenigen Seiten haben, brauchen Sie wahrscheinlich keine Breadcrumb-Navigation.

Die Breadcrumb-Navigation sollte nicht zu groß sein.

Die Breadcrumb-Navigation ist ein sekundäres Hilfsmittel zu Ihrer primären Navigationsleiste, daher sollte sie nicht zu groß oder zu auffällig auf der Seite sein. Auf der Website von DHL beispielsweise ist die primäre Navigationsleiste groß und gut erkennbar, mit Spalten wie „Express“, „Paket & eCommerce“, „Logistik“ usw. Die Breadcrumb-Navigationsleiste ist der kleinere Abschnitt darunter mit der Aufschrift „DHL Global | > Logistics | > Freight Transportation“. Sie möchten nicht, dass Ihre Nutzer Ihre Breadcrumb-Navigation mit der Hauptnavigationsleiste verwechseln.

Fügen Sie den vollständigen Navigationspfad in Ihre Breadcrumb-Navigation ein.

Ich habe „Elon University Non-Degree Students“ gegoogelt, um zu dieser Landing Page zu gelangen, aber Elon ist klug, den vollständigen Navigationspfad, einschließlich „Home“ und „Admissions“, anzugeben. Wenn Sie bestimmte Ebenen weglassen, verwirren Sie die Benutzer und der Breadcrumb-Pfad ist nicht so hilfreich. Auch wenn die Nutzer nicht auf der Startseite begonnen haben, sollten Sie ihnen eine einfache Möglichkeit bieten, Ihre Website von Anfang an zu erkunden.

Von der höchsten zur niedrigsten Ebene vorgehen.

Es ist wichtig, dass die Breadcrumb-Navigation von links nach rechts verläuft, wobei der nächstgelegene Link auf der linken Seite die Startseite und der nächstgelegene Link auf der rechten Seite die aktuelle Seite des Nutzers ist. Eine Studie der Nielsen Norman Group hat ergeben, dass die Nutzer 80 % ihrer Zeit mit der linken und 20 % mit der rechten Hälfte einer Seite verbringen, was für ein Design von links nach rechts spricht. Außerdem wird der Link, der am weitesten links liegt, als Anfang der Kette angezeigt, so dass es sich dabei um die Seite mit der höchsten Ebene handeln sollte.

Bleiben Sie bei den Breadcrumb-Titeln konsistent mit den Seitentiteln.

Um Verwirrung zu vermeiden, sollten Sie bei den Seiten- und Breadcrumb-Titeln konsistent bleiben, vor allem, wenn Sie in diesen Titeln bestimmte Schlüsselwörter ansprechen. Außerdem sollten Sie Ihre Breadcrumb-Titel eindeutig mit der Seite verknüpfen. Wenn der Breadcrumb-Titel keinen Link enthält, sollten Sie dies deutlich machen. Nestle kennzeichnet seine Breadcrumb-Titel so, dass sie mit den Seitentiteln übereinstimmen. „Areas of impact & commitment“, zum Beispiel, liest sich in der Breadcrumb-Navigation genauso wie auf der Seite.

Nestle unterscheidet auch gut zwischen Links und Nicht-Links mit unterschiedlichen Farben – die Links sind blau, während die Nicht-Links grau bleiben.

Sein Sie kreativ beim Design.

Die traditionelle Breadcrumb-Navigation sieht so aus: Home > Über uns > Karriere. Sie müssen jedoch nicht dem traditionellen Pfad folgen, wenn Sie der Meinung sind, dass ein anderes Design Ihre Zielgruppe besser ansprechen oder auf Ihrer Website besser aussehen könnte.

Target verwendet beispielsweise eine Breadcrumb-Navigation auf seinen Produktseiten (denn wer würde sich nicht in der virtuellen Schuhabteilung verirren?), verwendet aber „/“-Symbole und einfachen schwarzen und grauen Text. In diesem Fall passt die subtile Designvariante gut zur Ästhetik der Website.

Sorgen Sie für Sauberkeit und Übersichtlichkeit.

Ihre Breadcrumb-Navigation ist lediglich ein Hilfsmittel für den Benutzer und sollte im Idealfall nur dann bemerkt werden, wenn der Benutzer danach sucht. Aus diesem Grund sollten Sie die Breadcrumb-Navigation nicht mit unnötigem Text überladen.

Eionet könnte zum Beispiel auf den Text „Sie sind hier“ verzichten. Der Text soll zwar hilfreich sein, aber er überfrachtet die Seite. Mit dem richtigen Design sollte eine Breadcrumb-Navigation auch ohne Einleitung auffällig genug sein.

Überlegen Sie, welche Art von Breadcrumb-Navigation für Ihre Website am sinnvollsten ist.

Es gibt ein paar verschiedene Arten von Breadcrumbs, die Sie verwenden können: ortsbezogene, attributbezogene und historienbezogene. Ortsbezogene Breadcrumbs zeigen dem Benutzer, wo er sich in der Hierarchie der Website befindet. Attributbasierte Breadcrumbs zeigen dem Benutzer, in welche Kategorie seine Seite fällt.

Bed Bath & Beyond verwendet die attributbasierte Breadcrumb-Navigation, um den Nutzern zu zeigen, in welche Kategorie ihre Produktseite fällt, so dass die Nutzer zurück zu „Küche“ oder „Kleingeräte“ klicken können, um sich ähnliche Artikel anzusehen. Diese Art der Breadcrumb-Navigation ist für Kunden von Bed Bath & Beyond am effektivsten. Wenn Sie eine Breadcrumb-Navigation erstellen, sollten Sie überlegen, was für die Besucher Ihrer Website am nützlichsten ist.

Kennen Sie Ihre Zielgruppe.

Best Practices für die Breadcrumb-Navigation drängen Webdesigner dazu, die Navigation am oberen Rand der Seite zu platzieren – aber Apple, eines der wertvollsten Unternehmen aller Zeiten, widersetzt sich dieser Logik, indem es seine Breadcrumb-Navigation am unteren Rand seiner Website platziert. Letztendlich ist es entscheidend, dass Sie Ihr Publikum kennen. Die Kunden von Apple sind in der Regel technisch versiert und würden die Navigation wahrscheinlich finden, wenn sie sie bräuchten. Berücksichtigen Sie die Bedürfnisse Ihrer Kunden und führen Sie A/B-Tests durch, wenn Sie sich nicht sicher sind.

Letztendlich ist die Breadcrumb-Navigation ein effektives Mittel, um die Navigation auf Ihrer Website zu erleichtern, aber Sie sollten sich an bewährte Designpraktiken halten, um sicherzustellen, dass Sie das Tool optimal nutzen. Weitere UX-Tipps finden Sie in „The Ultimate Guide to UX Design“.