Breadcrumb-Navigation - Best Practices & Beispiele

Die Breadcrumb-Navigation wird im Design- und Entwicklungsprozess oft übersehen. Einige Leute halten es für unnötig, während andere das Gefühl haben, es sei zu umständlich für das, was es wert ist. Tatsache ist, dass die Breadcrumb-Navigation die Benutzerfreundlichkeit einer Website erheblich erhöht.

Breadcrumbs bieten Benutzern eine alternative Navigationsmethode, mit der sie sehen können, wo sie in der Hierarchie einer Website stehen, und die Anzahl der Schritte verringern, die erforderlich sind, um zu einer übergeordneten Website innerhalb einer Website zu gelangen.

Hier werden die verschiedenen Arten der Navigationspfadnavigation beschrieben, die heute verwendet werden, warum sie wichtig sind und wie sie am besten online implementiert werden sollten. Auch hier als Referenz enthalten Über 30 Beispiele, wie Breadcrumbs heute online verwendet werden.

Denken Sie daran, dass die Breadcrumb-Navigation eine Website wahrscheinlich nicht schädigen oder schädigen kann. Sie bietet jedoch einen zusätzlichen Nutzen für Ihre Benutzer, indem sie die Benutzerfreundlichkeit und Funktionalität Ihrer Website insgesamt erhöht.

Breadcrumb-Typen

Pfad

Pfadbasierte Breadcrumbs geben die Schritte oder den Pfad an, die ein Benutzer unternommen hat, um zur aktuellen Seite einer Website zu gelangen. Außerdem sehen Benutzer Links zu zuvor besuchten Seiten, um zur aktuellen Seite zu gelangen. Unter den drei Arten der Breadcrumb-Navigation ist die Path-basierte Breadcrumb-Navigation online am wenigsten beliebt. Die pfadbasierte Navigationspfadnavigation bietet ähnliche Funktionen wie die “Nach vorne” und “Zurück” Tasten in einem Browser. Für die meisten Websites bietet die Orts- und Attribut-basierte Navigationspfadnavigation eine bessere Funktionalität.

Ort

Ortsbezogene Breadcrumbs zeigen dem Benutzer an, wo sich die aktuelle Seite in der Hierarchie der Website befindet. Diese Art der Breadcrumb-Navigation wird am häufigsten auf Websites mit mehr als zwei Ebenen der Tiefe oder des Inhalts angezeigt. Beim Wechsel auf eine Website werden die Benutzer mit Links zu Seiten oder Kategorien versehen, die als a dienen “Elternteil” oder eine Ebene höher von der gerade angezeigten Seite. Zum Beispiel kann sich ein Benutzer im Internet befinden “Sprechen” Seite jedoch die “Was wir tun” Seite ist ein Elternteil der “Sprechen” Seite während der “Zuhause” Seite ist ein Elternteil der “Was wir tun” Seite.

Clearleft Ltd

Attribut

Attributbasierte Breadcrumbs geben dem Benutzer die Attribute oder Kategorien an, die der aktuellen Seite innerhalb einer Website zugeordnet werden. Produkte, die häufig auf E-Commerce-Websites zu finden sind, können nicht nur in eine Kategorie fallen, sondern auch unter bestimmten Eigenschaften. Zum Beispiel kann ein Fahrzeug als SUV eingestuft werden, dann hat es die Farbe Schwarz und wird im Jahr 2010 freigegeben.

Cars.com

Warum Breadcrumbs verwenden??

• Große Benutzerfreundlichkeit

  Mit Breadcrumbs können Benutzer auf einer Website problemlos navigieren. Wenn ein Benutzer auf einer internen Seite Ihrer Website aus einer anderen Quelle landet, wird der Benutzer anhand von Breadcrumbs genau sehen können, wo er sich innerhalb der Hierarchie der Website befindet. Der Benutzer hat auch die Möglichkeit, jederzeit ohne Schwierigkeiten auf eine höhere Ebene der Website zu gelangen.

• Einfach zurückspulen

  Primärnavigationen sind nicht dafür gedacht, rückwärts zu verfolgen, wo Breadcrumbs sind. Da Backtracking im Internet äußerst beliebt ist, kann die Bereitstellung einiger zusätzlicher Hilfen einen großen Beitrag leisten.

• Beseitigen Sie zusätzliche Klicks

  Mit Breadcrumbs können Benutzer von einer Website zur nächsten springen, ohne die “nach vorne” oder “rückwärts” Schaltflächen im Browser. Zusätzlich machen die Breadcrumbs den Benutzer überflüssig, ständig auf die Hauptnavigation zurückzugreifen.

• Zeigt die Benutzerhierarchie an

  Die primäre Navigation einer Website spiegelt nicht die Hierarchie jeder Seite innerhalb der Website wider. Wenn Sie Benutzern Breadcrumbs geben, können Sie die Hierarchie einer Seite innerhalb einer Website anzeigen.

• Visuell erfreulich

  Mit Breadcrumbs erhalten Benutzer nicht nur eine zusätzliche Benutzerfreundlichkeit, sondern auch, ohne viel Platz oder Platz auf der Seite einzunehmen. Breadcrumbs lassen sich leicht in das visuelle Design Ihrer Website integrieren und bieten Benutzern einen großen Nutzen.

• Bietet zusätzliche Hilfe

  Es ist durchaus möglich, dass einige Benutzer nicht verstehen, wie die primäre Navigation einer Website funktioniert, und in einigen Fällen wissen die Benutzer nicht einmal, wonach sie suchen. Wenn Benutzer Breadcrumbs geben, können sie den Gesamtfortschritt und die Struktur einer Website sehen und so die Website besser navigieren.

• Niedrigere Absprungraten

  In der Regel bieten Breadcrumbs eine detailliertere Navigation als die Primärnavigation. Auf diese Weise erhalten Benutzer mehr Möglichkeiten zur Navigation auf einer Website. Wenn Sie ihnen die Möglichkeit geben, ein paar Ebenen innerhalb der Website rückgängig zu machen, wird Ihre Absprungrate gesenkt.

• Baut Interesse auf

  Wenn ein Benutzer auf einer internen Seite einer Website landet, sind die Quoten bereits auf einer interessanten Seite. Breadcrumbs können Links zu zusätzlichen Seiten und Informationen bereitstellen, an denen sich der Benutzer ebenfalls interessiert, ohne sie von Anfang an zu starten.

Breadcrumb-Best Practices

• Verwenden Sie Breadcrumbs oben auf einer Seite

  Die häufigste und instinktivste Anordnung für Breadcrumbs befindet sich oben auf einer Seite. So können Benutzer die Breadcrumbs unkompliziert finden und entsprechend nutzen.

• Verwenden Sie Breadcrumbs konsequent

  Wenn Sie sich für die Verwendung von Breadcrumbs entscheiden, stellen Sie sicher, dass Sie diese auf Ihrer gesamten Website verwenden. Wenn Benutzer auf einigen Seiten und nicht auf anderen Seiten Breadcrumbs erhalten, werden sie nur verwirrt und frustriert. (Ein hervorragendes Beispiel hierfür ist Amazon, da hier auf den einzelnen Produktseiten Breadcrumbs entfernt werden.)

• Breadcrumbs sollten sich grausam abbauen

  Breadcrumbs sollten immer mit der Startseite beginnen und sich auf die aktuelle Seite reduzieren. Dabei müssen Ihre Brotkrümel Schritt für Schritt von der höchsten Stufe zur untersten Stufe wechseln.

• Breadcrumbs entsprechend anpassen

  Sie möchten, dass Ihre Brotkrümel gesehen werden. Sie möchten jedoch nicht, dass sie im Mittelpunkt stehen. Sie möchten auch deutlich machen, dass Ihre Breadcrumbs nicht Teil des Hauptinhalts einer Seite sind, sondern nur zusätzliche Unterstützung. Finden Sie ein fröhliches Medium, in dem Ihre Brotkrumen auffallen, jedoch nicht anmaßend sind.

• Seiten eindeutig kategorisieren

  Wenn Sie Seiten haben, die in zwei oder mehr Kategorien fallen, möchten Sie möglicherweise keine Breadcrumbs auf Ihrer Website verwenden. Der Versuch, eine Seite unter zwei oder mehr Kategorien zu platzieren, führt wahrscheinlich nur zu unklaren Bußsätzen und rätselt den Benutzer. Stellen Sie sicher, dass Ihre Website über eine organisierte Hierarchie verfügt und entsprechend durch Ihre Breadcrumbs angezeigt wird.

• Trennen Sie die einzelnen Ebenen klar voneinander

  Stellen Sie sicher, dass Benutzer den Unterschied zwischen den einzelnen Breadcrumb-Stufen unterscheiden können. Das häufigste Trennzeichen zwischen den Ebenen ist das Zeichen 'größer als' (>). Andere gute Trennzeichen sind doppelte Anführungszeichen (»), Schrägstriche (/) und Pfeile (→). Wenn Sie ein Nur-Text-Zeichen verwenden, verwenden Sie nur eines. (»Ist ansprechender und effektiver als >>)

• Aktuelle Seite heraussuchen

  Verwenden Sie einen anderen Stil für das letzte Element einer Breadcrumb-Liste, um festzustellen, dass es sich um die aktuell angezeigte Seite handelt. Sie können dies erreichen, indem Sie den Artikel erstellen Fett gedruckt, seine Farbe ändern oder betonen es.

• Machen Sie die aktuelle Seite nicht zu einem Link

  Es ist nicht erforderlich, den letzten Eintrag einer Breadcrumb-Liste zu einem Link zu machen, da dies die aktuell angezeigte Seite ist. Wenn Sie hier einen Link erstellen, werden die Benutzer nur verwirrt, insbesondere wenn sie darauf klicken und nicht auf eine neue Seite gelangen.

• Verwenden Sie keine Breadcrumbs als Seitenüberschrift

  Die Verwendung des letzten Elements einer Breadcrumb-Liste als Überschrift einer aktuellen Seite ist unwirksam. Wenn Sie sich für die Verwendung von Breadcrumbs entscheiden, fügen Sie auch eine Seitenüberschrift hinzu.

• Breadcrumbs ersetzen die primäre Navigation nicht

  Breadcrumbs dürfen nur als Unterstützung für die Primärnavigation verwendet werden, um die Primärnavigation niemals vollständig zu ersetzen. Sie sollten Benutzern immer eine Hauptnavigation zur Verfügung stellen, von der aus sie auf einer Website navigieren können, bevor Sie die Breadcrumb-Navigation verwenden.

Große Beispiele für Brotkrumen

Vitra Direct

Trek Bikes

Illy

SiteInspire

Mia und Maggie

Intridea

Design von Menschen

Roxy

Blik

SitePoint

Ziel

Walmart

1-800-Blumen

BestBuy

Amazon.com

Scheunen & Noble

Lands End

Apfel

Google

Verfolgungsjagd

AbsolutePunk.net

Littman Bros. Lighting

Guardian.co.uk

BEREICH 17

Wufoo

Pfadfinderinnen von Mitte Tennessee

Das Glasgow-Kollektiv

Erstgeborene

Bell Kanada

Grooveshark

Devlounge

Über den Autor - Shay Howe ist ein professioneller Designer für Web- und Benutzeroberflächen, der derzeit in Chicago, IL lebt. Er schreibt in seinem eigenen Blog bei letecounthays über Webdesign und würde gerne auf Twitter von Ihnen hören. Bitte zögern Sie nicht, ihm Hallo zu sagen!