Breadcrumbs und UX? Aber sicher doch!
Breadcrumbs oder auf deutsch Brotkrümelnavigation kennt wohl jeder Nutzer von Software, vor allem von Webseiten. Bei der Begrifflichkeit blickt man jedoch schon mal in fragende Gesichter. Nachdem man dann seinem Gegenüber erklärt hat, wie das mit „Hänsel und Gretel“ und den Brotkrümeln war, wissen zwar alle, was „Breadcrumbs“ auf Deutsch bedeutet, aber können meist den Zusammenhang zur Navigationszeile innerhalb einer Software nicht herstellen.
„Das ist die Zeile an der Dir angezeigt wird, wo Du Dich gerade auf der Seite befindest„
Ab dann macht es bei jedem Klick.
Breadcrumbs sind auch unter dem Aspekt der SEO (Search engine optimization) ein wichtiger Bestandteil. Aber dies wird nicht Teil des Artikels sein. Wen das Thema SEO und breadcrumbs dennoch interessiert, möchte ich auf diesen interessanten Google-Artikel verweisen.
Bevor ich zu den Do`s & Dont`s bei der Benutzung von breadcrumbs komme, ein kurzer schematischer Aufbau dieser kleinen Krümel.
Kategorien
Breadcrumbs können in folgende 3 Kategorien eingeteilt werden.
Location (Ort)
Diese Art ist wahrscheinlich die Bekannteste. Sie zeigt an, wo sich die aktuelle Seite in der Hierarchie der kompletten Applikation befindet.
Wurzelkategorie > Unterkategorie 1 > Unterkategorie 1.1
Path (Pfad)
Sie zeigen Schritte an, die ein Besucher unternommen hat, um zu der Seite zu gelangen, auf der er sich gerade befindet. Die breadcrumbs enthalten Links zu bereits besuchten Seiten. Diese Variante ist am wenigsten beliebt, da diese Art der Navigation im Wesentlichen die Vorwärts- und Zurück-Schaltflächen repliziert.
Unterkategorie 1.1 > Startseite > Kategorie 4 > Kategorie 2
Attribute (Eigenschaft)
Diese breadcrumbs, die auf E-Commerce-Webseiten üblich sind, geben Attribute oder Kategorien an, die der aktuellen Seite mit einer Seite zugewiesen sind. Produkte fallen nicht nur in eine bestimmte Kategorie, sondern haben auch bestimmte Attribute.
Fahrzeuge > Autos > Hersteller > Reihe > Modell
Genug der Theorie, was hat das nun alles mit Usability zu tun? Sehr viel! Diese Art der Navigation bei der der Benutzer immer weiß, wo er sich gerade befindet ist sehr wichtig. Es ist zudem nicht gewährleistet, dass er immer über die Startseite kommt. Er kann z.B. über ein Google Suchergebnis auf eine Unterseite gelangen. Da kann es verwirrend sein, wenn der Nutzer nicht weiß, auf welcher Hierarchie er sich im Moment bewegt.
Sie reduzieren Klicks und Aktionen, um auf übergeordnete Seiten zurückzukehren anstatt die Schaltfläche „Zurück“ des Browsers oder die primäre Navigation der Webseite zu verwenden, um zu einer übergeordneten Seite zurückzukehren, können Benutzer damit die Navigationspfade mit weniger Klicks verwenden.
Beispiele aus dem Alltag
Breadcrumbs können die Absprungraten (bounce rates) reduzieren. Breadcrumb-Pfade können eine großartige Möglichkeit sein, Erstbesucher nach der Anzeige der Zielseite dazu zu bringen, eine Webseite zu durchsuchen. Gehen wir einmal davon aus, ein Besucher kommt über eine Google-Suche auf Deine Seite. Wenn breadcrumbs angezeigt werden, kann dieser Besucher dazu verleitet werden, auf übergeordnete Seiten zu klicken, um relevante Themen von Interesse anzuzeigen. Dies wiederum reduziert die allgemeine Absprungrate der Website.
Die Wichtigkeit von breadcrumbs ist den Unternehmen zwar durchaus bewusst, aber man bemerkt eine leider stark zunehmende Abschaffung dieser, aus marginalen Design-Gründen. Bei meiner Recherche sind vor allem die Autohersteller negativ aufgefallen. Die Herstellerseiten von BMW, Audi, VW, Porsche, Mercedes, Fiat und Ford hatten gar keine oder eine nur rudimentär vorhandene. Opel sticht hier positiv hervor. Ähnlich wie die Seite von Renault , welche zumindest beim Konfigurator breadcrumbs verwendet.
Sind breadcrumbs für alle Webseiten geeignet?
Nein, das kommt auf die Art der Webseite an.
Was ist zu beachten?
Geeignet für große Webseiten mit hierarchisch angeordneten Seiten, z.B. beim E-Commerce.
Home > Autos > Hersteller > Marke
Home > Autos (< 3 Hierarchien)
Home | Autos | Hersteller | Marke (verwende besser Pfeile)
URL-Struktur als Breadcrumb-Link-Struktur
Die letzte Breadcrumb-Ebene ist die Seite, auf der sich der Benutzer befindet. Mach das zu einem Textlabel, nicht zu einem Link. Wenn Du einen Link erstellst, verwirrt das die Benutzer, wenn sie darauf klicken. Sie landen auf der gleichen Seite und fragen sich, was sich geändert hat. Verwende besser ein Textfeld, um deutlich zu machen, wo sich der Benutzer befindet.
Verwende Pfeile als visuelle Hinweise für breadcrumbs, da sie die Richtung signalisieren. Es sieht eher wie eine Spur aus, durch die der Benutzer navigierte. Vermeide senkrechte Striche „pipes„, da diese eher als Trennzeichen fungieren.
Zusammenfassung
Die Breadcrumb-Navigation sollte als eine zusätzliche Funktion betrachtet werden und nicht das primäre Navigationsmenü ersetzen. Es stellt ebenso eine alternative Möglichkeit dar, innerhalb der Applikation zu navigieren.
Breadcrumbs sind keine Option, sie sind eine Notwendigkeit, sobald die Applikation drei oder mehr Kategorien von Inhalten enthält. Usability-Tests haben gezeigt, dass es nur Vorteile und keine Nachteile bei der Verwendung von breadcrumbs gibt.
Die Wahrscheinlichkeit, dass Nutzer breadcrumbs verwenden, liegt bei 82 Prozent, wenn sie sich direkt am Seitentitel befinden, wie folgende Studie zeigte. Ebenfalls sehr interessant eine Studie aus dem Jahr 2004 , die zu dem Ergebnis kam, dass die Benutzer die gestellten Aufgaben deutlich schneller erledigen konnten, als die Benutzer ohne breadcrumbs.
All das zeigt sehr deutlich, dass breadcrumbs und eine gute Usability sehr eng miteinander verknüpft sind. Dadurch profitiert natürlich auch die User Experience der Anwendung. Breadcrumbs sind somit nicht nur für Webseiten sondern für Software allgemein wichtig.
Weiterführende Links
https://www.nngroup.com/articles/breadcrumb-navigation-useful/