Wer Ihre Website öffnet, kennt Ihre interne Organisation nicht. Die Person möchte beispielsweise eine passende Leistung finden, den Ablauf verstehen oder eine Reparatur anfragen. Wenn Sie Ihre Website-Navigation planen, beginnen Sie deshalb mit diesen Aufgaben. Erst danach entscheiden Sie, welche Menüpunkte sichtbar sind und wie ein Untermenü auf dem Smartphone aufgeht.
Eine brauchbare Navigation verbindet verständliche Bezeichnungen mit passenden Zielseiten und verlässlicher Bedienung. Dafür gibt es keine magische Zahl von Menüpunkten. Entscheidend ist, ob Besucher aus der Beschriftung ableiten können, wohin ein Weg führt – und dort tatsächlich die erwartete Antwort finden.
1. Besucheraufgaben vor die vorhandene Seitenliste stellen
Sammeln Sie zunächst die wichtigsten Fragen aus Erstgesprächen, E-Mails und Betreuung. Formulieren Sie daraus Aufgaben: „Eine Markise für meine Terrasse auswählen“ ist konkreter als „Informationen suchen“. „Einen Servicetermin anfragen“ unterscheidet sich vom Kauf eines neuen Produkts. Diese Aufgaben benötigen möglicherweise verschiedene Einstiege.
Listen Sie anschließend die vorhandenen Seiten mit Adresse, Inhalt und zuständiger Person auf. Ordnen Sie jeder Aufgabe eine passende Zielseite zu. Bleibt eine Aufgabe ohne Ziel, fehlt möglicherweise Inhalt. Passen mehrere Seiten gleich gut, müssen ihre Rollen geklärt werden. Ein zusätzliches Untermenü löst diese Unklarheit nicht automatisch.
Die geschäftlichen Grundlagen lassen sich bereits im Website-Briefing festhalten. Für die Menüplanung reichen zunächst die tatsächlich angebotenen Leistungen, Zielgruppen und häufigen Anliegen. Schreiben Sie offene Annahmen dazu, statt Vermutungen als Kundenerkenntnisse zu behandeln.
2. Seiten zu nachvollziehbaren Gruppen ordnen
Verteilen Sie die Seiten auf Karten oder in einer einfachen Liste und bilden Sie Gruppen. Fragen Sie bei jeder Gruppe: Welche gemeinsame Aufgabe fasst sie zusammen? Lassen sich ihre Inhalte mit einem verständlichen Oberbegriff beschreiben? Eine Rubrik sollte nicht bloß alles aufnehmen, was anderswo übrig bleibt.
Auch das ergänzende W3C-Muster zur verständlichen Website-Hierarchie empfiehlt, verwandte Informationen zu ordnen und wichtige Kategorien für die Hauptnavigation zu verwenden. Für Ihren Betrieb können Sie daraus einen einfachen Versuch machen: Lassen Sie eine unbeteiligte Person Seiten den vorgeschlagenen Gruppen zuordnen. Unterschiedliche Zuordnungen zeigen Gesprächsbedarf, noch keinen statistisch belastbaren Nutzertest.
Prüfen Sie dann die Tiefe. Wenn Interessenten mehrere fast gleich benannte Ebenen öffnen müssen, bevor eine konkrete Leistung erscheint, hilft eventuell eine übersichtliche Einstiegsseite. Dort lassen sich Unterschiede erklären, für die eine schmale Menüliste zu wenig Platz bietet. Nicht jede einzelne Unterseite braucht einen direkten Platz in der Hauptnavigation.
Fiktives Beispiel: Ein Sonnenschutzbetrieb trennt Neukauf und Service
Der folgende Betrieb ist erfunden. Er plant und montiert Markisen sowie Innenbeschattung und bietet einen Reparaturservice an. Eine erste Seitenliste enthält Produktgruppen, Teamvorstellung, Montagedetails und Wartungshinweise ungeordnet nebeneinander.
Das Team plant stattdessen diese Einstiege:
- Sonnenschutz: Eine Übersicht führt zu Markisen und Innenbeschattung und erklärt die wichtigsten Unterschiede.
- Reparatur & Service: Hier erfahren Besitzer vorhandener Anlagen, welche Arbeiten der Betrieb übernimmt und welche Angaben für eine Anfrage nötig sind.
- So läuft es ab: Beratung, Vorbereitung und Montage werden zusammenhängend erklärt.
- Über uns: Personen und Arbeitsweise stehen getrennt von den Produktdetails.
- Kontakt: Der Weg zur konkreten Anfrage bleibt auffindbar.
Diese fünf Punkte sind eine Lösung für dieses Beispiel, keine Vorgabe für jede Unternehmenswebsite. Im Test soll eine Person mit einer beschädigten Markise den Service finden, ohne zuerst durch den Neukauf zu gehen. Ob sie das schafft, wird beobachtet und nicht aus der schönen Strukturzeichnung abgeleitet.
3. Menüpunkte nach dem erwarteten Inhalt benennen
Lesen Sie die Beschriftungen einmal ohne Seitengestaltung. Können Sie erklären, was hinter jedem Punkt liegt? Interne Abteilungsnamen und kreative Sammelbegriffe sind oft nur dem eigenen Team vertraut. Eine Reparaturseite unter „Technik“ verlangt eine andere Interpretation als unter „Reparatur & Service“.
Wählen Sie kurze, konkrete Bezeichnungen und prüfen Sie sie gegen die tatsächliche Zielseite. „Preise“ sollte nicht zu einem allgemeinen Unternehmensporträt führen. Wenn dort nur die Faktoren eines Angebots erklärt werden, kann eine passendere Beschriftung sinnvoll sein. Bleiben Sie außerdem bei derselben Benennung, wenn dasselbe Ziel an mehreren Stellen erscheint.
Für wiederkehrende Navigation erläutert das W3C die konsistente relative Reihenfolge auf mehreren Seiten. Ein Besucher sollte das Menü nicht bei jeder Unterseite neu lernen müssen. Eine zusätzliche lokale Navigation innerhalb eines Bereichs kann trotzdem sinnvoll sein.
4. Auf dem Smartphone dieselbe Orientierung erhalten
Ein Menü wird nicht allein dadurch mobil brauchbar, dass es hinter einem Symbol verschwindet. Öffnen Sie es auf einem schmalen Bildschirm und prüfen Sie die vollständigen Bezeichnungen, erreichbare Bedienelemente und längere Untermenüs. Lassen sich alle Ziele erreichen, ohne dass ein fixiertes Element sie verdeckt? Ist das Schließen verständlich? Bleibt beim Scrollen klar, welcher Bereich gerade geöffnet ist?
Das W3C-Tutorial zur Menüstruktur beschreibt semantische Listen, einen gekennzeichneten Navigationsbereich und die Markierung der aktuellen Seite. Es empfiehlt zudem eine konsistente Struktur über Bildschirmgrößen hinweg: Sichtbare Einträge behalten Reihenfolge, Wortlaut und Ziel. Die mobile Darstellung darf Inhalte zusammenklappen, sollte aber keine andere Logik erfinden.
5. Links und Aufklappfunktionen eindeutig trennen
Eine häufige Planungsfrage lautet: Öffnet „Leistungen“ eine Übersichtsseite oder ein Untermenü? Legen Sie das ausdrücklich fest. Wenn beides vorgesehen ist, benötigen die beiden Handlungen erkennbare und bedienbare Ziele. Ein kleiner Pfeil darf nicht nur bei zufälligem Darüberfahren mit der Maus funktionieren.
Das aktuelle W3C-Beispiel für aufklappbare Seitennavigation verwendet Schaltflächen zum Ein- und Ausblenden, meldet den Zustand über aria-expanded und beschreibt die Bedienung mit Tabulator, Eingabe- beziehungsweise Leertaste und Escape. Es erklärt auch, weshalb gewöhnliche Seitennavigation nicht automatisch die komplexe ARIA-Rolle eines Anwendungsmenüs benötigt. Das Beispiel ist eine Orientierung; die konkrete Umsetzung muss mit ihren tatsächlichen Browsern und Hilfsmitteln getestet werden.
Prüfen Sie außerdem den sichtbaren Tastaturfokus. Die W3C-Erläuterung zu sichtbarem Fokus beschreibt, warum erkennbar sein muss, welches Element gerade per Tastatur bedient wird. Ein attraktiver Hover-Effekt ersetzt diese Orientierung nicht.
6. Mit konkreten Aufgaben testen und Änderungen dokumentieren
Geben Sie einer Testperson eine Aufgabe, ohne den Menüpunkt vorzusagen: „Sie besitzen bereits eine Anlage und möchten eine Reparatur anfragen.“ Beobachten Sie den ersten gewählten Weg, Rücksprünge und unklare Beschriftungen. Fragen Sie anschließend, was die Person hinter einem missverstandenen Begriff erwartet hatte. So unterscheiden Sie ein Benennungsproblem von fehlendem Inhalt.
Wiederholen Sie die wichtigsten Wege mit Maus, Tastatur und auf dem Smartphone. Halten Sie pro Problem die Ausgangsseite, Schritte und erwartete Funktion fest. Bei technischen Umbauten ist eine getrennte Testumgebung hilfreich; unser Leitfaden zu WordPress-Staging erklärt den Ablauf vor dem Livegang.
Diese Prüfung verbessert die Entscheidungsgrundlage, ist aber kein vollständiger Nachweis von Barrierefreiheit oder rechtlicher Konformität. Wenn Sie Seitenstruktur, Gestaltung und Bedienung gemeinsam planen möchten, finden Sie bei KIM Systems den Einstieg über unsere Leistung Webseiten. Ein sinnvoller erster Schritt ist eine überschaubare Aufgabenliste mit dazu passenden Seiten und klaren Menübezeichnungen.