Breadcrumb- und Wegweiser-System

Was macht Breadcrumb- und Wegweiser-System?

Zweck

Das Breadcrumb- und Wegweiser-System bietet eine Methodik zur Gestaltung der sekundären Navigationspfade, die oberhalb des Hauptinhalts platziert sind. Es stellt sicher, dass sich Nutzer in tiefen Informationsarchitekturen (IA) niemals „verloren“ fühlen, indem es eine klare, lineare Karte ihrer aktuellen Position relativ zur Startseite oder zum Root-Verzeichnis bereitstellt. Dieses System balanciert navigatorische Präzision mit minimaler visueller Last, sodass Nutzer ihren Kontext verstehen und mit einem einzigen Klick zu übergeordneten Ebenen zurückkehren können.

Anwendungsfälle

• E-Commerce: Navigation durch Kategorie > Subkategorie > Produkt.
• Dokumentation & Wikis: Bewegen durch Band > Kapitel > Abschnitt > Seite.
• SaaS-Dashboards: Verwaltung verschachtelter Entitäten wie Konto > Projekt > Asset.
• Verzeichnisseite: Browsen durch Ort > Kategorie > Eintrag.
• Suchergebnisse: Anzeigen des Pfads zu einem bestimmten, über die Suche gefundenen Element.

Wann NICHT zu verwenden

• Flache Architekturen: Wenn die Site nur 1–2 Ebenen tief ist (Startseite > Seite), erzeugen Breadcrumbs unnötiges Durcheinander.
• Lineare Fortschritte: Verwenden Sie für schrittweise Assistenten oder Checkout-Abläufe stattdessen das step-progress-system.
• Dynamische/Nicht-hierarchische Pfade: Wenn der Pfad des Nutzers auf der Sitzungshistorie basiert (z.B. „Zurück zu den Suchergebnissen“) und nicht auf einer festen Struktur, verwenden Sie stattdessen eine „Zurück“-Schaltfläche.
• Landing Pages: Wenn das Ziel eine einzelne Conversion ist und die Navigation von der primären CTA ablenkt.

Eingaben

1. Informationsarchitektur (IA): Die hierarchische Karte der Site.
2. Aktueller Knoten: Die spezifische Seite, die der Nutzer gerade betrachtet.
3. Übergeordnete Hierarchie: Die Kette von Vorfahren von der aktuellen Seite bis zum Root.
4. Anzeigeeinschränkungen: Verfügbare horizontale Breite (aus dem responsive-grid-system).

Ausgaben

1. Wegweiser-Entwurf: Eine definierte Anatomie für Bezeichnungen, Trennzeichen und Links.
2. Trunkierungsstrategie: Regeln für die Behandlung langer Pfade auf kleinen Bildschirmen oder bei Überlauf-Szenarien.
3. Responsive Zuordnung: Wie die Spur auf mobilen Viewports zusammenklappt oder sich transformiert.
4. Semantische Barrierefreiheitsschicht: Definierte ARIA-Rollen und -Bezeichnungen für Screenreader.

Arbeitsablauf

1. Hierarchischen Pfad kartieren

Bestimmen Sie den absoluten Pfad von der Startseite/zum Root zur aktuellen Seite. Beispiel: Startseite > Ressourcen > Whitepapers > [Aktueller Seitentitel]

2. Visuelle Anatomie definieren

Legen Sie die Gestaltung für jede Komponente fest:

• Die Links: Standard-Link-Stil (aus dem interactive-state-system).
• Die Trennzeichen: Ein nicht interaktives Symbol (z.B. /, > oder →), das die Ebenen visuell unterscheidet.
• Die aktuelle Seite: Eine nicht anklickbare, reine Textbezeichnung, die den Standort des Nutzers bestätigt.

3. Räumlichen Rhythmus festlegen

Wenden Sie das fluid-spacing-system an:

• Abstände: Verwenden Sie kleine, konsistente Abstände (z.B. --space-xs) zwischen Links und Trennzeichen.
• Vertikale Platzierung: Platzieren Sie die Spur konsistent oberhalb des Haupt-<h1>, aber unterhalb des globalen Site-Headers.

4. Trunkierung und Überlauf implementieren

Für tiefe Pfade (4+ Ebenen) oder lange Titel:

• Mittlere Trunkierung: Klappen Sie Zwischenebenen zu einer Ellipse (...) zusammen, wenn die Gesamtbreite den Container überschreitet (z.B. Startseite > ... > Abschnitt > Seite).
• Label-Trunkierung: Verwenden Sie max-width und text-overflow: ellipsis für einzelne lange Bezeichnungen, um Zeilenumbrüche zu vermeiden.

5. Responsive Anpassung planen

Kartieren Sie das mobile Erlebnis:

• Das „Zurück zum Eltern“-Muster: Ersetzen Sie auf sehr kleinen Bildschirmen die vollständige Spur durch einen einzigen „<- Zurück zu [Eltern]“-Link, um Platz zu sparen.
• Horizontaler Scroll: Erlauben Sie der Breadcrumb-Liste, horizontal zu scrollen, wenn die vollständige Spur erhalten bleiben muss.

Entscheidungsregeln

• Die „Root immer“-Regel: Das erste Element in der Spur sollte immer das funktionale Root sein (normalerweise „Startseite“).
• Status der aktuellen Seite: Das letzte Element im Breadcrumb (die aktuelle Seite) darf KEIN Link sein. Dies verhindert, dass Nutzer auf einen Link zur Seite klicken, auf der sie sich bereits befinden.
• Logisch vs. Verlauf: Breadcrumbs müssen die Seitenstruktur widerspiegeln, NICHT den Browserverlauf des Nutzers.
• Sichtbarkeit der Trennzeichen: Trennzeichen sollten eine geringere visuelle Gewichtung haben (z.B. gedämpfte Farbe) als die Links, um nicht um Aufmerksamkeit zu konkurrieren.

Einschränkungen

• Barrierefreiheit: Muss in ein <nav>-Element mit aria-label="Breadcrumb" eingeschlossen sein, das eine geordnete Liste (<ol>) mit Elementen enthält, damit Screenreader Position und Gesamtanzahl ansagen.
• Kontrast: Links und Trennzeichen müssen die WCAG AA (4.5:1)-Anforderungen erfüllen.
• Touch-Ziele: Breadcrumb-Links müssen das WCAG 2.2 SC 2.5.8 Minimum von 24x24px erfüllen, auch wenn der sichtbare Text kleiner sein darf.
• Länge: Breadcrumb-Bezeichnungen sollten exakt mit den Seitentiteln übereinstimmen (oder eine verkürzte Version verwenden, wenn der Titel übermäßig lang ist).

Häufige Fehlermuster

• Das „verlorene Zuhause“: Fehlen des Startseiten/Root-Links, sodass Nutzer das Hauptmenü verwenden müssen, um neu zu starten.
• Link-Overkill: Die aktuelle Seite als klickbaren Link ausführen, der dieselbe Seite neu lädt und Nutzer verwirrt.
• Visuelle Konkurrenz: Verwenden von Trennzeichen, die zu groß oder kontrastreich sind und die Spur schwer lesbar machen.
• Umbrechungsbruch: Breadcrumbs auf mobilen Geräten in 3+ Zeilen umbrechen lassen, wodurch der Hauptinhalt zu weit nach unten auf der Seite verschoben wird.
• Inkonsistente IA: Anzeigen unterschiedlicher Pfade für dieselbe Seite, je nachdem, wie der Nutzer sie erreicht hat.

Validierungskriterien

• Die Spur beginnt mit dem Startseiten/Root-Knoten.
• Die aktuelle Seite ist das letzte Element und ist NICHT anklickbar.
• Die Breadcrumbs sind in einen <nav aria-label="Breadcrumb">-Landmark eingeschlossen, der eine <ol>-Liste enthält.
• Visuelle Trennzeichen werden verwendet und haben einen geringeren Kontrast als die Links.
• Die Spur passt sich elegant an mobile Viewports an (Trunkierung oder „Zurück“-Link).
• Die Abstände zwischen den Elementen sind konsistent und folgen dem fluid spacing system.
• Tastaturnutzer können mit Tab durch die Zwischenlinks navigieren.