Website-Navigation gestalten: Menüs, die Besucher verstehen

Eine gute Navigation merkt man nicht. Besucher finden, was sie suchen, ohne über das Menü nachzudenken. Dafür braucht es eine Struktur, die aus den Aufgaben der Besucher entsteht, Menüpunkte in ihrer Sprache und eine Darstellung, die auf jedem Gerät und mit jeder Eingabemethode funktioniert. Dieser Artikel führt von der Inhaltsinventur bis zum fertigen mobilen Menü. Die Prinzipien dahinter, etwa Hierarchie und Konsistenz, stehen in den Grundlagen guter Gestaltung.

Erst die Struktur, dann das Menü

Viele Menüs spiegeln das Organigramm: Abteilungen, interne Projektnamen, historisch gewachsene Rubriken. Besucher kennen diese Struktur nicht und suchen anders. Der bessere Weg beginnt mit drei Schritten:

1. Inhaltsinventur: Alle vorhandenen und geplanten Seiten in einer Liste sammeln, mit Thema und Zweck. Eine Tabellenkalkulation reicht dafür völlig.
2. Aufgaben der Besucher notieren: Was wollen Menschen auf der Website erledigen? Preise ansehen, einen Ratgeber lesen, Kontakt aufnehmen. Die häufigsten Aufgaben bestimmen die Hauptpunkte.
3. Gruppieren und testen: Seiten zu Gruppen zusammenfassen. Eine bewährte Methode ist das Card Sorting: Testpersonen sortieren Karten mit Seitentiteln in Gruppen, die ihnen logisch erscheinen. Umgekehrt prüft ein Tree Test, ob Menschen in einer fertigen Struktur die richtige Stelle für eine Aufgabe finden.

Das Ergebnis ist eine Sitemap, also ein Baum aus Haupt- und Unterseiten. Erst danach lohnt es sich, über die Gestaltung des Menüs nachzudenken.

Wie viele Menüpunkte?

Oft wird die Zahl sieben plus minus zwei als Regel für Menüs genannt. Sie stammt aus einem psychologischen Aufsatz über das Kurzzeitgedächtnis und lässt sich auf Menüs nur bedingt übertragen, denn Besucher müssen sich Menüpunkte nicht merken, sie sehen sie ja. Hilfreicher ist das Hick-Gesetz: Je mehr gleichwertige Optionen zur Wahl stehen, desto länger dauert die Entscheidung.

Für die Praxis gilt: so wenige Hauptpunkte wie möglich, so viele wie nötig. Fünf bis sieben sind ein guter Richtwert. Wenn es deutlich mehr werden, ist das meist ein Zeichen, dass Gruppen fehlen. Kontakt, Impressum und Datenschutz müssen nicht ins Hauptmenü, solange sie leicht zu finden sind, etwa im Footer.

Menüpunkte benennen

Die Bezeichnung entscheidet, ob Besucher einen Punkt anklicken. Gute Menüpunkte sind:

• in der Sprache der Besucher: “Preise” statt “Konditionen”, “Ratgeber” statt “Wissenswelt”,
• kurz: ein bis zwei Wörter, damit sie in eine Zeile passen,
• unterscheidbar: “Leistungen” und “Angebote” nebeneinander lassen raten, was wo steht,
• vorne aussagekräftig: Wer Menüpunkte überfliegt, liest oft nur das erste Wort.

Eine einfache Probe: Lesen Sie jeden Menüpunkt einzeln vor und fragen Sie eine unbeteiligte Person, was sie dahinter erwartet. Weicht die Antwort stark ab, ist die Bezeichnung unklar.

Menütypen im Vergleich

Navigation auf dem Smartphone

Auf schmalen Bildschirmen hat sich das Menü hinter einer Schaltfläche durchgesetzt, meist als drei waagerechte Striche dargestellt und Hamburger-Menü genannt. Damit es funktioniert:

• beschriften: Das Symbol allein verstehen nicht alle. Ein sichtbares Wort wie “Menü” daneben hilft.
• die wichtigste Aktion zusätzlich zeigen: Telefon, Anfrage oder Warenkorb sollten nicht im Menü verschwinden.
• Untermenüs aufklappen statt verschachteln: Ein Pfeil neben dem Hauptpunkt öffnet die Unterpunkte, der Hauptpunkt selbst führt zur Übersichtsseite.
• schließbar machen: mit einem deutlichen Schließen-Knopf, der Escape-Taste und durch Tippen außerhalb.
• Tippflächen groß genug: Menüpunkte untereinander brauchen ausreichend Höhe und Abstand.

Mehr zur Anpassung an verschiedene Bildschirmgrößen erklärt der Ratgeber Responsive Webdesign.

Orientierung über das Menü hinaus

Das Hauptmenü ist nur ein Teil der Navigation. Besucher brauchen auch Antworten auf die Fragen “Wo bin ich?” und “Wie komme ich zurück?”.

• Aktuelle Seite hervorheben: Der Menüpunkt der aktuellen Rubrik ist optisch markiert, etwa durch Unterstreichung oder Farbe.
• Breadcrumbs: Eine Pfadangabe wie “Startseite › Ratgeber › Navigation” zeigt die Position in der Struktur und erleichtert den Sprung nach oben.
• Footer-Navigation: Am Seitenende finden Besucher wichtige Links, rechtliche Seiten und Kontaktwege.
• Suche: Ab einer gewissen Zahl von Seiten ist eine Suchfunktion eine wichtige Ergänzung, ersetzt aber keine gute Struktur.
• Interne Links im Text: Verweise auf verwandte Seiten führen Besucher weiter, ohne dass sie zurück ins Menü müssen.

Barrierefreie Navigation

Eine Navigation, die nur mit der Maus funktioniert, schließt Menschen aus. Diese Punkte gehören zum Standard:

• Semantik: Das Menü steht in einem nav-Element, die Punkte sind Listen mit echten Links.
• Sprunglink: Ein Link “Zum Inhalt springen” am Seitenanfang erlaubt Tastaturnutzern, die Navigation zu überspringen.
• Tastaturbedienung: Alle Punkte und Untermenüs sind mit Tab, Enter und Escape erreichbar, der Fokus ist jederzeit sichtbar.
• Zustände für Screenreader: Aufklappbare Schaltflächen melden mit aria-expanded, ob sie offen sind. Die aktuelle Seite wird mit aria-current="page" gekennzeichnet.
• Gleiche Reihenfolge überall: Die WCAG verlangen, dass wiederkehrende Navigation auf allen Seiten in derselben Reihenfolge erscheint.

Weitere Anforderungen an zugängliche Websites fasst der Ratgeber Barrierefreies Webdesign zusammen.

Navigation und Suchmaschinen

Die Navigation ist auch für Suchmaschinen ein wichtiges Signal. Seiten, die aus dem Hauptmenü verlinkt sind, gelten als zentral, tief verschachtelte Seiten werden seltener gefunden. Damit Suchmaschinen die Struktur erkennen, sollten Menüpunkte echte Links mit Zieladresse sein, nicht nur Schaltflächen, die per Skript eine Seite laden. Klare, beschreibende Linktexte helfen Besuchern und Suchmaschinen gleichermaßen. Breadcrumbs lassen sich zusätzlich mit strukturierten Daten auszeichnen, damit die Pfadangabe in Suchergebnissen erscheinen kann.

Bei einem Umbau der Navigation ändern sich oft auch Adressen von Seiten. Dann gehören dauerhafte Weiterleitungen von den alten auf die neuen Adressen dazu, damit Lesezeichen und bestehende Links weiter funktionieren.

Häufige Fehler

• Interne Begriffe statt der Worte, mit denen Besucher suchen.
• Zu tiefe Verschachtelung: Inhalte, die erst nach drei Ebenen Untermenü erreichbar sind, werden selten gefunden.
• Menüpunkte, die nur Untermenüs öffnen, ohne dass es eine Übersichtsseite gibt, und Besucher nicht wissen, wohin ein Klick führt.
• Wechselnde Navigation: Auf jeder Unterseite sieht das Menü etwas anders aus.
• Animationen, die bremsen: Menüs, die langsam einfliegen, wirken beim zweiten Öffnen nur noch träge.
• Kein Weg zurück: Unterseiten ohne Breadcrumbs und ohne Verweis auf die übergeordnete Seite.

Checkliste Navigation

Eine Navigation ist nie ganz fertig. Mit jeder neuen Rubrik lohnt ein kurzer Blick, ob die Struktur noch trägt. Wer regelmäßig prüft, welche Menüpunkte genutzt werden und welche nicht, erkennt früh, wo Besucher den Faden verlieren.