Navigation auf einer Webseite

Eine klare und einfache Navigation ist sehr wichtig für den Erfolg einer Website. Ist sie kompliziert, verwirrt sie die Nutzer dadurch nur. Wer nicht schnell findet, was er sucht, verlässt die Website umgehend wieder. Aus diesem Grund gehört eine übersichtliche Navigation zum A und O einer Website.

Worauf du bei der Erstellung der Navigation achten musst, erkläre ich dir in den folgenden Abschnitten. Am Ende findest du eine kurze Zusammenfassung der Inhalte.

 

1. Hauptnavigation

Die Hauptnavigation ist neben dem Content das wichtigste Element einer Website. Sie muss klar strukturiert und leicht zugänglich sein. Die einzelnen Menüpunkte sollten klar und deutlich beschriftet sein und nur aus den wichtigsten Bereichen der Website bestehen. Sie sollte immer sichtbar sein bzw. sich immer an der gleichen Stelle befinden. Mehrere Bereiche kannst du in der Hauptnavigation mit einer Zwischenüberschrift unterteilen.

In die Hauptnavigation gehört sowohl ein Link zur Startseite, als auch Links zu den Hauptkategorien der Website. Wenn du keinen extra Bereich dafür hast, ist hier auch der Link zum Impressum anzusiedeln. Alles andere gehört in Unterpunkte und muss nicht zwingend mit in die Hauptnavigation.

Die Nutzer erwarten die Hauptnavigation für gewöhnlich am Anfang der Website oder am Bildschirmrand.

 

2. Unternavigation

Als Unternavigation bezeichnet man Unterpunkte der Hauptnavigation. Diese könntest du sogar noch weiter unterteilen. Beachte jedoch, dass es viele Nutzer nervig finden, wenn sie sich durch tief verzweigte Menüs klicken müssen. Achte darauf, max. zwei Ebenen zu verwenden: Hauptkategorie und max. eine Unterkategorie. Eine weitere Aufteilung ist nur bei sehr großen Websites bzw. Shopping Portalen sinnvoll.

Eine gute Unternavigation sollte die Elemente der Hauptnavigation nicht verdecken. Ein aufklappendes Menü ist dazu sinnvoll, das mit CSS auch sehr leicht zu erstellen ist. Ebenso macht es Sinn, den aktuell ausgewählten Menüpunkt farblich etwas hervorzuheben.

Ins Untermenü gehören dabei die Elemente, deren Unterbringung im Hauptmenü nicht sinnvoll ist. Beispiel: Gehe im Hauptmenü auf den Punkt „Scripting“ und es erscheinen die Unterpunkte „HTML“, „CSS“, „JavaScript“ und „PHP“.

Sollte deine Website keine weiteren Bereiche haben, macht eine Aufteilung an dieser Stelle keinen Sinn. Beschränke dich in diesem Fall auf die Hauptnavigation.

 

3. Diverse Elemente einer Navigation

Zu den diversen Elementen gehört z.B. ein Link zum Benutzermenü eines Forums. Im Intranet einer Firma könnte es die Telefonliste des Hauses sein. Hier auf dieser Website sind bspw. die Links zu den Sozialen Netzwerken als „diverse Navigationselemente“ zu bezeichnen.

Diese Elemente sind dabei immer abgesetzt von Haupt- oder Unternavigation. Es sollten nicht zu viele dieser Elemente im Blickfeld gleichzeitig zu sehen sein. Setzt du viele dieser Elemente ins Blickfeld des Nutzers, kann das schnell zu Unruhe führen. Setze diese Links daher besser in den Footer.

 

4. Navigation innerhalb der Website

Innerhalb einer Website darf eine „anständige“ Navigation ebenso wenig fehlen. Es kann bspw. sinnvoll sein, Beiträge zu verteilen anstatt einen sehr langen Fließtext zu haben. Die Links zur vorigen und nächsten Seite dürfen dabei nicht fehlen. Viele Nutzer lesen lange Texte nicht gerne am Bildschirm und drucken sie daher aus. Ermögliche ihnen das, indem du den langen Text trotzdem auch am Stück anbietest.

Ankerpunkte erleichtern die Navigation durch lange Texte (siehe auch: HTML Tutorial). Sie helfen dem Nutzer dabei, direkt zu verschiedenen Bereichen zu springen. Dabei sollte der Nutzer ebenfalls die Möglichkeit haben, mit einem Klick wieder an den Anfang der Seite zu kommen.

Auch sinnvolle Querverweise innerhalb deiner Website können dem Nutzer sehr helfen. Du hast weitere Inhalte, die einen Sachverhalt näher erläutern? Perfekt – dann setze einen Querverweis, denn sie helfen nicht nur dem Nutzer, der sich weiter informieren kann. Du kannst dadurch auch die Absprungrate verbessern, was eins der vielen SEO Signale ist.

 

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 volles Menü verwirrt mehr als es hilft. Wer nicht auf den ersten Blick sieht wo es langgeht, verlässt die Website schnell wieder. Du verlierst somit einen Kunden und die Konkurrenz, die es besser macht, freut sich. Bringe daher nur das Nötigste direkt zur Geltung.

Im Übrigen sollte eine Navigation nicht nur aus Grafiken bestehen. Ein Symbol kann ein Menü zwar etwas aufwerten, aber nutze niemals nur Bilder! Es kann sein, dass die Bedeutung der Symbole nicht für jeden Nutzer klar ist. Auch wenn du vermeintliche Standards nutzt (bspw. ein Haus als Symbol für die Startseite), muss sie trotzdem nicht jeder kennen.

 

Zusammenfassung

  • Hauptnavigation
    • Gliedere die Elemente
    • Wichtige Punkte gehören nach vorne
    • Zwischenüberschriften für verschiedene Bereiche
    • Sie sollte ständig sichtbar sein bzw. sich immer am gleichen Platz befinden
    • Möglichst wenige Hauptpunkte einsetzen
      • Der Rest gehört in Unterpunkte

 

  • Unternavigation
    • Die Unterpunkte möglichst nicht weiter verschachteln
    • Die Hauptnavigation sollte sichtbar bleiben
      • mindestens jedoch die Oberkategorie sollte sichtbar bleiben
    • Nur da Anbringen, wo es auch sinnvoll ist

 

  • Diverse Elemente der Navigation
    • Hier kommen nur Punkte rein, deren Einsatz im Haupt- oder Untermenü nicht sinnvoll ist
    • Die Liste, wenn sie im direkten Sichtfeld des Nutzers liegt, möglichst gering halten
      • eine vollständige Liste kann im Footer der Seite eingefügt werden

 

  • Navigation innerhalb der Seiten
    • Sehr lange Texte auf mehrere Seiten verteilen
      • dabei Links auf die vorherige sowie auf die nächste Seite nicht vergessen
      • dem Nutzer die Möglichkeit geben, sich den vollständigen Text ausdrucken zu können
    • Am Ende der Seite einen Anker zum Anfang setzen
    • Lange Texte mit Zwischenüberschriften unterteilen und diese mit einem Anker verlinken
    • Querverweise innerhalb der Website 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.