Das Magazin/Nutzerführung/Breadcrumbs: Orientierung jenseits des Zurück-Buttons

Nutzerführung

Breadcrumbs: Orientierung jenseits des Zurück-Buttons

Breadcrumbs erklären die Hierarchie einer Website. Unterscheide Standort, Verlauf und Rückweg auf allen Bildschirmgrößen.

Breadcrumb Wissen, Gestaltung, Typografie verortet die aktuelle Seite Typografie in ihrer Hierarchie.

Breadcrumbs zeigen, wo eine Seite innerhalb einer Website-Hierarchie liegt. Sie sind besonders hilfreich, wenn jemand direkt über eine Suche in einen tieferen Bereich gelangt. Sie bilden nicht die individuelle Klickhistorie ab und ersetzen auch keine Fortschrittsanzeige in einem Formular.

Der Pfad erklärt die Einordnung

Das Beispiel in der Dokumentation der GOV.UK-Breadcrumb-Komponente führt von der Startseite über einen übergeordneten Themenbereich zu einer engeren Kategorie. Die Einträge sind als Links erkennbar; kleine Trennzeichen machen die Reihenfolge sichtbar. Die aktuelle Inhaltsseite muss dafür nicht als weiterer klickbarer Eintrag erscheinen.

Nicht jede Website braucht einen solchen Pfad. Sein konkreter Nutzen liegt darin, eine strukturelle Beziehung sichtbar zu machen, die beim direkten Einstieg sonst fehlen kann. Bei einer flachen Website kann die Hauptnavigation bereits ausreichend Orientierung bieten.

Erst die Struktur, dann die Navigation

Wenn du keinen verständlichen übergeordneten Bereich benennen kannst, liegt das Problem möglicherweise in der Informationsarchitektur. Ein Breadcrumb aus internen Abteilungsnamen hilft Besuchern wenig. Verwende Begriffe, mit denen sie die Inhalte tatsächlich unterscheiden können.

Für eine kleine Website mit Startseite, Angebot und Kontakt bringt ein langer Pfad kaum zusätzliche Orientierung. Für einen Katalog aus Leistungen, Branchen und Detailseiten kann er dagegen sinnvoll sein. Achte darauf, dass ein Inhalt nicht je nach zufälligem Einstieg eine völlig andere Zugehörigkeit behauptet.

Ein Link muss ein brauchbares Ziel haben

Öffne jeden übergeordneten Bereich. Enthält er tatsächlich eine Übersicht, die beim Weiterfinden hilft? Ein Breadcrumb mit leeren Zwischenebenen erzeugt zwar den Anschein von Ordnung, liefert aber keinen nutzbaren Rückweg.

Auf schmalen Bildschirmen dürfen lange Namen nicht unkontrolliert aus dem Layout laufen. Das GOV.UK-System bietet eine kompaktere mobile Variante. Prüfe bei deiner Umsetzung, welche Informationen dabei fehlen und ob der verbliebene Rückweg eindeutig bleibt. Verkürze nicht so stark, dass mehrere Ebenen gleich heißen.

Sichtbare Struktur und Suchmaschinen

Google beschreibt Breadcrumb-Markup als Möglichkeit, die hierarchische Einordnung strukturiert anzugeben. Markup muss zu deiner Seite passen. Es garantiert keine bestimmte Darstellung in Suchergebnissen und repariert keinen unverständlichen sichtbaren Pfad.

Der Pfad beschreibt die Struktur

Ein Breadcrumb beantwortet die Frage, wo die aktuelle Seite innerhalb der Website eingeordnet ist. Er beschreibt nicht zwingend, welche Seiten eine Person zuvor besucht hat. Wer über eine Suchmaschine direkt in einen tiefen Artikel gelangt, hat trotzdem denselben strukturellen Ort. Diese Unterscheidung verhindert, dass ein vermeintlicher Navigationspfad bei jedem Einstieg anders aussieht.

Ein Rücklink erfüllt eine andere Aufgabe. Er kann zu einem vorherigen Ergebnis oder einem Bearbeitungsschritt führen. Wenn deine Seite beides braucht, benenne die Ziele so, dass der Unterschied verständlich bleibt. Ein übergeordneter Themenbereich enthält möglicherweise andere Inhalte als die vorher gefilterte Ergebnisliste.

Die Hierarchie muss tatsächlich existieren

Erfinde keine zusätzliche Ebene, nur damit der Pfad umfangreicher wirkt. Jeder verlinkte Eintrag sollte zu einer sinnvollen erreichbaren Seite führen. Wenn ein Artikel mehreren Kategorien zugeordnet ist, brauchst du eine nachvollziehbare Regel für seine primäre Einordnung. Ein wechselnder Pfad ohne sichtbare Begründung kann die Orientierung erschweren.

Prüfe die Namen der Ebenen aus Sicht der Besucher. Interne Abteilungsnamen sind nicht automatisch geeignete Navigationsbegriffe. Ein Pfad wie Wissen, Gestaltung, Typografie macht eine andere Beziehung sichtbar als eine Liste technischer Verzeichnisnamen. Die URL-Struktur kann diese Ordnung unterstützen, ersetzt aber keine verständlichen Beschriftungen.

Kleine Bildschirme brauchen weiterhin Kontext

Ein langer Pfad darf umbrechen, solange seine Reihenfolge erkennbar bleibt. Wenn du Ebenen verkürzt oder ausblendest, prüfe, welche Orientierung dadurch verloren geht. Ein allein sichtbarer Pfeil nach links erklärt nicht zuverlässig, ob er zurück im Verlauf oder zu einem übergeordneten Bereich führt. Die wesentliche Zielbezeichnung sollte deshalb lesbar bleiben.

Teste mit einem direkten Einstieg auf eine tiefe Seite. Bitte die Person, einen verwandten Inhalt und den übergeordneten Bereich zu finden. Wenn der Breadcrumb dabei keine verständliche Beziehung vermittelt, liegt das Problem möglicherweise in der Informationsarchitektur. Zusätzliche Trennzeichen oder eine größere Schrift können eine unklare Hierarchie nicht reparieren.

Prüfe deshalb zuerst die HTML-Links und ihre Ziele. Ergänze erst dann die strukturierten Daten. Wenn dein Problem die Orientierung innerhalb einer Ergebnisliste ist, lies über Pagination und Wiederfinden. Für Schritte eines abgeschlossenen Vorgangs eignet sich der Beitrag zu Fortschritt in Formularen.

NEUE PERSPEKTIVEN ENTDECKEN

Keine Artikel gefunden. Versuche einen anderen Begriff.

Esc zum Schließen · Strg / ⌘ K zum Suchen