Zum Inhalt springen
webtissimoffHandwerk fürs Web

Scorrevole · III. Bauen

Menüs für Websites: Übersicht schafft Freunde

Aktualisiert am 24. September 20263 Min. Lesezeit

Die Navigation ist der Teil einer Website, den Besucher am häufigsten benutzen und am seltensten bewusst wahrnehmen. Man bemerkt sie erst, wenn sie nicht funktioniert.

StartAngebotPreiseRatgeberÜber unsKontaktzwei Ebenen
Flach statt tief: Jede Seite ist von der Startseite aus in wenigen Schritten erreichbar.

T. 1Erst die Inhalte ordnen, dann das Menü

Ein Menü ist das Inhaltsverzeichnis einer Website. Es lässt sich nur gut bauen, wenn die Inhalte vorher geordnet sind. Bewährt hat sich das Kartensortieren: Jede geplante Seite kommt auf eine Karte, dann werden die Karten zu Gruppen sortiert – am besten nicht nur vom Betreiber, sondern auch von ein paar Menschen aus der Zielgruppe. Oft zeigt sich dabei, dass die interne Sicht („Abteilung Vertrieb“, „Produktlinie B“) nicht der Sicht der Besucher entspricht.

T. 2Wie viele Menüpunkte?

Eine feste Zahl gibt es nicht, aber eine Tendenz: Je weniger Hauptpunkte, desto schneller die Orientierung. Fünf bis sieben Einträge im Hauptmenü sind für viele Websites eine gute Größe. Wichtiger als die Zahl ist die Trennschärfe. Wenn ein Besucher bei einer Frage zwei Menüpunkte für möglich hält, ist die Gliederung unscharf.

T. 3Flach statt tief

Jede zusätzliche Ebene ist ein weiterer Klick und eine weitere Entscheidung. Eine flache Struktur mit wenigen Ebenen ist deshalb meist besser als eine tiefe. Für kleinere Websites genügen oft zwei Ebenen: Hauptbereiche und die Seiten darin. Aufklappmenüs mit drei Ebenen sind auf Mobilgeräten mühsam und werden auf dem Desktop leicht verfehlt, wenn die Maus den Bereich verlässt.

T. 4Beschriftungen, die jeder versteht

  • Wörter der Besucher verwenden. „Preise“ statt „Konditionen“, „Kontakt“ statt „Get in touch“.
  • Kurz bleiben. Ein bis zwei Wörter pro Menüpunkt.
  • Nichts Kreatives. „Unsere Welt“ oder „Entdecken“ sagen nicht, was sich dahinter verbirgt.
  • Einheitlich formulieren. Entweder alles Substantive oder alles Verben, nicht gemischt.

T. 5Mobil: das Menü hinter dem Symbol

Auf schmalen Bildschirmen verschwindet die Navigation meist hinter einem Symbol aus drei Strichen. Das spart Platz, versteckt aber die Orientierung. Wenn es nur vier oder fünf Hauptpunkte gibt, passen sie oft auch sichtbar als Zeile oder in zwei Zeilen. Wer ein aufklappbares Menü baut, sollte es auch mit der Tastatur bedienbar machen und das Symbol mit einem Text wie „Menü“ beschriften.

T. 6Der Fuß als zweite Navigation

Viele Besucher scrollen ans Ende einer Seite, wenn sie etwas suchen. Der Fußbereich ist der richtige Ort für Kontakt, Impressum, Datenschutz und eine kompakte Übersicht der Bereiche. Er muss das Hauptmenü nicht wiederholen, darf es aber ergänzen, etwa um Seiten, die für das Hauptmenü zu speziell sind.

T. 7Links im Text

Die beste Navigation steht oft gar nicht im Menü, sondern im Text: ein Verweis an der Stelle, an der sich die Frage stellt. Diese internen Links helfen Besuchern und Suchmaschinen gleichermaßen, wie der Beitrag Linkbuilding ohne Tricks erläutert.

Die technischen Bausteine – nav, Listen, Links – beschreibt die HTML-Tag-Liste. Wie Menüs sich in das Gesamtbild einer Seite fügen, zeigt der Beitrag Gestaltung von Webseiten. Ein Muster für barrierefreie Navigationen stellt die Web Accessibility Initiative vor.

Passt dazu