In unserer Newsletter-Ausgabe "🔥 Von Google und anderen SEO-Leidenschaften" haben wir Dir bereits von unterschiedlichen Breadcrumb-Variationen berichtet. Vitali Friedman gibt Dir im Smashing Magazin nun Tipps, wie Du Deine perfekte Breadcrumb von der UX-Warte aus designen kannst.
-
Die Optik von Breadcrumbs
-
Die Positionierung
-
Welche Seiten von einer Breadcrumb profitieren
-
Was das für mobile bedeutet
Den umfangreichen Artikel rundet Vitali mit seiner Breadcrumb-Checklist ab.
Vitali macht zunächst deutlich, dass Breadcrumbs in zwei Richtungen wirken. Sowohl Ausblick-gebend, was den Nutzer auf der Seite erwartet, als auch zurückleitend, dahingehend, wo sich der Nutzer befindet und wie er zurückkommt. Für kleine Seiten mit flacher Navigationshierarchie sieht er nicht immer einen Mehrwert von Breadcrumbs, da man stattdessen auch einfach die dazugehörige Oberkategorie in die Seitenleiste aufnehmen könnte.
Aus der SEO-Sicht würden wir dem klar widersprechen, schließlich geben Breadcrumbs, sofern richtig gesetzt, weiteren Aufschluss darüber, wie die Seiten miteinander verknüpft sind und sind ein wichtiger Aspekt interner Verlinkung.
Wohin mit der Breadcrumb und wohin zeigen die Symbole?
Wie sollte die Breadcrumb ausgestaltet sein? Pfeile von links nach rechts oder umgekehrt? Macht das einen Unterschied? Laut Vitali verstehen die Leute durchaus beides, aber gelernt ist: von links nach rechts. Warum also damit brechen?
Neben der Richtung ist aber auch die Platzierung von Bedeutung. Sie muss im für Nutzer offensichtlichen Bereich der Page sein, gerne in der unmittelbaren Nähe der Hauptüberschrift, so dass kein Scrollen notwendig ist, um die Breadcrumb zu entdecken.
Sollte die aktuelle Seite Teil der Breadcrumb sein?
Da scheiden sich die Geister. Grundsätzlich gilt jedoch, wird die aktuelle Seite in der Breadcrumb aufgeführt, sollte sie sich vom Rest unterscheiden. Ansonsten lieber weglassen.
Was bedeuten die Tipps für die mobile Umsetzung?
Mobile gibt es weniger Platz und die Desktop-Variante wird schnell zweizeilig. Die Lösung dafür könnte sein, nur ein einziges Element anzuzeigen. Das ist vernünftig, begünstigt aber mehr Sprünge gegenüber einer schnelleren Interaktion. Man muss auf dem Handy mehrere Seiten durchlaufen, um ans Ziel zu kommen und nutzt stattdessen ggf. lieber das Navigationsmenü.
Alternativ könnten wir eine Sticky-Breadcrumb so lange wie möglich sichtbar halten, ohne die Menge des angezeigten Inhalts auf der Seite zu beeinträchtigen. Auch horizontal scrollbare Breadcrumbs bieten eine schöne Möglichkeit, den Inhalt nicht nach unten zu schieben und trotzdem alles abbilden zu können.
Was meinst Du? Wie würdest Du die Breadcrumb auf Deiner Seite gestalten? Schau Dir auch gern die Checkliste an, aus unserer Sicht, eine super Handreichung für die Ausgestaltung der Breadcrumb!