endeRH-Webdesign | Shopware Freelancer

Was ist Breadcrumb?

Als Breadcrumb wird eine bestimmte Art der Navigation auf einer Webseite bezeichnet, bei der dem User die Orientierung zurück zur Einstiegsseite oder zu anderen Ordnen bzw. Ebenen der Seite erleichtert wird. Das Springen in bereits zuvor besuchte Hieracharchieebenen ist damit für den User problemlos möglich.

  • Ist eine sekundäre Navigation
  • Der Weg des Users wird nachvollziehbar
  • Wird meist optisch unauffällig platziert
  • Birgt große Vorteile für die Usability

Funktionsweise der Breadcrumb Navigation

Zu Deutsch bedeutet der Name dieses Navigationsmusters Brotkrümel, und ähnlich wie beim Grimmschen Märchen „Hänsel und Gretel“ kann über diese der Weg vom User zurückgefunden oder auch hin- und hergesprungen werden. Der Benutzer sieht schnell am seitenhierarchischen Aufbau, welche Unterseiten er bereits besucht hat. Deshalb ist sie auch von so großer Bedeutung für die Usability. Man könnte diese Art der Navigation aus den gleichen Gründen auch „Ariadnepfad“ nennen. Die Breadcrumb Navigation zeigt den logischen Pfad und ist ohne großen Aufwand (low hanging fruit) in die Webseite integrierbar. Oft wird sie als Design Element vom Webmaster im oberen Bereich der Seite angebracht, und dies meist auf eher subtile Weise. Die Trennzeichen können zum Beispiel durch Pfeile oder ähnliche typografische Zeichen dargestellt werden. Über einen simplen Klick gelangt der User dann entweder zur Hauptseite oder anderen Ebenen. Der zuletzt angezeigte Punkt in der Navigation ist jedoch sinnvollerweise nicht anklickbar. Die Breadcrumbs werden in der Regel above the fold auf einer Seite platziert. Weil die Hauptnavigation möglichst nicht in den Hintergrund rücken soll, hält sich die Breadcrumb Navigation in puncto Schriftgröße und Farbe jedoch stets dezent zurück. Die Konsistenz ist ebenso wichtig, wird eine Breadcrumb Navigation eingesetzt, dann sollte dies auch auf sämtlichen Unterseiten geschehen. Der Einsatz von Breadcrumb erfolgt vor allem bei recht großen Seiten, zum Beispiel bei Online Shops. Auf derartigen komplexen Portalen herrscht eine komplizierte hierarchische Struktur vor, deshalb ist diese (zusätzliche) Art der Navigationsmöglichkeit hier sehr häufig anzutreffen. Dem User wird geholfen, sich im großen Wirrwarr von Kategorien und Produkten zurecht zu finden.

Die Vorteile der Breadcrumb Navigation

Solange die Webseite eine logische Hierarchie aufweist, kann man nur zum Einsatz der Brotkrumen raten, da die innewohnende Logik einen großen Vorteil für die User darstellt. Breadcrumb Navigationen haben wie bereits erwähnt vor allem große Vorteile für die Usability von Seiten. Durch diese wird es dem Besucher erlaubt, in der Seitenhierarchie mit nur einem einfachen Klick ganz nach oben zu navigieren. Die Breadcrumbs zeigen den Usern auch ihre aktuelle Position in Bezug auf die anderen Hierarchieebenen der Seite an. Damit sind sie also eine echte Hilfestellung für die Anwendung und Navigation. Wenn ein Besucher über eine Suchmaschine mitten in der Informationsarchitektur landet, dann helfen Breadcrumbs schnell und effektiv. Die Breadcrumb Navigationshilfe nimmt zudem nur wenig Raum auf der Webseite ein und ist in der Regel auch sehr leicht zu implementieren. Fast immer erkennen die Nutzer die Funktionsweise schnell und ohne Probleme, wie umfangreiche Tests ergaben. Für die Suchmaschinenoptimierung ist es wichtig, die Breadcrumb Navigation korrekt zu implementieren. Eine gute Vorgehensweise ist es, zuerst eine Sitemap zu erzeugen. Dann wird geprüft, ob die Breadcrumb Navigation dem Besucher helfen würde. Wenn die Seitenstruktur aus vielen Ebenen besteht, ist dies auch über die Sitemap ersichtlich. Dann kann die Breadcrumb Navigation ebenso aufgebaut werden, da diese auch die Seitenarchitektur widerspiegelt. Die Brotkrümel Navigation – für gewöhnlich am Seitenanfang horizontal angebracht – soll jedoch immer nur eine sekundäre Hilfe bleiben, die weder Menüs noch andere Hauptnavigationen ersetzt. Darum ist es auch so wichtig, dass primäre und sekundäre Navigationen in Bezug auf Design und Layout voneinander getrennt bleiben. Die Breadcrumbs können auf verschiedene Weisen eingebunden werden (Plug-in, PHP und JavaScript, Content Management System, HTML).

Online-Shop geplant?
Hochperformante und optisch ansprechende Online-Shops sind mein Daily Business als Shopware Freelancer.
Mehr erfahren

SEO Ratgeber
- Taschenbuch für Shopbetreiber -
Mehr dazu