Navigation auf einer Webseite

Eine klare und einfache Navigation ist essentiell wichtig für den Erfolg einer Webseite. Eine komplizierte und unklare Navigation wird deine Besucher verwirren. Wer nicht schnell findet, was er sucht, der verlässt eine Webseite sehr schnell wieder. Daher ist eine übersichtliche Navigation sehr wichtig.

Worauf du bei der Erstellung der Navigation achten musst, kannst du in den kommenden Abschnitten nachlesen. Am Ende wartet eine kurze Zusammenfassung.

 

1. Hauptnavigation

Die Hauptnavigation ist das wichtigste Element einer Webseite. Sie sollte klar strukturiert und leicht zugänglich sein. Die einzelnen Punkte der Navigation müssen klar und deutlich beschriftet sein. Die Elemente der Hauptnavigation sollten für die Besucher immer sichtbar sein bzw. sich immer an der gleichen Stelle befinden. Hier gehören nur die wichtigsten Elemente deiner Webseite hinein. Sollte deine 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 deiner 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 deiner Webseite in die Hauptnavigation. Alles andere lässt sich durch Unterpunkte realisieren und muss nicht zwingend mit in die Hauptnavigation.

Standardmäßig wird eine Hauptnavigation am Anfang der Seite oder am Bildschirmrand erwartet.

 

2. Unternavigation

Als Unternavigation bezeichnet man Unterpunkte der Hauptnavigation. Prinzipiell kann diese auch noch weiter unterteilt werden. Beachte jedoch, dass es viele Besucher nervig finden, wenn sie sich erst durch tief verzweigte Navigationspunkte klicken müssen. Achte darauf, am besten maximal zwei Navigationsebenen zu verwenden (Hauptnavigation und maximal eine Unternavigation). Sinnvoll ist eine weitere Unterteilung nur dann, wenn du eine wirklich umfangreiche Webseite hast, bei der es nicht anders geht.

Wenn du eine Unternavigation einsetzt, sollten sie den Seitenbesuchern die Möglichkeit geben, die Hauptnavigationselemente weiter im Auge behalten zu können. Ein aufklappendes Menü ist dabei sinnvoll. Dies ist mit CSS auch sehr leicht zu bewerkstelligen. 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. Wenn du im Hauptmenü mit dem Mauszeiger  auf „Scripting“ gehst, erscheinen die Unternavigationspunkte „CSS“, „HTML“, „JavaScript“ und „PHP“.

Sollte deine Webseite aus nur einer großen Kategorie bestehen, ist der Einsatz von Untermenüs natürlich nicht sinnvoll. Hier solltest du dich 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. Hier auf Webmasterparadies.de sind z.B. die Links zu den Sozialen Netzwerken als „diverse Navigationselemente“ zu bezeichnen.

Die diversen Navigationselemente sind immer abgesetzt von Haupt- oder Unternavigation. Es sollten nicht zu viele dieser Elemente im Blickfeld gleichzeitig zu sehen sein. Wenn du mehr als ein paar dieser Navigationselemente im Blickfeld einsetzt, kann dies schnell zu Unruhe führen. Befördere diese Links besser ans Ende der Seite. Beschränke dich auf eine handvoll diverser Navigationselemente, die im Sichtfeld des Seitenbesuchers liegen.

 

4. Navigation innerhalb der Seiten

Innerhalb deiner 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. Doch auch bei sehr langen Texten solltest du darauf achten, dem Besucher die Möglichkeit zur vollständigen Textanzeige zu geben. Viele lesen ungerne lange Texte am Bildschirm, sondern drucken sich daher 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 solltest du 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 deiner Webseite können einem Besucher sehr helfen. Ein Querverweis ist sinnvoll, wenn sich der Inhalt eines Textes auf einen anderen Artikel bezieht der den Sachverhalt genauer erläutert. 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. Denke 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 du einen potentiellen Kunden verlierst freut sich die Konkurrenz, die es eventuell besser macht. Bringe 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 verwende keinesfalls nur Symbole zur Navigation! Es kann nämlich durchaus vorkommen, dass die Bedeutung der Symbole nicht für jeden Seitenbesucher klar ist. Auch wenn du vermeintliche „Standardgrafiken“ einsetzt (Beispielsweise ein Haus als Symbol für die Startseite), muss sie trotzdem nicht jeder kennen.

 

Zusammenfassung

  • Hauptnavigation
    • Gliedere deine Navigationselemente
    • Wichtige Navigationselemente gehören an erster Stelle
    • Unterteilung verschiedener Themenbereiche mit Zwischenüberschriften
    • Die Hauptnavigation sollte ständig sichtbar sein bzw. sich immer am gleichen Platz befinden
    • 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 deiner Webseite nutzen
  • Sonstiges
    • keinesfalls nur Grafiken als Menüpunkte einsetzen
    • Motto einer jeden Navigation: Weniger ist mehr!

 

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.