URL: http://www.javajim.de/theorietank/usability/navigationsleisten.html

Navigationsleisten - eine Typologie

Je komplexer eine Website, um so wichtiger ist es, den User effizient und ohne Umwege zu den gewünschten Inhalten zu führen. Die Navigationsleiste hat sich (neben Suchfunktion, Pulldown-Menü und Sitemap) für diese Aufgabe als wichtigstes Werkzeug etabliert.

Das Hauptwerkzeug der Navigation gibt es im World Wide Web in unzähligen Variationen. Die folgende Typologie liefert einen Überblick über die Idealtypen und ihre Leistungen. Die Klassifikation orientiert sich nicht an der technischen oder grafischen Umsetzung (Karteireiter-, Flash-Navigation usw.), sondern an der Leistung und Funktionalität der Navigationsleiste.

1) breadcrumb-Navigation

Wie die Brotkrümel bei Hänsel und Gretel markiert dieser Navigations-Typus den Weg, auf dem sich der User tiefer in die Site geklickt hat. Dieser Navigationspfad ist rein linear und erlaubt den Sprung zurück in eine höhere Rubrik. Man kann sich nur auf einem einzigen Pfad bewegen. Will man in eine andere Rubrik, muss man auf die Startseite zurück, die als Inhaltsverzeichnis dient.
Vorteile:
- platzsparend, da immer nur die momentan aktuelle Rubrik angezeigt wird und alternative Rubriken verschwinden
- leicht verständlich, insbesondere für Newbies
- sehr gute Orientierungsleistung: Navigation zeigt, wo man ist und wo man her kommt
- besonders tiefverschachtelte Sites bleiben übersichtlich, weil die Hierarchie einer Rubrik klar visualisiert ist
Nachteile:
- keine schnellen Wege: man muss immer auf Home zurück, um in eine andere Rubrik zu gelangen
- wenig transparent, denn das Gesamtangebot geht auf tieferliegenden Seiten verloren
- Navigation leistet keine Promotion der Inhalte: dem User fehlt auf tieferliegenden Ebenen die Information: "Was gibt es sonst noch?"

Beispiel-Sites:
http://www.useit.com
http://www.yahoo.de
http://www.builder.com

2) "Alles-in-einer-Leiste"-Navigation

Eine Leiste, alles drin! Ist vertikal oder horizontal angeordnet und enthält alle vorhandenen Rubriken. Findet sich auf Sites, die nicht stark hierarchisiert sind, es sind keine weiteren Navigations-Ebenen vorhanden.
Vorteile:
- bei wenig Content sehr übersichtlich, da man das Spektrum des Angebots auf einen Blick erfassen kann
- jede Rubrik ist von überall aus erreichbar
Nachteile:
- bei mehr als sieben Navigationspunkten leidet die Übersichtlichkeit und die Selektion fällt schwer
- bei zu vielen Punkten muss man scrollen, um die Navigation vollständig zu erfassen

Beispiel-Sites:
http://www.kress.de
http://www.aldi-cocktails.de

3) Überkreuz-Navigation

"Alles-in-einer-Leiste" advanced. Steigt die Masse an Inhalten, muss auch die Navigation mehr leisten. Teilbereiche sollten zu klar gelabelten Rubriken zusamengefasst werden. Diese Haupt-Rubriken (globale Navigation) befinden sich bei der Überkreuz-Navigation horizontal im Kopf der Seite. Die Unterrubriken (bereichsspezifische Navigation) erscheinen vertikal links oder rechts. Diese verändern sich entsprechend der angeklickten Haupt-Rubrik.
Vorteile:
- Hierarchisierung wird durch optische Trennung (horizontal-vertikal) klar visualisiert
- ökonomisch und platzsparend: im Vergleich zur vertikalen Hierarchie-Lösung (siehe Punkt 4) schafft die Überkreuz-Variante seitlich mehr Raum für Unterrubriken
Nachteile:
- bei schlechter grafischer Umsetzung besteht die Gefahr, dass die beiden Navigationsleisten nicht als zusammengehörig wahrgenommen werden

Beispiel-Sites:
http://www.zdf.de
http://www.chip.de

4) vertikale Hierarchie-Lösung

Variante der Überkreuz-Navigation, auch hier wird die Hierarchie der Site mittels Navigation visualisiert. Die Navigation ist komplett vertikal konzipiert. Die Startseite enthält nur die Hauptrubriken; wenn man sich in eine Rubrik hineinklickt, werden die jeweiligen Unterrubriken direkt unter der Rubrik aufgelistet.
Vorteile:
- Rubriken und Unterrubriken stehen nah beieinander und sind daher sofort als zusammengehörig wahrnehmbar (Problem bei Überkreuz-Navigation)
- die Site-Architektur wird schnell ersichtlich
- der Standort kann in der Navigationsleiste optisch markiert werden (Vorteil gegenüber der DHTML-Variante (siehe Punkt 7))
Nachteile:
- in Vergleich zur DHTML-basierten Lösung (siehe Punkt 7) ein Klick langsamer, da man sich erst in eine Rubrik hineinklicken muss, um einen Überblick über die Unterrubriken zu erhalten
- bei vielen Unterrubriken wird gegebenfalls so viel Platz benötigt, dass der User nach unten scrollen muss

Beispiel-Sites:
http://www.welt.de
http://www.politik-digital.de/netzpolitik/
http://www.rtl.de

5) Rätsel-Mouse-Over

Icons, Flächen, Symbole oder Gegenstände, die sensitiv sind, geben ihre Linkbezeichnung/ -funktion erst beim Darüberfahren mit Hilfe eines Mouse-Overs bekannt. Die Navigation muss vom User gesucht und ergründet werden.
Vorteile:
- Ästhetik durch Reduktion
- Erlebbarmachen der Site
- unterstützt den spielerischen User
Nachteile:
- der Informationssucher wird in keinster Weise unterstützt
- die Navigation erinnert an Schilder ohne Beschriftung: es gibt keinerlei Wegweiser, die anzeigen, wo man hin kann
- zeitintensiv: der User muss die Site mit der Maus abtasten, bis er den richtigen Weg gefunden hat
- fehlende Transparenz: die Navigation präsentiert keine Inhalte, da diese ohne aktives Eingreifen des Users nicht sichtbar ist
- bei schlechter Programmierung ist der Mouse-Over stark verzögert, so dass der User zunächst keinerlei Navigations-Infos erhält

Beispiel-Sites:
http://www.feedmag.com/essay/es382_master.html
http://www.michaeldouglas.com/flash/html/michael_douglas.html

6) Info-Mouse-Over

Der Mouse-Over wird ergänzend und unterstützend eingesetzt. Während man sich bei einem Rätsel-Mouse-Over allein auf den Mouse-Over verlassen muss, ist bei diesem Typus der Mouse-Over-Effekt ein Zusatzangebot an den User. Die vorhandene Linkkennzeichnung ist bereits aus sich heraus verständlich und plausibel.
Vorteile:
- User ist breiter und umfassender über die Rubrik informiert; der Mouse-Over hat damit die Funktion eines erweiterten Alttags
- fördert die Transparenz der Site
- der Informationssucher findet durch die Eindeutigkeit schneller zum Ziel; die Gefahr, dass man sich in die falsche Rubrik klickt, ist minimiert
Nachteile:
- Gefahr der Redundanz
- verleitet zu unklaren Rubrikenbezeichnungen (klare, konventionalisierte Labels sollten nicht durch kryptische, "kreative" Labels plus Info-Mouse-Over ersetzt werden)

Beispiel-Sites:
http://www.disinformation.com
http://medien.uni-trier.de

7) DHTML-Flyout

Die Flyout-Navigation ist an die Funktionsweise von Windows-Menüs angelehnt. Beim Darüberfahren mit der Maus klappen die Unterrubriken automatisch aus und sind direkt anklickbar.
Vorteile:
- intuitiv benutzbar: es ist kein Lernprozess nötig, da die Funktionsweise von den meisten Anwendungsprogrammen bekannt ist
- sehr schnell und effizient, da mindestens eine Klick-Ebene (Hineinklicken in Unterrubrik) eingespart wird
Nachteile:
- die Navigationsleiste kann nicht als Orientierungsinstrument benutzt werden: Da die Navigation wieder einklappt, kann sie nicht anzeigen, wo man sich gerade befindet (So wird der Vorteil, sich direkt tiefer in die Site hineinzuspringen, zum Nachteil)

Beispiel-Sites:
http://www.prosieben.de
http://www.slate.com

8) Ordner-Prinzip

Funktioniert wie die Ordner-Organisation unter dem Windows-Explorer: Die Hauptrubriken sind auf- und wieder zuklickbar. Sobald eine Rubrik aufgeklickt wird, werden die Unterrubriken sofort darunter sichtbar, ohne dass eine neue Seite geladen werden muss.
Vorteile:
- der User erhält schnell einen Überblick über die komplette Site; die Leistung nähert sich damit der einer Sitemap an
- auch bei sehr vielen Unterrubriken bleibt die Navigation übersichtlich
- im Gegensatz zum DHTML-Flyout bleibt die Navigation ausgeklappt und kann als Standortmarkierung dienen
Nachteile:
- obwohl die Handhabung durch den Umgang mit Software-Interfaces vertraut ist, ist dieses Element im Netz als Navigationswerkzeug noch ungewohnt
- für einige User zu komplex, da der Klick auf das Symbol vor dem Link (meist Plus oder Pfeil) und der Klick auf den Link unterschiedliche Aktionen auslösen
- wird vor allem zum Problem, wenn grafisch zu stark von den vertrauten Windows-/ Macsymbolen abgewichen wird

Beispiel-Sites:
http://www.heise.de/tp/
http://www.webmonkey.com

Fazit

Keiner dieser Typen ist das Vorzeigemodell. In der Praxis finden sich oft Mischtypen: Websites kombinieren verschiedene Navigationsmodelle, um verschiedene Nutzertypen anzusprechen oder Nachteile eines Modells auszugleichen. Es gibt vor allem keine Musterlösung, die für alle Websites brauchbar ist. Merkregel: Die Navigation sollte immer funktional sein, also den User und die Ordnungsstruktur einer Site unterstützen. Generell gilt daher: Der Inhalt und der User sollten im Vordergrund stehen, nicht die neueste Technik oder die trendigste Design-Lösung. (Heike Edinger, Timo Wirth)