Das Webwriting-Magazin

- Über das Publizieren im Web -

 

www.webwriting-magazin.de

Newsletter Forum Kontakt
Zur Druckversion

Die Druckversion ist voll navigierbar und macht den gesamten Informationsumfang des Dokumentes auch dann zugänglich, wenn Ihr Browser das Layout nicht darstellen kann.

Martin Butz:

Navigationssysteme im World-Wide-Web

Inhalt

Was muß ein Navigationssystem 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

Auf nahezu jeder Website werden die Inhalte in thematische Bereiche eingeteilt. Entscheidend für den Benutzer ist hier die 'Nutella-Regel': Was draufsteht, soll auch drinstecken.

Sinnvollerweise werden die Hauptrubriken dem Benutzer auf allen Seiten als sog. globale Navigation übersichtlich zur Verfügung gestellt. Wird einer dieser Menüpunkte angewählt, erscheint eine bereichsspezifische Erweiterung der Navigation innerhalb der angewählten Rubrik globale und bereichsspezifische Navigation. Die globale Navigation, also die inhaltliche Grundstruktur der Site, sollte nicht allzu komplex sein. Wesentlich mehr als 7 Menüpunkte sind selten notwendig, wobei diese Zahl allerdings eine Faustregel und kein Dogma darstellt.

Praxistipp:
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

Bei umfangreichen Angeboten, etwa E-Commerce-Sites, wird die Navigation zusätzlich in zwei voneinander funktional getrennte Menüleisten eingeteilt: Die eine präsentiert die Inhalte, während eine zweite Menüleiste Links wie z.B. 'Kontakt' und 'Shopping-Cart' oder auch 'Sitemap' und 'Suche' anbietet. 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)

Effizienz: Wie kann man mit einem Menü alle Gäste bewirten?

Wahrscheinlich gar nicht. Aber auch wenn nicht jeder seine Lieblingsspeise serviert bekommt: Keiner sollte verhungern! So oder ähnlich kann man metaphorisch den Anspruch auf den Punkt bringen, den man an den Nutzen von Navigationsinstrumenten einer Website stellen sollte. Ein redundant ausgelegtes System von Navigationsmitteln stellt sicher, dass Besucher mit verschiedenen Geschmäckern das finden, was sie suchen.

Zur Lösung dieses Problems können die Benutzer zunächst grob in zwei Gruppen eingeteilt werden:

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

Der zielstrebige Benutzer

Innerhalb der zweiten Gruppe kann man zusätzlich mit Steve Krug eine weitere Unterteilung vornehmen:

Typ A, so Krug zur Verdeutlichung, würde sich sich z.B. im Baumarkt nach der Beschilderung richten, wohingegen Typ B direkt einen Verkäufer fragt.

Als Arbeitshypothese bei der Planung einer Site sind diese Unterscheidungen sehr hilfreich, da sich hieraus Anhaltspunkte für die Verwendung der verschiedenen Navigationsmittel gewinnen lassen. Folgende Elemente stehen für ein redundant ausgelegtes Navigationssystem zur Verfügung

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

Vertikale Navi

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 Gestaltung von Formularen vorgesehen. Kombiniert man ein solches Formularelement mit einem entsprechenden Programm (genauer: ein Skript), gelangt der Benutzer nach der Auswahl einer Option auf die gewünschte Seite ( Auswahlliste).

Auswahlliste



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.


Praxistipp: Formatierung von Auswahllisten
Menulisten mit CSS formatieren
Trickkiste - sortierte Auswahlmenus
Quelle: www.ideenreich.com

Sie bietet sich eher als zusätzliches Navigationsinstrument für erfahrene Besucher an, die gezielt nach strukturierten, 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)

Pfadnavigation


Produkte > Elektro > Mixer

Die Pfadnavigation ist ein hervorragendes Mittel um insbesondere unerfahrenen Benutzern die Orientierung zu erleichtern. (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

Site Index


A
Albanien
Algerien

B
Belgien
Belize

C
etc.

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 (ähnlich wie bei der Auswahlliste).

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

Site Map

Sitemap



Sitemaps werden oft nicht richtig gestaltet und eingesetzt. Die wichtigsten Hindernisse bei der Benutzung sind laut Nielsen Alertbox (Januar 2002):

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.

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:

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 (CSS), können auf diese Weise 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 eine leichtere Anpassung an ein vorhandenes Corporate Design.

WerdenDies ist Text, der als GIF-Datei abgespeichert wurde.erzeugt, 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:

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 (oder ganze Firmennetze) schon allein wegen ungewollter Popup-Fenster auf diese Browsererweiterung freiwillig verzichten. Ebenso wird mittlerweile in vielen Firmennetzen aus Sicherheitsgründen Javascript in den Browsern deaktiviert. Deshalb ist 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.

Flyout-Menu


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 jedereine 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 Microsoft Word® 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. 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

Menuleiste
www.consors.de
www.roechling.de
www.wdr.de
www.ruhrgas.de

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

Kartenreiter

Kartenreiter
www.neu.otto.de
www.amazon.de
www.ard.de

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 auf diese Weise das Prinzip sofort augenfällig wird (vgl. S. Krug, Don't make me think).

Horizontales Popup-Menü

Pop-Up horizontal
www.leverkusen.de

DHTML-Version
www.basf.de
www.n-tv.de

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

Vertikaler Verzeichnisbaum

Verzeichnisbaum
www.commerzbank.de
www.hochtief.de
www.jds-software.de

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

Farbcodes
www.neu.otto.de
www.amazon.de
www.grooveattack.de

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

Typische Kombination im Bereich E-Commerce
www.neu.otto.de
www.amazon.de
www.cdnow.de
www.zdf.de
www.barnesandnoble.com

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

Fazit

Dieser Aufsatz hat versucht, einige wichtige Prinzipien und Empfehlungen zum Thema Navigationsdesign zusammenzufassen. Als oberster Grundsatz erscheint der Titel des schon erwähnten Buches von Steve Krug ereignet: 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. Indianapolis 2000

Digital

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.

psychology.wichita.edu/optimalweb/
Eine Zusammenfassung verschiedener Themen über die das SURL geforscht hat.

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.

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

webdesign.about.com/library/weekly/aa052899.htm
About.com über Navigationsdesign (1): "Methods of Navigation "

webdesign.about.com/library/weekly/aa052899.htm
About.com über Navigationsdesign (2): "Designing Effective Navigation"

www.wdvl.com/Location/Navigation/101/
Web Developers Virtual Library über Navigationsdesign: "Basic Principles of Web Site Navigation"

www.webpagesthatsuck.com/badnavigation.html
Was ist Mystery Meat Navigation?

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"

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...)

www.ahref.com/index/catlisting.html
ahref.com: Längere Liste von Artikeln zum Thema Navigationsdesign

www.gssi.de/thema/index.html
Auch in Bayern gibt es Menschen, die sich Gedanken über Usability machen.

* * *

Dieser Aufsatz ist eine gekürzte Variante der Originalfassung. Mein herzlicher Dank geht an Ute Vogel, Rainer Klehn und Christoph Siefer für die konstruktive Kritik sowie an Michael Charlier für die redaktionelle Betreuung.