Website-Navigation
Wegweiser für Besucher

DeveloperIT-ProjekteSoftware

Internet Professionell stellt ausführlich zahlreiche Tricks und Möglichkeiten vor, wie Sie Ihre Websites besucherfreundlich und einfach navigierbar machen.

Optimale Benutzerführung

Website-Navigation

Ein effektives Navigationssystem ist unerlässlich für einen guten Web-Auftritt. Denn Fehler auf diesem Gebiet sind fatal: Wenn sich Besucher nicht orientieren können oder das, was sie suchen, nicht auf Anhieb finden, verschwinden sie meist frustriert sehr schnell wieder.

Jede Website besteht aus einer unterschiedlich umfangreichen Sammlung von Inhaltsseiten, die über Hyperlinks nach einem sinnvollen Schema miteinander verknüpft sind. Diese Verknüpfung ist Aufgabe einer guten Navigation.

Mit dem Umfang der Site wachsen die Ansprüche. Hat die Zahl der Seiten eine gewisse Größe erreicht, muss eine hierarchische Gliederung her, die den Besucher schnell und ohne großen Aufwand durch alle Verästelungen der Site und zu der gewünschten Information führt.

Eine gute Navigation setzt also in jedem Fall eine durchdachte und logische Struktur der Site voraus. Stellt diese nur eine wüste Sammlung von Inhalten und Applikationen dar, können auch aufgepeppte Menüstrukturen nicht mehr viel retten. Aus Sicht des Surfers ist das fatal, und er wird den Web-Auftritt auf Grund dieser Mängel künftig einfach meiden.


Grundsätze guter Navigation

Website-Navigation

Folgende grundsätzliche Anforderungen sind an eine gute Navigation zu stellen:

– Sie muss für den Websurfer einfach zu erkennen und leicht erlernbar sein. Durch ein klares Design, eindeutige Kategorisierung und die Einhaltung allgemeiner optischer und textlicher Konventionen können Webdesigner dies erreichen. Die Verfahren müssen nicht aufwendig sein. Im Gegenteil: Oft sind Navigationselemente mit künstlerischem Beiwerk so überfrachtet, dass ihr eigentlicher Zweck für den Besucher erst auf den zweiten Blick erkennbar ist.

– Konsistenz ist ein weiteres Element einer guten Website-Navigation. Man erreicht sie durch ein einheitliches Design und gleiche Platzierung der Navigationselemente auf allen Seiten. Ein buntes Gemisch aus unterschiedlichen Elementen (Text-Links, Flash, Bilder, animierte Buttons) und unterschiedlicher Platzierung bietet zwar optische Vielfalt, verhindert jedoch, dass sich die Besucher schnell zurechtfinden.

– Jedes Navigationselement muss dem Nutzer ein Feedback geben, das ihm signalisiert, wohin die getätigte Aktion führt und dass sie erfolgreich war. Durch Auswertung von OnMouseOver-Ereignissen per Javascript lässt sich viel erreichen. Aber auch trivialere Methoden wie die Nutzung von alt-Tags bei Bildern oder title-Tags bei einfachen Text-Links leisten wertvolle Dienste.


Kontextsensitive Navigation

Website-Navigation

Navigation muss kontextsensitiv sein. Der Surfer muss zu jeder Zeit wissen, wo er sich befindet, wohin er gehen kann, wie er dorthin kommt und wie er wieder zurück zum Ausgangspunkt gelangt. Ein Link in einem Katalog mit Reiseangeboten zu einer Fotogalerie mit Urlaubsimpressionen kann sinnvoll sein. In einem Katalog mit IT-Produkten stiftet er Verwirrung, da er nicht kontextsensitiv ist. Insbesondere bei Websites mit einer tiefen Hierarchie kann der Surfer leicht in die Situation kommen, dass er nicht mehr weiß, wo er sich gerade befindet. Bietet der Designer hier keine Orientierung an, treibt er die Besucher aus dem Angebot. Die Option Zurück zur Startseite stellt das absolute Minimum dar. Noch besser sind Zusatzoptionen, die den Nutzer auf die nächsthöhere Hierarchie-Ebene zurückbringen, oder der Einbau von Vor– und Zurück-Links. Die stellen zwar alle gängigen Browser auch zur Verfügung, auf deren Funktion und Gestaltung hat der Designer jedoch keinen Einfluss.


Brotkrumen

Website-Navigation

So genannte Breadcrumbs bilden in diesem Zusammenhang die ultimative Lösung, die dem Besucher Station für Station den kompletten Pfad anzeigen, auf dem er zu der gerade angezeigten Seite gekommen ist. Die einzelnen Stationen sind natürlich verlinkt und führen auf Wunsch wieder in der Hierarchie Schritt für Schritt nach oben.

Höhere Designkunst ist es, dem Besucher auch Alternativen in der Navigation anzubieten. Zu nennen sind hier zum Beispiel Suchfunktionen, Sitemaps oder Textversionen der Site, in der der Besucher über einfache Listen im Stil eines Inhaltsverzeichnisses durch das Angebot navigieren kann. Da man die individuellen Präferenzen der Besucher in Sachen Navigation nicht präzise vorherbestimmen kann, bietet die Vielfalt die Chance, ein möglichst breites Präferenzspektrum abzudecken.

Ein weiteres Problem bei tief gestaffelten Web-Angeboten sind die Abkürzungen. Man muss dem Besucher Wege weisen, die ihm ein mühsames Durchhangeln durch die Site-Hierarchie ersparen. Ständig präsente globale Navigationselemente, Pulldown-Menüs, die wenig Platz auf der Seite wegnehmen, oder eine Navigationsstruktur, wie sie zum Beispiel im Windows-Explorer mit seinen auf- und zuklappbaren Foldern eingebaut ist, sind Wege, um dies zu erreichen. Sie erlauben einem erfahrenen Besucher jederzeit, mit wenigen Klicks ohne Umwege zu jeder gewünschten Seite in einer vielfach verzweigten Baumstruktur zu springen.


Eindeutige Navigationselemente

Website-Navigation

Wichtig ist es auch, Navigationselemente auf einer Site eindeutig und einheitlich zu visualisieren. Am besten lehnt sich der Webdesigner hier an die Konventionen an, die sich bei der Programmierung grafischer Bedienoberflächen herauskristallisiert haben. Buttons, Popup- und Pulldown-Menüs sowie Symbolleisten kennen die meisten Benutzer aus ihrer täglichen Arbeit an einem Windows-PC. Deren Verwendung als Navigationselemente auf einer Website liegt daher nahe und erfordert vom Besucher keine große Umstellung. Auch einfache Text-Links lassen sich mit Hilfe von Stylesheets grafisch erheblich aufwerten und eindeutig als Navigationselemente kennzeichnen.

Wichtig ist auch die Einheitlichkeit. In einem Ast einer Struktur mit Buttons zu arbeiten, in einem anderen mit Menüs und in einem weiteren sich auf Text-Links zu beschränken garantiert eine totale Verwirrung beim Benutzer und sorgt dafür, dass er nicht allzu lange auf einer solchen Site bleibt.

Ein Kernproblem ist, dass Designer bei einer neuen Site in der Regel Publikum und damit Navigationspräferenzen nicht kennen. Usability-Tests im Vorfeld und ständige Optimierung nach der Live-Schaltung auf Basis einer genauen Analyse des Besucherverhaltens können dazu beitragen, dieses Risiko reduzieren.


Menü mit Tabelle

Website-Navigation

Für die Umsetzung dieser Grundsätze einer guten Navigation stehen dem Designer zahlreiche Werkzeuge zur Verfügung. Das fängt schon beim einfachen Text-Link an. Mit Hilfe von Tabellen und CSS ist es keine große Kunst, daraus ein benutzerfreundliches Menü zu konstruieren, wie folgendes Beispiel zeigt: eine einzeilige Tabelle für die horizontale Anordnung, in deren Zellen die einzelnen Menüpunkte abgelegt sind. Mit geschützten Leerschritten werden vorhandene Leerräume aufgefüllt. Für eine Haarlinie um die Tabelle sorgt eine weitere Tabelle mit schwarzem Hintergrund. Das Listing dazu sieht so aus:

   Home      News     
Downloads  
  
Forum  
  
Workshop  
  
Links  


Farbe mit CSS

Website-Navigation

Um die Menüeinträge besser als Navigationselemente zu kennzeichnen, stehen dem Designer Cascading Stylesheets zur Verfügung. Entsprechende Definitionen sorgen dafür, dass die Zelle, über die ein Benutzer mit der Maus fährt, die Hintergrundfarbe wechselt. Im head-Bereich der Seite sind dazu folgende Definitionen einzufügen: