![]() |
![]() |
![]() |
![]() |
![]() |
||||||||||||||
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...').
|
|
|||||||||||||||||
Was muß ein Navigationsystem leisten? |
||||||||||||||||||
Eine gutes Navigationssystem sollte dem Benutzer dabei helfen:
Somit stehen die folgenden miteinander verwobene Aspekte im Vordergrund:
|
||||||||||||||||||
Ü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 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 ( 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 ( 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 NavigationFolgende Konstruktion ist häufig zu finden:
|
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: |
|||||||||||||||||
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 UtilitiesOftmals 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 Man trennt also zwischen
|
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.
|
|||||||||||||||||
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 BenutzertypenAls Ausgangspunkt können die Benutzer grob in zwei Gruppen eingeteilt werden:
Natürlich kann eine solche idealtypische Vereinfachung nur als grobes Raster dienen, um verschiedene Navigationshilfsmittel und ihren Zweck zu bestimmen. Der erfahrene Benutzer:
Der eher assoziativ agierende Benutzer, zunächst ohne festes Ziel
Wer braucht was zur Navigation?Folgende Elemente stehen für ein redundant ausgelegtes Navigationssystem zur Verfügung
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
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üleisteDie Menüleiste bietet im Normalfall einen Blick auf die oberste
Hierarchieebene eine Site (
|
|
|||||||||||||||||
AuswahllisteDie 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 ( Die Auswahlliste hat folgende Vorteile:
|
||||||||||||||||||
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
|
|
|||||||||||||||||
Pfadnavigation (bread crumb navigation)Die Pfadnavigation ist ein hervorragendes Mittel um insbesondere unerfahrenen
Benutzern die Orientierung zu erleichern (
|
|
|||||||||||||||||
Site IndexEin Index ist ein alphabetisches Verzeichnis der Inhalte einer Site
( Vielfach wird der "Index" auch gleichbedeutend mit "Site
Map" verwendet, siehe z. B.
|
|
|||||||||||||||||
Site MapDie Site Map ist eine Repräsentation der Struktur und Inhalte
einer Site, die meist nach thematischen Kriterien gegliedert wird ( 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.
|
In Erfolg des Einfachen (The Practice of
Simplicity) schreibt Die wichtigsten Hindernisse bei der Benutzung laut
Nielsen
|
|||||||||||||||||
Orientierung: Drei zentrale Fragen |
||||||||||||||||||
Im Kern bedeutet eine gute Orientierung, dass der Benutzer die folgenden drei Fragenkomplexe zu jedem Zeitpunkt beantworten kann:
Damit ein Navigationssystem dem Nutzer diese Fragen beantworten kann, sollten die folgenden Aspekte bei der Planung in Betracht gezogen werden:
|
||||||||||||||||||
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:
|
Ein gutes |
|||||||||||||||||
Platzierung der NavigationBei 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
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:
Eine Startseite kann bezüglich der Navigation ruhig anders sein als die Folgeseiten aber nicht zu anders;)
|
|
|||||||||||||||||
Platzverbrauch der NavigationNeben 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 Standortbestimmung über die NavigationsleisteDer 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 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:
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: HTMLDer 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. Grafik: HTMLVerlinkte 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). Werden
|
||||||||||||||||||
Verwendung von FramesZu 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:
JavascriptOftmals 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 (
|
||||||||||||||||||
Dynamic HTMLDer 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 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).
|
|
|||||||||||||||||
FlashMit 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 Java-AppletsJava 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
|
|
|||||||||||||||||
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 (
|
|
|||||||||||||||||
MenüleisteHorizontale 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.
|
|
|||||||||||||||||
KartenreiterMittlerweile 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 VerzeichnisbaumBis 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 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 NavigationshilfeFarblich 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 AuswahllisteAls vollständiges Menü eher ungeeignet, jedoch brauchbar,
wenn es sich um eine alphabetische Liste handelt, bei der man den gesuchten
Begriff schon kennt
|
||||||||||||||||||
Typische Kombination: Kartenreiter, Suchfunktion, Menü und UtilitiesDer Vollständigkeit halber sei hier noch auf eine typische Kombination des Navigationsdesign verwiesen, die sich v.a. im E-Commerce Bereich durchgesetzt hat:
|
|
|||||||||||||||||
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 |
||||||||||||||||||
AnalogJakob Nielsen: Erfolg des Einfachen. München 2000 Steve Krug: Don't make me think. XXXX 20XX Digital
|
||||||||||||||||||
Noch geplante Erweiterung für spätere Versionen des Aufsatzes:
|
||||||||||||||||||
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 |