Was ist eigentlich…: Brotkrümelnavigation?

/

Was sich ungewohnt anhört, soll dem Website-User Orientierung geben. Dieser Blog zeigt, wie einfach das funktioniert, woher der Name kommt und verweist auf weitere Navigationen. 

Brotkrümelnavigation, englisch breadcrumbs navigation, lehnt sich an das Märchen von Hänsel und Gretel an, die sich mit der Hilfe von Brotkrümeln nicht verirrten. So soll die Navigation Überblick geben über die Rubriken einer Website. Und zwar Krümel für Krümel: der gesamte Pfad zur aktuellen Seite wird angezeigt. So ist stets klar, in welcher Rubrik man sich gerade befindet und wie man dahin gelangt ist. Zudem kann man jederzeit wieder zu übergeordneten Themen zurückzukehren.

Der originellen Namen nicht genug, wird die Brotkrümelnavigation wird auch Ariadnepfad genannt. Die Herkunft dieses Namens findet sich in der griechischen Mythologie. Ariadne hilft Theseus bei seiner Aufgabe in einem Labyrinth Minotaurus zu erlegen und zurückzufinden, mit einem Trick: ein Wollknäuel, ausgerollt beim Hinweg, zeigt ihm mit dem Faden den Weg zurück. Was auch immer ihr Minotaurus auf einer Website ist – wenn Sie sich an die Brotkümelnavigation halten, verlieren Sie nie die Orientierung.

Brotkrümel-Kombination
Die Brotkrümelnavigation kann als Ergänzung zu anderen Navigationen dienen. Beispielsweise zu einem Mega-Drop-Down-Navigationsmenü: bei einer meist horizontalen Navigation mit wenigen Rubriken wird mit Mouse-over, unten bei «Produkte», ein grossflächiges Menü ausgeklappt. Der Platz erlaubt eine gut strukturierte Auflistung der Website-Inhalte, hier das Mega-Drop-Down-Menü auf sony.ch. Nach der Rubrikwahl zeigt die Brotkrümelnavigation auf der Inhaltsseite, wo man sich befindet.

Eine Navigation, die ohne Brotkrümelnavigation auskommt ist beispielsweise Sliding Tabs: mittels horizontal und / oder vertikal animierten Registerkarten wird navigiert. Geeignet bei vielen Rubriken und einem schlichten Design und insbesondere für Tablet und Smartphone mittels Scrollen angenehm zu bedienen.

Beispiel Sliding Tabs

Weiterführende Links:
Weitere Beispiele für Navigationen im 1st Webdesigner-Blog
Weitere Beiträge aus der Reihe Was ist eigentlich…

  • Kategorien
  • Tags

Kommentieren

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

* Pflichtfelder