Navigation durch eine Webseite

Tipps und Tricks - Webdesign-Tipps


Eine klare und einfache Navigation ist essentiell wichtig für den Erfolg einer Webseite. Eine komplizierte und unklare Navigation wird Ihre Besucher verwirren. Wer nicht schnell findet, was er sucht, der verlässt Ihre Webseite schneller als Sie denken. Daher ist eine übersichtliche Navigation sehr wichtig. Worauf Sie achten müssen, erfahren Sie hier.
Eine Zusammenfassung der wichtigsten Hinweise finden Sie am Ende dieser Seite.

1. Hauptnavigation

Die Hauptnavigation ist das wichtigste Element Ihrer Webseite. Sie sollte klar strukturiert und leicht zugänglich sein. Die Hauptnavigationselemente sollten für die Besucher immer sichtbar sein. Hier gehören nur die wichtigsten Elemente Ihrer Webseite hinein. Sollte Ihre Seite verschiedene Kategorien haben, sollten diese in der Hauptnavigation extra mit einer Zwischenüberschrift unterteilt werden.
In die Hauptnavigation gehören zum einen Links zu Ihrer Startseite und zum Impressum. Falls vorhanden, gehören hier auch Links zum Kontaktformular und zum Forum oder Gästebuch hinein. Darüber hinaus gehören Verweise zu den Hauptkategorien Ihrer Webseite. Alles andere lässt sich durch Unterpunkte realisieren und muss nicht zwingend mit in die Hauptnavigation. Standardmäßig wird eine Hauptnavigation am Bildschirmrand erwartet. Meistens am linken oder am oberen Rand.

2. Unternavigation

Als Unternavigation werden Unterpunkte der Hauptnavigation bezeichnet. Prinzipiell kann diese auch noch weiter unterteilt werden. Beachten Sie jedoch, dass es viele Besucher nervig finden, wenn sie sich erst durch tief verzweigte Navigationspunkte klicken müssen. Achten Sie darauf, am besten maximal zwei Navigationsebenen zu verwenden (Hauptnavigation und maximal eine Unternavigation). Sinnvoll ist eine weitere Unterteilung nur dann, wenn Sie eine wirklich große und umfangreiche Webseite haben, bei der es nicht anders geht.
Wenn Sie eine Unternavigation einsetzen, sollten Sie Ihrem Besucher die Möglichkeit geben, die Hauptnavigationselemente weiter im Auge behalten zu können. Ein aufklappendes Menü ist dabei sinnvoll. Dies ist - auch wenn es etwas aufwändig ist - auch mit reinem HTML zu bewerkstelligen. Es ist also nicht unbedingt notwendig, hierfür umfangreiche JavaScripts oder gar Applets einzusetzen. Weiterhin ist es sinnvoll, den aktuell ausgewählten Unterpunkt noch farblich etwas hervorzuheben. Das gilt im Übrigen auch für die Hauptnavigation.
Ins Untermenü gehören die Elemente, deren Unterbringung im Hauptmenü nicht unbedingt sinnvoll ist. Als Beispiel dafür kann auch Webmasterparadies.de herhalten. Hauptnavigationspunkt für dieses Beispiel ist die Kategorie Scripting-Tipps. Wenn Sie auf diesen Verweis im Hauptmenü geklickt haben, erscheint ein aufgeklapptes Menü mit weiteren Unterpunkten, die Sie dann in die entsprechende Unterkategorie verweisen, zum Beispiel CSS-Tipps oder JavaScript-Tipps. Sollte Ihre Webseite aus nur einer großen Kategorie bestehen, ist der Einsatz von Untermenüs natürlich nicht sinnvoll. Hier sollten Sie sich auf die Hauptnavigationselemente beschränken.

3. Diverse Navigationselemente

Zu den diversen Elementen einer Navigation kann zum Beispiel ein Link zum Benutzermenü einer Community sein. In einem Firmeninternen Intranet könnte als diverses Element die Telefonliste des Hauses gelten. Um sich ein klareres Bild davon zu machen, was diverse Navigationselemente sind, können Sie einmal zum Test folgende Webseiten besuchen:

Internetauftritt des Westdeutschen Rundfunkes: www.wdr.de
Internetauftritt des Computermagazins PC WELT: www.pcwelt.de
Internetauftritt der Mozilla Foundation: www.mozilla.org

Wie Sie sehen1, setzen alle Seiten verschiedenartige "diverse Navigationselemente" ein. Beim WDR wären dies die Menüpunkte unter dem Feld für Impressum und Kontakt auf der linken Seite. Die PC WELT hingegen hat ihre diversen Elemente am oberen, rechten Bildschirmrand eingefügt. Die Mozilla Foundation bringt ihre diversen Elemente am unteren Bildschirmrand, abgetrennt durch eine horizontale Linie, zur Geltung.
Als diverse Elemente werden also die Menüpunkte betrachtet, die zwar ihre "Daseinsberechtigung" haben, die aber nicht zur Haupt- oder Unternavigation gehören. Diese diversen Elemente sollten Sie, wenn sie direkt im Blickfeld der Besucher liegen, möglichst gering halten. Am unteren Seitenrand ist genug Platz dafür. Verwirren Sie Ihre Besucher nicht zu sehr, indem Sie zu viele Navigationselemente im direkten Sichtbereich Ihrer Besucher unterbringen.

4. Navigation innerhalb der Seiten

Innerhalb Ihrer Webseite darf eine "anständige" Navigation natürlich auch nicht fehlen. So ist es sinnvoll, sehr lange Beiträge lieber auf mehreren Seiten zu verteilen, anstatt einen riesengroßen Beitragstext zu haben. Hier darf natürlich auf keiner Seite ein Link zur vorhergegangenen und zur nachfolgenden Seite fehlen. Dennoch muss auch bei sehr langen Texten darauf geachtet werden, dem Besucher die Möglichkeit zu geben, den vollständigen Text sich anzeigen lassen zu können. Viele lesen ungerne lange Texte am Bildschirm, sondern drucken sich solche Texte lieber aus.
Am Ende einer Seite kann es für die Besucher hilfreich sein, an den Anfang zurückspringen zu können. Genau so sollten Sie bei langen Texten auch die Möglichkeit geben, zu verschiedenen Absätzen springen zu können. Mit Ankern ist dies überhaupt kein Problem (siehe auch: HTML-Tutorial).
Auch (sinnvolle) Querverweise innerhalb Ihrer Webseite können einem Besucher sehr helfen. Solche Querverweise sind dann sinnvoll, wenn Sie sich in einem Ihrer Inhalte auf einen anderen Inhalt beziehen, der an einer anderen Stelle Ihrer Webseite genauer erläutert wird. Bestes Beispiel dafür ist der Verweis zum HTML-Tutorial gerade eben gewesen. Denn dort ist erklärt, wie man Ankerpunkte in eine Webseite einfügt.

5. Allgemeine Hinweise

Ziel einer guten Navigation ist es, mit möglichst wenig Verweisen möglichst viele Seiten zu erreichen. Das klingt kompliziert und genau das ist es auch. Denken Sie immer daran: Ein überladenes Navigationsmenü verwirrt mehr als es hilft. Wer nicht auf den ersten Blick erkennen kann, wo es langgeht, der versucht es meistens gar nicht erst. Während Sie einen potentiellen Kunden verlieren freut sich die Konkurrenz, die es eventuell besser macht. Bringen Sie daher nur das nötigste direkt zur Geltung.
Im Übrigen sollte ein Navigationsmenü nicht nur aus Grafiken bestehen. Kleine Symbole könnten ein Menü zwar etwas ansprechender machen, aber verwenden Sie keinesfalls nur Symbole zur Navigation! Es kann nämlich durchaus vorkommen, dass die Bedeutung Ihrer Symbole nicht für jeden Ihrer Besucher klar ist. Auch wenn sie vermeintliche "Standardgrafiken" einsetzen (Beispielsweise ein Haus als Symbol für die Startseite), muss sie trotzdem nicht jeder kennen.

Zusammenfassung

  • Hauptnavigation
    • Gliedern Sie Ihre Navigationselemente
    • Wichtige Navigationselemente gehören an erster Stelle
    • Unterteilung verschiedener Themenbereiche mit Zwischenüberschriften
    • Die Hauptnavigation sollte ständig sichtbar sein
    • Möglichst wenige Hauptnavigationspunkte einsetzen
      • Der Rest gehört in Unterpunkte
  • Unternavigation
    • Die Unterpunkte nach Möglichkeit nicht weiter verschachteln
    • Die Hauptnavigation sollte nicht verschwinden
      • mindestens jedoch die Oberkategorie sollte sichtbar bleiben
    • Unterpunkte nur da Anbringen, wo es auch sinnvoll ist
  • Diverse Navigationselemente
    • Hier kommen nur Navigationspunkte rein, deren Einsatz im Haupt- oder Untermenü nicht sinnvoll ist
    • Die Liste, wenn Sie im direkten Sichtbereich des Besuchers ist, möglichst gering halten
      • eine vollständige Liste kann in der Fußzeile der Seite eingefügt werden
  • Navigation innerhalb der Seiten
    • Sehr lange Texte auf mehreren Seiten verteilen
      • dabei die Verweise auf die vorhergegangene bzw. auf die nachfolgende Seite nicht vergessen
      • dem Besucher die Möglichkeit geben, sich den vollständigen Beitrag ausdrucken lassen zu können
    • Am Ende einer Seite einen Link zum Anfang setzen
    • Lange Texte mit Zwischenüberschriften unterteilen und diese mittels Anker verlinken
    • Querverweise innerhalb Ihrer Webseite
  • Sonstiges
    • keinesfalls nur Grafiken als Menüpunkte einsetzen
    • Motto einer jeden Navigation: Weniger ist mehr!


Fußnoten:
1 Stand: November 2008


Weitere Artikel: