Navigationssysteme im World Wide Web

Inhalt

Einleitung

Spätestens seit der Verbreitung des World Wide Web wird der Begriff "Navigation" nicht mehr nur vorwiegend in nautischen Bereich verwendet. Im übertragenen Sprachgebrauch bezeichnet er Konzepte und — in der konreten Ausformung — Werkzeuge, die dabei helfen, Informationen im virtuellen Raum strukturiert zugänglich zu machen.

Dieser Aufsatz gibt einen Überblick über die Konzepte und konkreten Erscheinungsformen solcher Navigationssysteme, wie man sie im World Wide Web vorfindet. Zudem werden praktische Hinweise und Beispiele gegeben, die dem Einsteiger bei der Gestaltung von Navigationssystemen helfen können.

Diese Zusammenfassung herhebt keinen Anspruch auf Orginalität oder Neuheit; vielmehr geht es um eine gebündelte Darstellung von mehr oder weniger verstreuten Erkenntnisse, wie man sie an verschiedenen Stellen in World Wide Web und der Fachliteratur findet.

Unter Navigationssystemen werden an dieser Stelle einzelne Menüs oder auch Kombinationen von Menüleisten, Linklisten und anderen Hilfmitteln verstanden, die im folgenden näher erläutert werden. Es geht also um Bereiche innerhalb von Hypertextdokumenten bzw. ganzen Websites, die selbst keine inhaltliche Relevanz haben, sondern vielmehr dazu dienen, Inhalte zugänglich zu machen.

Natürlich helfen auch einzelne, in den Fliesstext integrierte Links (sog. inline links) der Navigation zwischen verschiedenen Seiten. Solche Verknüpfungen, die nicht im Kontext einer Navigationsleiste auftauchen, verbinden Inhalte eher assoziativ – ähnlich einem Verweis im Lexikon (in der Art eines 'siehe-hierzu-auch...').

Where Should You Put the Links?
Das Software Usability Research Laboratory (SURL) der Universität Wichita geht in einer Untersuchung der Frage nach, wie die Platzierung von textbegleitenden Links (keine Hauptnavigation), die Usability einer Site unterstützt.
Die Wissenschaftler raten zu einer redundanten Lösung: Zum Text korrespondierende Links sollten neben und innerhalb des Textes angeboten werden.

Was muß ein Navigationsystem leisten?

Eine gutes Navigationssystem sollte dem Benutzer dabei helfen:

• einen Überblick über die Inhalte, den Umfang und die Strukturierung der Website zu erhalten,
• die ausgewählten Inhalte möglichst ohne Umweg anzusteuern und
• möglichst zu jeder Zeit darüber Aufschluß zu geben, wo man sich befindet und welche anderen Inhalte vom aktuellen Standpunkt aus erreicht werden können.

Somit stehen die folgenden miteinander verwobene Aspekte im Vordergrund:

• Überblick
• Effektivität und Effizienz
• Orientierung

Überblick: Menüs Navigationsleisten und die Organisation der Inhalte

Jede hierarchisch gegliederte Website-Naviation unterteilt die Inhalte, die zugänglich gemacht werden sollen, in Rubriken (Rubriken).

Je nach Bedarf d.h. Umfang der Inhalte stellen diese Rubriken die erste Ebene einer hierarchischen Gliederung mit weiteren Unterrubriken dar.

Je mehr eine Navigation über eine solche Hierarchie verrät, je mehr Rubriken und Unterrubriken also angezeigt werden können, ohne daß schon einzelne Seiten angesteuert werden müssen, desto größer ist der Überblick, den man über die Inhalte und ihre Organisation gewinnen kann ( Pop-Up-Menu).

Im Extremfall fällt die Navigation mit einem hierarchisch gegliederten Inhaltsverzeichnis zusammen: der Faktor Überblick tritt dann aufgrund der Länge der Liste eventuell in den Hintergrund.

Für Benutzer die jedoch genau wissen, wo sie hinwollen, bietet ein solcher Zugriff den Vorteil, ohne große Umstände über verschiedenen Ebenen hinweg zu navigieren und tiefer verschachtelte Inhalte direkt anzusteuern ( aufklappbare Menüliste).

Weil man aber nie genau weiß, wie versiert die Benutzer einer Site wirklich sind, ist es sinnvoll, die Inhalte sukzessive, also in wohlbemessenen Dosen zugänglich zu machen und gleichzeitig verkürzte Navigationswege (shortcuts) anzubieten.

Globale und bereichsspezifische Navigation

Folgende Konstruktion ist häufig zu finden:

• Sinnvollerweise werden die Hauptrubriken dem Benutzer auf allen Seiten als sog. globale Navigation übersichtlich zur Verfügung gestellt.
• Wird einer der Hauptmenüpunkte angewählt, so erscheint eine bereichsspezifische Erweiterung der Navigation innerhalb der aktuellen Rubrik ( globale und bereichsspezifische Navigation).

Entscheidend für den Benutzer ist hier die 'Nutella-Regel': Was draufsteht soll auch drinstecken. Ein gute Rubrizierung der Inhalte ist nicht immer einfach, jedoch unumgänglich, will die Auffindbarkeit der Inhalte nicht zu einem Suchspiel machen.

Bei der Konzeption v.a. größerer Projekte hilft das Karteikartenspiel:
Schreiben Sie alle geplanten Bezeichnungen der Rubriken und Unterrubriken auf einzelne Karteikarten und lassen Sie diese von Testpersonen sortieren und in Gruppen zusammenzufassen. So wird schnell deutlich, ob Ihre Bezeichnungen präzise sind und die von Ihnen erdachte Hierarchisierung der Inhalte auch von anderen geteilt wird.

Wahrnehmungspsychologischen Untersuchungen zufolge sollte die Anzahl von Rubriken innerhalb einer Navigationsleiste maximal 7 Label umfassen; es wird angenommen, dass der Benutzer in diesem Fall dazu fähig ist, eine solche Liste als mentale Repräsentation der Hauptgliederung der Site präsent zu haben, auch wenn er die Navigationsleiste nicht unmittelbar vor Augen hat.

Die Utilities

Oftmals werden die inhaltlichen Hauptrubriken einer Site als Menü auf allen Seiten verfügbar gemacht und durch eine weitere Menüleiste mit Links wie z.B. 'Kontakt' und 'Shopping-Cart' oder auch 'Sitemap' und 'Suche' ergänzt. Im Englischen werden solche Bereiche als Utilities bezeichnet, weil es sich oftmals um Werkzeuge handelt, die für die Grundfunktionen der Site wichtig sind ( Utilities).

Man trennt also zwischen

• Links, die die Inhalte der Site in hierarchischer Weise zugänglich machen (thematische Rubriken) und
• Navigationselementen, die für das Funktionieren der Site wichtig sind (Suche, Warenkorb etc.).

Diese sogenannte 7-plus/minus-2-Regel (will sagen 5 - 9 Label innerhalb einer Rubrik) ist nicht mehr ganz neu und es ist fraglich, ob man sie als allgemeingültige Fausregel anwenden sollte.

James Kalbach (Razor Fish, ID-Media) betont, dass ein geeigneter Ausgleich zwischen der Breite einer Site (Anzahl der Links auf einer hierarchischen Ebene) und der Tiefe (Anzahl der Ebenen) entscheidender ist. Eine zu tiefe Verschachtelung bedeutet lange Klickpfade, eine flache Hierarchie mit vielen Optionen können verwirren. Michael L. Bernard (SURL) schlägt als Lösung den 'Concave menu tree' vor.

Effektivität und Effizienz: Schnell am richtigen Ziel ankommen

Mit Blick auf den Benutzer versteht man unter Effektivität die Richtigkeit und Vollständigkeit, mit der eine Aufgabe gelöst werden kann. Effizienz meint die Geschwindigkeit mit der ein Ziel erreicht werden kann. Wenn es um die Navigation auf einer Site geht, bedeutet dies vor allem, dass der Benutzer, was er sucht auch möglichst schnell findet.

Für den Webdesigner stellt dies eine hohe Anforderung dar: Websites werden von vielen verschiedenen Menschen genutzt und doch soll sich jeder gleich gut zurechtfinden.

Ohne miteinander konkurrierende bzw. sich einander ergänzende Navigationselemente ist es kaum möglich Benutzer mit voneinander abweichenden Erfahrungen und unterschiedlichen Interessen mit vergleichbarem Komfort zu bedienen.

Es gibt (mindestens) zwei verschiedene Benutzertypen

Als Ausgangspunkt können die Benutzer grob in zwei Gruppen eingeteilt werden:

• Benutzer, die gezielt nach Inhalten suchen und solche,
• die sich 'flanierend' durch eine Site klicken und sich assoziativ von einem Inhalt zum anderen begeben.

Natürlich kann eine solche idealtypische Vereinfachung nur als grobes Raster dienen, um verschiedene Navigationshilfsmittel und ihren Zweck zu bestimmen.

Der erfahrene Benutzer:

• darf sich nicht langweilen und sollte schnell bedient werden;
• er weiss wo er hin will und ist froh über jede Abkürzung (Shortcut), da er die betreffende Site vielleicht schon öfter besucht hat
• wenn er keine Abkürzung zum gewünschten Ziel auf der Startseite findet, ist er dankbar für eine klare und durchgängige Rubrizierung und eindeutige Verlinkung, die ihn mit maximal drei Klicks an den gewünschten Ort führt.

Der eher assoziativ agierende Benutzer, zunächst ohne festes Ziel

• möchte vielleicht an die Hand genommen und Schritt für Schritt an die Inhalte herangeführt werden;
• er ist dankbar für eine Übersicht, die ihm einen Gesamteindruck von den verfügbaren Inhalten z.B. in Form einer Sitemap verschafft.
• Wenn er eine grobe Vorstellung von seinem Ziel hat, kann eine alphabetische Liste (Index) und/oder eine Suchmöglichkeit (etwa Volltextsuche) eine Hilfe sein.

Wer braucht was zur Navigation?

Folgende Elemente stehen für ein redundant ausgelegtes Navigationssystem zur Verfügung

• Menüleiste
• aufklappbare Liste (Drop-Down Liste)
• Pfadnavigation
• Index
• Sitemap
• Suchfunktion

Untersucht man die Qualitäten dieser Elemente im Hinblick auf die beiden o.g. Benutzertypen, dann ergibt sich folgendes Bild:

Steve Krug bietet in seinem Buch Don't make me think eine weitere Typologie der Benutzer an:

• Benutzertyp A, der sich über die Rubriken der Navigation zu Ziel klicken und
• Benutzertyp B, der mit Hilfe einer Suchmaschine (wenn vorhanden) zum Ziel gelangen will.

Typ A, so Krug, richtet sich im Baumarkt nach der Beschilderung, wohingegen Typ B direkt einen Verkäufer fragt. Als Arbeitshypothese bei der Planung einer Site erscheint diese Unterscheidung sehr treffend und hilfreich zu sein.

Allerdings: Was ist, wenn der Verkäufer (oder die Suchmaschine) eine unbrauchbare Auskunft gibt? Wir können vermuten: entweder der Käufer geht frustriert in einen anderen Laden oder er sucht auf eigene Faust und wird allmählich zum Experten in der Benutzung von schlecht strukturierten Baumärkten (oder Websites).

Menüleiste

Die Menüleiste bietet im Normalfall einen Blick auf die oberste Hierarchieebene eine Site ( vertikale und horizontale Leiste). Sie dient einer ersten Übersicht und eröffnet die Inhalte sukzessive nach dem Zoomprinzip: vom Allgemeinen zum Besonderen. Die Rubriken müssen sorgfältig gewählt werden, denn letztlich sollen alle Inhalte in diesen Containern ihren Platz finden. Natürlich kann man mehrere Navigationsleisten auf einer Seite platzieren, doch prinzipiell gilt: je mehr Auswahl, desto größer die Gefahr der Verwirrung.

Auswahlliste

Die Auswahlliste ist ein Formularelement, d.h. im Standard von HTML zur Realisation von Formularen vorgesehen. Kombiniert man ein solches Formularelement mit einem entsprechenden Programm (genauer: einem Skript), gelangt der Benutzer nach der Auswahl einer Option auf die gewünschte Folgeseite ( Auswahlliste).

Die Auswahlliste hat folgende Vorteile:

• Kompatibilität auf niedrigstem Niveau (HTML 2.0 Standard)
• platzsparend
• schnell ladend, da natives HTML-Element

Die Auswahlliste kann nur in eingeschränktem Maße durch Formatierungen in der Größe kontrolliert und gegliedert werden und kann deshalb auch nur bedingt über die inhaltliche Struktur einer Site Auskunft geben. Zudem ist die Kehrseite des geringen Platzverbrauchs die Tatsache, dass nicht alle Optionen gleichzeitig sichtbar sind.

Sie bietet sich eher als zusätzliches Navigationsinstrument für erfahrene Besucher an, die gezielt nach strukturuerten, z. B. alphabetisch sortierten Inhalten suchen.

Weniger gut ist die Auswahlliste dazu geeignet etwa ganze Menüs auf diese Weise darzustellen, obwohl man auch dies zuweilen findet, siehe http://www.buschfeld.de/_navi/navi_wall.htm.

Pfadnavigation (bread crumb navigation)

Die Pfadnavigation ist ein hervorragendes Mittel um insbesondere unerfahrenen Benutzern die Orientierung zu erleichern ( bread crumbs: Hänsel und Gretel lassen grüßen). Sie ist eine Art Bestandsaufnahme des zurückgelegten Weges, da die Rubriken, die man in hierarchischer Reihenfolge durchläuft — meist im oberen Bereich der Seite — so angezeigt werden, dass man jederzeit zur übergeordneten Ebenen (zurück-) navigieren kann.

Site Index

Ein Index ist ein alphabetisches Verzeichnis der Inhalte einer Site ( Site Index). Der Vorteil einer solchen Darstellung ist die Tatsache, dass viele Benutzer solche Ordnungsschemata schon aus Büchern kennen und deshalb mit ihnen umzugehen wissen. Allerdings macht eine solche Sortierung meist nur in den Fällen Sinn, wo der alphabetische Zugriff die Suche innerhalb einer Rubrik oder eines Bereiches beschleunigen kann, etwa ein Namens- oder Städteverzeichnis oder auch ein Glossar.

Vielfach wird der "Index" auch gleichbedeutend mit "Site Map" verwendet, siehe z. B. www.fedex.com/de/search/.

Site Map

Die Site Map ist eine Repräsentation der Struktur und Inhalte einer Site, die meist nach thematischen Kriterien gegliedert wird ( Site Map).

Je größer die Site desto weniger Details kann eine solche 'Karte' enthalten, will man nicht Gefahr laufen, dem Benutzer statt einer sinnvoll gegliederten Übersicht eine verwirrende Auswahl zu bieten. Eine Site Map kann also – in Analogie zur Landkarte – verschiedene 'Maßstäbe' haben. Vor allem bei größeren Sites sollte sie keine Übersicht aller Seiten, sondern eine symbolische Darstellung der wichtigsten Bereiche sein.

Für einige Benutzer stellt die Site Map Shortcuts zu schon bekannten Bereichen bereit, anderen dient sie v. a. dazu, eine Vorstellung von dem Umfang einer Site zur erhalten.

Pfadnavigation

In Erfolg des Einfachen (The Practice of Simplicity) schreibt Jacob Nielsen über Sitemaps: "Sitemaps werden mehr und mehr zu Klischee. Alle Benutzer sagen, dass sie Sitemaps wollen, und wir wissen aus der Hypertext-Forschung, dass Überblicksdiagramme Benutzern helfen, Infomationen schneller zu finden. [...] Aber aktuelle Sitemaps scheinen Benutzern nicht sehr zu helfen."

Die wichtigsten Hindernisse bei der Benutzung laut Nielsen ( Alertbox Januar 2002):

• Sitemaps werden erst gar nicht gefunden und
• sind zu lang und damit zu unübersichtlich.

Orientierung: Drei zentrale Fragen

Im Kern bedeutet eine gute Orientierung, dass der Benutzer die folgenden drei Fragenkomplexe zu jedem Zeitpunkt beantworten kann:

• Wo bin ich?
  • Hilft die Navigation bei der Bestimmung des aktuellen Standortes?
  • Was ist das Thema der aktuellen Seite?
• Wo komme ich her?
  • Wie komme ich zum Ausgangsort zurück?
  • Bekomme ich einen Überblick über die Struktur der Seite?
  • Kann ich den aktuellen Standort in einen größeren Kontext einordnen?
• Wohin kann ich gehen?
  • Was für Möglichkeiten habe ich, vom aktuellen Standort aus zu anderen Bereichen zu wechseln?
  • Sind diese Optionen deutlich gekennzeichnet?

Damit ein Navigationssystem dem Nutzer diese Fragen beantworten kann, sollten die folgenden Aspekte bei der Planung in Betracht gezogen werden:

• Prinzipiell gilt es, für eine klare Trennung von Navigations- und Inhaltsbereich zu sorgen und alle Links deutlich als solche zu kennzeichnen.
• Sinnvollerweise bietet die Navigationsleiste jederzeit eine Möglichkeit zur Standortbestimmung, indem die jeweilige Rubrik bzw. der entsprechende Menüpunkt als angewählt gekennzeichnet ist.
• Will man den Benutzer nicht unnötig verwirren, so sollte die Navigationsleisten an bewährter Stelle im Layout der Seite plaziert werden (am oberen oder linken Seitenrand).
• Schaffen sie Konzeptionelle Klarheit: was ist über die Navigation, was ist über 'normale' Links z.B. im Fließtext erreichbar.

Woran erkennt man eigentlich eine Navigation?

Bei der Entscheidung, welche Seitenelemente in welcher Weise der Orientierung dienen und also zur Navigation gehören, spielen für den Benutzer folgende Gesichtspunkte eine Rolle:

• die Position der Navigationselemente auf dem Bildschirm bzw. im Browserfenster
• die Gruppierung bzw. Anordnung der Elemente untereinander
• die visuelle Gestaltung
• die Beschriftung bzw. Verwendung von geeigneten oder weniger geeigneten Icons

Ein gutes Beispiel, um einige der links aufgeführten Aspekte zu illustrieren bietet die Site von Karstadt. (Vorsicht. Die Screenshots sind recht breit (780 Pixel), um einen realistischen Ausschnitt zu vermitteln.)

Platzierung der Navigation

Bei der Frage, an welcher Stelle eine Navigationsleisten am sinnvollsten in das Seitenlayout integriert wird, hat man sich mittlerweile auf einen Quasi-Standard geeinigt: In den meisten Fällen findet sich eine Navigationsleiste am Kopf und/oder am linken Rand der Seite ( Platzierung oben/links). Dieser Kanon beruht auf einigen plausiblen Argumenten:

• gemäß der in unseren Kulturkreisen verbreiteten Leserichtung wandert das Auge im Normalfall von links oben nach rechts unten
• Im Normalfall erscheint der obere Teil der Seite zuerst; eine Navigationsleiste im Seitenkopf ist so relativ früh zu sehen und kann einer ersten Orientierung dienen. Wird die Navigationsleiste in einer links angeschlagenen, separaten Tabelle untergebracht, so lädt diese gleich nach der Kopftabelle. Dies bedeutet auch, dass die Navigation für Benutzer von textbasierten Browsern oder sehbehinderten Nutzern schneller und leichter benutzt werden kann, da sie nicht erst am Ende des Quelltextes erscheint.
• Bei Layouts, die mit Tabellen erstellt werden (z. Z. noch weitgehend Standard), ist einfacher, eine Navigationleiste oben oder links im Layout vom Stand her zu kontrollieren
• Will man eine Navigationsleiste am unteren Seitenrand, so muss man im allgemeinen Frames verwenden (oder Skript-Erweiterungen) verwenden, wenn man sicherstellen möchte, dass die Navigation nach dem Laden der Seite ohne Scrollen zugänglich ist.
• Eine Navigationsleiste am rechten Rand ist — mit ein wenig Aufwand — möglich, aber wenig verbreitet und deshalb eventuell gewöhnungsbedürftig. Dafür spricht die bequeme Benutzung für Rechtshänder und der geringe Abstand zwischen Navigation und Scrollleiste.

Natürlich können Navigationselemente auch auf der Seite verteilt oder zentriert angeordnet werden. Dies wird am ehesten auf der Homepage, also der Startseite eines Angebots der Fall sein, wo die Navigation z.B. nicht in Form eines platzsparenden Menüs sondern als Gruppierung verlinkter Grafiken angeboten wird. An dieser Stelle sollten jedoch schon die Konventionen eingeführt werden, die auf den Folgeseiten benutzt werden. Hierzu zählen:

• die Farbgebung,
• die Form (Icons, Typografie etc.),
• Gruppierung und
• Begrifflichkeit der Navigation.

Eine Startseite kann bezüglich der Navigation ruhig anders sein als die Folgeseiten — aber nicht zu anders;)

Platzverbrauch der Navigation

Neben der Frage der Anordnung spielt auch die Frage nach dem Platzbedarf eines Navigationssystems eine wichtige Rolle. Dabei gilt: je kleiner die verfügbare Bildschirmauflösung, desto weniger Platz bleibt für den Inhalt, denn die Navigation sollte — egal bei welcher Auflösung — zumindest größtenteils ohne Scrollbalken auf dem Bildschirm erscheinen ( Vergleich Auflösung/Platzverbrauch).

Standortbestimmung über die Navigationsleiste

Der Benutzer sollte jederzeit wissen, wo er sich befindet. Die erste Maßnahme hierfür ist eine Anpassung der Navigationsleiste an den jeweiligen Standpunkt.

Der Benutzer wählt beispielsweise eine Rubrik (2. Ebene) und findet dann innerhalb der Rubrik eine Seite, die ihn interessiert. Er muß nun wissen:

• in welcher Rubrik er sich befindet,
• auf welcher Seite innerhalb der Rubrik er sich befindet und
• wie er zurückkommt, etwa um eine neue Auswahl zu treffen.

In diesem Fall müssen im Navigationssystem Rubrik und aktuelle Seite gekennzeichnet und der Link zur aktuellen Seite deaktiviert werden, damit der Benutzer keine Option angeboten bekommt, die ihn doch nur wieder auf die schon angewählte Seite führt.

Eine solche kontextabhängige Anpassung der Navigationssysteme findet man in verschiedenen Variationen:

• Kompakte Navigationsleiste mit baumartiger Struktur; sowohl die angewählte Rubrik als auch die aktuelle Seite werden mit unmittelbarem Bezug aufeinander anzeigt ( Baumdarstellung).
• Aufteilung des Navigationssystems auf zwei oder mehr Navigationsbereiche (Haupt- und bereichsspezifische Navigation) in denen Rubrik bzw. aktueller Standort markiert wird ( Rubrikenaufteilung). Hierbei werden also Haupt- und Unternavigation räumlich getrennt bzw. aufgeteilt.

Der Link zur gerade angewählten Rubrik kann natürlich nur dann deaktiviert werden, wenn dieser Link nicht zu einer Übersichtsseite, die alle Inhalte der Rubrik auflistet, führt. Oftmals bleiben alle Links einer Navigation aktiv, auch wenn der aktuell angewählte nur dieselbe Seite noch einmal lädt (siehe Beispiel ).

Technische Implementierung

Text: HTML

Der einfachste und sicherste Weg ist immer noch die Verwendung von schlichtem HTML-Text. Dafür sind die Gestaltungsmöglichkeiten recht eingeschränkt. Allerdings ist eine reine Textnavigation leicht aktualisierbar und lädt schnell. Verwendet man HTML in Verbindung mit Cascading Stylesheets, können anspruchsvollere Lösungen realisiert werden. HTML-Menüleisten

Grafik: HTML

Verlinkte Grafiken mit entsprechender Beschriftung sind im Web Standard, obwohl mit der zunehmenden Verbreitung von CSS viele Effekte, die grafische Qualitäten haben (etwa: 3-D-Effekte, siehe das obige Beispiel), mit reinem HTML erzeugt werden können. Grafische Navigationen laden normalerweise länger als Text, ermöglichen aber die bessere Anpassung an ein vorhandenes Corporate Design (z. B. Verwendung der Hausschrift).

Werdenerzeugt, so reichen in den meisten Fällen vier bis maximal 8 Farben, um ein ausreichendes Anti-Aliasing zu gewährleisten und gleichzeitig die Dateigröße so klein wie möglich zu halten.

Verwendung von Frames

Zu den Vorteilen von Frames zählt die Tatsache, dass eine in einem gesonderten Frame platzierte Navigationsleiste nur einmal geladen werden muß und auch bei längeren Seiten oder einem Seitenwechsel immer sichtbar bleibt.

Will man jedoch innerhalb der Navigation die jeweils angewählten Bereiche markieren und als Link deaktivieren, so muss — neben dem Inhaltsframe — auch der Navigationsframe neu geladen werden. Andere Nachteile beim Einsatz von Frames:

• Bookmarks: Wird ein Frameset als Bookmark abgelegt, so wird immer der Zustand des ersten Aufrufs abgespeichert; hat man innerhalb des Framesets schon verschiedene Seiten angewählt und via Bookmark gespeichert, wird über das Lesezeichen dennoch immer nur die Startseite des Framesets aufgerufen.
• Drucken: Viele Benutzer werden durch die Tatsache verwirrt, dass herkömmliche Browser standardmäßig den Ausdruck des jeweils aktiven (also zuletzt benutzten) Frames anbieten; dies ist zumeist der Frame mit der Navigationsleiste.
• Suchmaschinen: Nicht alle Suchmaschinen kommen mit Frames zurecht; auf jeden Fall sollte Seiten mit Frames mithilfe des sog. Noframe-Tags (eine alternative Verarbeitungsanweisung, falls Frames nicht verstanden werden) gekennzeichnet werden; auf diese Weise können auch die Seiten gefunden werden, die hinter der Rahmendefinition (dem Frameset) liegen.

Javascript

Oftmals wird Javascript dazu verwendet, mit der Maus überfahrene Menüpunkte durch eine Farb- oder Formveränderung zu kennzeichnen. Der Benutzer erhält so ein Feedback, welche Bereiche klickbar sind und somit Funktionselemente darstellen; zudem kann er bei klein dimensionierten Navigationselementen definiv feststellen, wann die sich Maus im aktiven Bereich befindet. Falls Javascript im Browser deaktiviert sein sollte, bleibt der Effekt einfach aus.

Die Verwendung von Javascript ist solange unproblematisch, wie die Navigation nicht darauf angewiesen ist ( Metro AG) und mögliche Fehler abgefangen werden können. Abgesehen von offiziellen (recht mißverständlich formulierten) Empfehlungen Javascript zu deaktivieren, ist es anzunehmen, daß viele Benutzer schon allein wegen ungewollter Popup-Fenster auf diese Browsererweiterung freiwillig verzichten. Zudem gibt es auch Firmennetze, in denen Javascript aus Sicherheitsgründen vollständig abgeblockt wird. Es ist immer ratsam, neben javascriptgestützten Lösungen auch eine alternative 'Lowtech'-Version anzubieten.

Dynamic HTML

Der Begriff Dynamic HTML umschreibt die Verbindung von Browser-basiertem Scripting (Javascript, JScript), Cascading Style Sheets und HTML. Praktisch bedeutet dies, dass nahezu alle Seitenelemente und insbesondere platzierbare Container (z. B.mit dem <div>-Tag realisiert) mithilfe von Scriptanweisungen auf verschiedene Art manipuliert werden können.

Im Bereich Navigation stellt das Flyout-Menü (oder Pop-Up-Menü) einen typischen Anwendungsfall dar. Auch hier ist es ratsam eine skriptfreie Alternative anzubieten. Die Kompatibilitätsliste des wohl bekanntesten und mittlerweile kommerziell vermarkteten Skriptes für ein DHTML-Menü von Peter Belesis sagt einiges aus, über den Aufwand, der zu betreiben ist, wenn man sicherstellen will, dass möglichst jeder eine solche Navigationshilfe verwenden kann. Zudem sollte man bedenken, dass je nach Hardware- und Softwareausstattung und Umfang des Menüs die Performance auf dem Zielrechner des Nutzers sehr schlecht sein kann. Konkret heisst das: Der Benutzer wartet einige Zeit, bis das Menü aufgebaut ist und zur Navigation benutzt werden kann.

Ein weiterer Aspekt, der die Usability beeinträchtigen kann: Obwohl alle Menüpunkte virtuell auf jeder Seite präsent sind, kann 1) immer nur eine Rubrik mit ihren Unterpunkten ausgeklappt werden (dies z.B. im Gegensatz zu einer Site-Map) und 2) kann die technische Möglichkeit dazu verführen, solche Menüs mit Optionen zu überfrachten und so die gewonnene Übersichtlichkeit zu korrumpieren (man denke nur daran, wie lange der wenig geübte Benutzer zuweilen beispielsweise in Microsofts Word® über das Menü nach dem geeigneten Befehl sucht).

Flash

Mit Flash, dem von von Macromedia® entwickelten Multimedia-Format, lassen sich sehr aufwendige, dynamische Navigationssysteme entwickeln. Solange das Plugin (bzw. die ActiveX-Komponente) auf dem Zielrechner in der richtigen Version vorhanden ist (man nehme diese Einschränkungen zu Kenntnis), gibt es keine Anzeige- oder Kompatibilitätsprobleme.

Doch angesichts der Inflation von nicht immer geschickt gefertigten und oft ladeintensiven Flashsites verteidigt selbst Macromedia die Technik gegen deren ehrgeizige Liebhaber: Tipp Nr. 3 des Paper Avoid Unnecessary Intros bringt die Debatte auf den Punkt: "While intro animations are exciting, they often delay the user's access to the information they seek [...]." Was hier mit Bezug auf wenig sinnvolle Animationen kritisiert wird, gilt in ähnlicher Form auch für animierte Navigationsleisten, die durch Ladezeiten und unkonventionelle Gestaltung nicht immer die Usability erhöhen.

Java-Applets

Java hat sich in Form von Java-Applets, also kleinen Programmen, die innerhalb des Browsers ablaufen können, nicht durchgesetzt. Navigationslösungen, die mit Java arbeiten, sind echte Ratitäten wie zum Beispiel das Menü von www.archive.nrw.de (mittlerweile ist man auch hier dazu übergegangen anstelle eines Java-Applets Javascript zu verwenden). Soweit der Autor dieser Zeilen es beurteilen kann, sollte auf einen derartigen Einsatz von Java verzichten werden, es sei denn, es gibt einen trifftigen Grund, wie z.B. eine interessante, experimentelle Navigation.

Grafische Umsetzung: Versuch einer Typologie

Menü

Vertikale Auflistung der Links bzw. Rubriken meist auf der linken Seite. Wesentlich ist hierbei eine schnell erfassbare optische Gruppierung zusammengehöriger Bereiche (Übersichtlichkeit).

Menüleiste

Horizontale Anordnung der Hauptrubriken und deshalb auflösungsbedingt u. U. begrenzter Platz; lädt schnell, da erstes Element auf der Seite. Oft werden die Menüleiste und das vertikale Menü miteinander kombiniert.

Kartenreiter

Mittlerweile Standard für Shopping-Sites; klare Markierung des aktuellen Standortes; Metapher bekannt aus Standardsoftware (z. B. Word, Dialoge mit verschiedenen Auswahlbereichen) und der wirklichen Bürowelt (Karteikasten).

Schon bei der Startseite sollte einer der Reiter ausgewählt sein, da nur auf diese Weise das Prinzip sofort augenfällig wird (vgl. S. Krug, Don't make me think).

Horizontales Popup-Menü

Menüleiste gekoppelt mit Pop-up-Menü bzw. erweiterter Auswahl bei Mausberührung. Kann, wenn nicht mit Optionen überfrachtet übersichtlich und praktisch sein; als DHTML-Version flexibel erweiterbar. Erfordert der Kompatibilität willen eine alternative Lösung bei älteren Browsern bzw. abgeschaltetem Javascript.

Vertikaler Verzeichnisbaum

Bis zu einem bestimmten Punkt übersichtlich und praktisch. Der Verzeichnisbaum benutzt die bekannte hierarchische Organisationsmetapher von Verzeichnisstrukturen (Dateimanager). Ein solcher Baum ist mit verschiedenen 'Methoden' realisierbar: als statische HTML-Version, mit Javascript ( Javascript/Baumstruktur) oder als per Datenbankabfrage dynamisch generierte Baumübersicht (z.B. mit PHP: PHP/Baumstruktur).

Javascript bietet durch die clientseitige Manipulation von Elementen nach dem Download des gesamten Menüs die Möglichkeit, innerhalb der Navigation Zweige auf- und zuzuklappen, ohne erneut Anfragen zum Server zu schicken.

Farbcodes als Navigationshilfe

Farblich verschieden gekennzeichnete Bereiche können bei der Orientierung hilfreich sein. Jedoch sollte man die Bedeutung eines Farbcodes nicht überschätzen, da es in den meisten Fällen keinen direkten, begrifflichen Bezug zwischen einer Farbe und etwa einer thematischen Rubrik gibt. Zudem ist diese Art der Orientierung für Farbenblinde oder sehbehinderte Benutzer von wenig oder gar keinem Nutzen.

Wenn es jedoch darum geht, bestimmte Bereiche als zusammengehörig zu kennzeichnen, kann die richtige Verwendung von Farben sehr gut Dienste leisten (siehe die Beispiele auf der rechten Seite). Zu bedenken ist jedoch, dass es nicht einfach ist, etwa für 8 verschiedene Rubriken ebensoviele deutlich voneinander unterscheidbare Farben zu finden. Dies hängt u.a. mit der Tatsache zusammen, dass im Web nur bedingt farbverbindlich gearbeitet werden kann und deshalb kleine Farbnuancen je nach Ausgabegerät verwischen.

Formularfelder vom Typ Auswahlliste

Als vollständiges Menü eher ungeeignet, jedoch brauchbar, wenn es sich um eine alphabetische Liste handelt, bei der man den gesuchten Begriff schon kennt ( Auswahlliste).

Typische Kombination: Kartenreiter, Suchfunktion, Menü und Utilities

Der Vollständigkeit halber sei hier noch auf eine typische Kombination des Navigationsdesign verwiesen, die sich v.a. im E-Commerce Bereich durchgesetzt hat:

• horizonalen Navigationsleiste (oft Kartenreiter)
• zentrale Suchmöglichkeit in der Mitte oder links oben auf der Seite (zumindest auf der Homepage)
• ein Menü auf der linken Seite mit Unterrubriken
• die Utilities (Warenkorb, Hilfe etc.) rechts oben

Fazit

Auch wenn es um das Navigationsdesign einer Website geht, erscheint als oberster Grundsatz der Titel des schon erwähnten Buches von Steve Krug geeignet: Don't make me think! Wer Informationen (Waren, Unterhaltung etc.) im Internet sucht, der will nicht wissen, wie eine Navigationsleiste funktioniert. Je einfacher und schneller die Navigation zu den gewünschten Informationen führt, desto eher dient sie dem Zweck der Site und öffnet einen transparenten Blick auf die Inhalte.

Informationsquellen

Analog

Jakob Nielsen: Erfolg des Einfachen. München 2000

Steve Krug: Don't make me think. XXXX 20XX

Digital

http://psychology.wichita.edu/surl/

Software Usability Research Laboratory (SURL) der Universität Wichita. Das SURL gibt einen Newsletter heraus, in dem Forschungsprojekte im Bereich Usability berichtet wird.

http://psychology.wichita.edu/optimalweb/

Eine Zusammenfassung verschiedener Themen über die das SURL geforscht hat.

http://www.kommdesign.de

Kompetente Site zu den Themen Psychologie, Ergonomie, Usability und Kommunikation von Dr. Thomas Wirth

http://www.useit.com/

Jakob Nielsen's Netz-Residenz; man kommt an Ihm nicht vorbei.

http://www.manager-magazin.de/ebusiness/webtest/0,2828,168031,00.html

"Die Fehler der Großkonzerne", das Manager Magazin testet 100 Websites von Großkonzernen. Eine ergiebiger Auswahl für alle Möglichen Beobachtungen zu Thema Navigationsdesign und Usability

http://webdesign.about.com/library/weekly/aa052899.htm

About.com über Navigationsdesign (1): "Methods of Navigation "

http://webdesign.about.com/library/weekly/aa052899.htm

About.com über Navigationsdesign (2): "Designing Effective Navigation"

http://www.wdvl.com/Location/Navigation/101/

Web Developers Virtual Library über Navigationsdesign: "Basic Principles of Web Site Navigation"

http://www.webpagesthatsuck.com/badnavigation.html

Was ist Mystery Meat Navigation?

http://vsys-www.informatik.uni-hamburg.de/ergonomie/index.html

Harald Weinrich (Uni Hamburg) über "10 wichtige Leitlinien für die Gestaltung von ergonomischen WWW-Informationssystemen"

http://www2.hdm-stuttgart.de/~schulz/diplomarbeiten/Nelsen/default.htm

Diplomarbeit im Studiengang Audiovisuelle Medien: "Navigation in komplexen Websites" (noch nicht ausgewertet; scheint eine umfangreiche Grundlagenarbeit zu sein...)

http://www.ahref.com/index/catlisting.html?cat_id=24

ahref.com: Längere Liste von Artikeln zum Thema Navigationsdesign

http://www.gssi.de/thema/index.html

Auch in Bayern gibt es Menschen, die sich Gedanken über Usability machen.

Noch geplante Erweiterung für spätere Versionen des Aufsatzes:

• Das Problem der Bezeichnung: Sprache und Bild
• Vor der Navigation: Die Startseite
• Benutzeraktion und Feedback
• Navigationsdesign: Checkliste

Hinweise auf Fehler, sachlicher oder auch sprachlicher Art, sind gerne gesehen. Auch für Hinweise auf tote oder nicht mehr aktuelle Links bin ich dankbar. Das Markup ist nicht unbedingt valide. Solange die Browser es anzeigen, möge man dies verzeihen und auf eine spätere Version warten;)

© 2002, sym.net, Martin Butz