Der Ausdruck „Breadcrumbs“ stößt bei der ersten Erwähnung in der Regel auf Verwunderung. Was haben Brotkrümel auf einer Website zu suchen? Tatsächlich hat der Begriff seinen Ursprung im Märchen “Hänsel und Gretel” und meint die Brotkrumen, die diese auf Ihrem Weg in den Wald ausgestreut haben, um später den Weg nach Hause wieder zu finden. Auch auf Webseiten haben Breadcrumbs die Aufgabe, einen Weg zu kennzeichnen und dienen vor allem beim Einstieg auf einer Unterseite der Orientierung des Besuchers.

Breadcrumbs sind also im direkten Sinne „Navigationselemente“, die dem Besucher meist neben der klassischen primären Navigation über Menüs oder Suchfelder, als zusätzliche Orientierungshilfe zeigen sollen, wo er sich auf einer Webseite gerade befindet. Die Breadcrumb-Navigation ermöglicht zudem eine Orientierung auch in weit verzweigten Strukturen und stellt sicher, dass der User auch jederzeit wieder zum Ausgangspunkt zurückfindet, selbst wenn er seine Position nicht direkt an Kennzeichnungen im Menü erkennen kann.

Welche Arten von Breadcrumbs gibt es?

In der Praxis finden sich Breadcrumbs häufig über dem Inhalt und mit der Bemerkung: „Sie sind hier:“ eingeleitet. Über Links zu allen durchschrittenen Kategorien erhält der User jederzeit die Möglichkeit auf „seinem Pfad“ an beliebige zuvor besuchte Stellen zurück zu kehren. Sie beantworten somit die ungestellte Frage nach dem: „Wo bin ich?“. Die typische Form der Brotkrümel wird daher „Location Breadcrumb“ gennannt. Sie geht davon aus, dass man genau auf einem Weg zu einer speziellen Seite kommt, so dass jede angezeigte Seite einen definierten Pfad von der Startseite über ein Segment der Hauptnavigation und ggf. weitere Schritte bis zur aktiven Seite anzeigen kann. Sie zeigen somit den aktuellen Standpunkt, an dem sich der User gerade befindet und bieten ihm einen besseren Überblick über die Struktur und Tiefge der Seite.

Alternative Formen sind ebenso im Gebrauch, wennauch eher unüblich. So kann z. B. die Frage nach dem „Wo komme ich her?“ bei der Generierung von Breadcrumbs im Vordergrund stehen. Diese Variante zeigt dem User also seine tatsächlich erfolgten letzten Klicks an, die ihn an die Stelle geführt haben, an der er sich gerade befindet. Wird also z. B. eine Abkürzung von der Startseite zu einer tiefer liegenden Unterseite verwendet, fehlen hier ggf. die Schritte, die „auf normalem Weg“ einer Location Bradcrumb – Anzeige dazwischen stehen würden. Eher unüblich sind hingegen so genannte „Attribute Breadcrumbs„. Diese zeigen z. B. unterschiedliche Stichworte, mit der ein Besucher über die Suche oder andere Navigationselemente wie „TagClouds“ zu dieser Seite gelangen könnte. Besonders bei Sites, die vorwiegend Suchergebnisse bieten und diese auch nach vorgefertigten und ggf. auch kombinierbaren Filtern anzeigen können („Autos unter 500,– Euro, 50 km Umkreis“), nutzen diese Form der Standortsanzeige. Aber auch in dieser Tippsammlung werden, wenn überhaupt – eher attributbezogene Hinweise (hinsichtlich der Kapitel) angebracht (mehr dazu am Ende des Beitrags).

Wo und wie sollten Breadcrumbs umgesetzt werden?

Eine Breadcrumb-Navigation sollte im Idealfall über dem Hauptinhalt der Webseite oder (abhängig vom Design) sogar über dem Kopf platziert sein. Da man Breadcrumbs zwar finden soll, diese aber den Inhalt nicht dominieren dürfen, ist hier ausnahmsweise auch eine kleine Schriftart erlaubt – zumindest kleiner als die Schrift im Hauptinhaltsbereich. Die Worte: „Sie befinden sich hier:“ sind ein guter Begleiter, wenn Sie sicherstellen wollen, dass auch unerfahrenere Besucher erkennen, worum es sich bei diesem Block handelt. Ansonsten kann es auch ausreichen, die Pfadanzeige mit „Startseite“ oder „Home“ zu beginnen – je nachdem, wie Sie die Homepage Ihrer Domain in der Navigation benannt haben. Idealerweise enthalten also auch die tieferen Ebenen die gleichen Bezeichnungen wie in den Navigationsmenüs. Jeder dieser Texte wird als Link zur jeweiligen Seite ausgelegt, damit die Pfadanzeige auch tatsächlich zur Navigation genutzt werden kann.

Die einzelnen Ebenen müssen voneinander also sinnvoll getrennt sein. Dazu hat sich ein „»“ („»“ im Quellcode) als beste Option erweisen, da durch dieses Zeichen am ehesten klar wird, dass ein „Weg“ von einer Seite zur nächsten dargestellt wird. Am Ende des Pfads steht dann die Bezeichnung (bei tieferen Ebenen ohne direkte Navigation auch schon mal der Titel) der aktiven Seite. Dies ist die einzige Stelle des Pfads, die sie nicht als Link ausstatten sollten, da dieser nur zur schon angezeigten Seite führen würde und den Besucher nur einen unnötigen Klick kosten kann. Achten Sie darauf, dass Sie auch dann, wenn Sie aus ästhetischen Gründen auf die Unterstreichung der Links in der Breadcrumb-Anzeige verzichten sollten (diese sollte aber spätestens beim Überfahren mit der Maus erscheinen), auf eine optische Unterscheidung zwischen den klickbaren Elementen und dem Endpunkt der Breadcrumb-Pfadanzeige.

Solche Zusatznavigationen werden bereits seit Jahren als kleine Helfer auf Webseiten erfolgreich genutzt. Selbst ungeübte User finden sich mit Hilfe einer guten Brotkrumen-Navigation schnell zurecht. Eine Breadcrumb-Navigation ist folglich dann sinnvoll, wenn ein gewisses Maß an Orientierung notwendig ist. Sie sollten jedoch nicht als Ersatz für eine schlüssige und schlanke Webseitenstruktur verwendet werden. Auch können Sie auf Breadcrumbs verzichten, wenn Ihre Website eine flache Struktur mit einer oder zwei Ebenen besitzt, so dass Sie durch auffällige Markierung des aktiven Menüpunkts bereits ausreichende Orientierungshilfen geben. Hier in den Usability-Tipps finden Sie Breadcrumbs nur dort, wo die Haupt- und Detailnavigation nicht mehr ausreichen, um die Position ausreichend zu kennzeichnen. Da dies ausschließlich in Beiträgen der Tippsammlung der Fall ist, wird lediglich das Kapitel eines Beitrags im Kopf angegeben, wenn dieser in einer Übersicht, als Einzelseite oder in Suchergebnissen angezeigt wird. Es handelt sich also eher um „Attribute Breadcrumbs“ als um die klassische Variante.

Wer ein schönes Beispiel für gut platzierte und mit der Navigation übereinstimmende Breadcrumbnavigation sucht, wird hier also leider nicht direkt fündig. Als Ersatz soll hier die Gestaltung der Brotkrümel bei Heise online dienen:

Durch die Bezeichnung des Startpunkts und den genauen Pfad bis zum Titel der aktuellen Seite direkt unter der Hauptnavigation (rot markiert) ist sogar mit dem anderen Trennzeichen und ohne einführenden Text schnell klar, wozu dieser Block dient und wo man – zu welchem Zweck – klicken kann.