Navigationsmenü einer Website: Seiten organisieren

9 Min. Lesezeit

Das Navigationsmenü einer Website sollte Ihrem Besucher bei der Auswahl eines Ziels helfen und nicht Ihre interne Organisation preisgeben. Beginnen Sie für eine Service-Site mit Anfragen: Identifizieren Sie einen Service, überprüfen Sie einen Interventionsbereich, verstehen Sie ein Konzept oder bewerben Sie sich. Anschließend können Sie die Menüseiten auswählen, die Abschnitte benennen und die Route sowohl mobil als auch über die Tastatur überprüfen.

Ein nützliches Menü vereint verständliche Titel, eine schlüssige Baumstruktur und benutzerfreundliche Befehle. Validieren Sie Ziele mit konkreten Aufgaben, ohne eine universelle Regel für die Anzahl der Klicks festzulegen.

Beginnen Sie mit Anfragen, nicht mit dem Organigramm

Machen Sie vor der Gestaltung des Menüs eine Bestandsaufnahme der Seiten und Bedürfnisse. Notieren Sie für jedes Ziel seine Adresse (falls vorhanden), seinen tatsächlichen Inhalt, die Nachfrage, auf die es reagiert, die betroffene Öffentlichkeit und die Person, die seine Beschreibung bestätigen kann. Erkennen Sie Duplikate, veraltete Seiten und noch fehlende Ziele.

Sammeln Sie anschließend die an die Vertriebs-, Technik- und Recruiting-Teams gerichteten Fragen, ohne sie in Statistiken umzuwandeln. Die von Ihren Besuchern verwendete Formulierung ist bei der Benennung eines Abschnitts nützlicher als interne Abkürzungen. Unterscheiden Sie zwischen einer Dienstleistungsanfrage, einer Dokumentenrecherche und einem Antrag: Sie erfordern nicht den gleichen Prozess.

Klassifizieren Sie abschließend die Seiten nach ihrer Rolle: Haupteintrag, Abschnittsseite, Detail- oder Zusatzressource. Eine wichtige Seite muss nicht unbedingt ihren Platz im globalen Menü haben. Sie muss jedoch von einer relevanten Seite aus zugänglich sein: Google empfiehlt, dass jede als wichtig erachtete Seite einen Link von mindestens einer anderen Seite der Website erhält ^[17].

Organisieren Sie das Website-Navigationsmenü

Das folgende Beispiel ist fiktiv: Ein Ingenieurbüro stellt seine Leistungen, seine Branchen, seine Ressourcen und seine Rekrutierungsmöglichkeiten vor. Dies ist kein Client von 4SYSTEM. Wir schlagen diese Baumstruktur als Arbeitshypothese vor:

• Dienstleistungen : Strukturdiagnose, Bewehrungsstudien, Unterstützung beim Projektmanagement.
• Sektoren : Dienstleistungsgebäude, Industriestandorte, öffentliche Einrichtungen.
• Ressourcen : technische Leitfäden, Strukturglossar.
• Das Büro : Arbeitsweise, Team.
• Rekrutierung : Stellenangebote, Initiativbewerbung.
• Kontakt : Präsentieren Sie ein Projekt oder stellen Sie eine Frage.

Taxonomie ist die Logik der Klassifizierung: Die Dienste beschreiben eine Intervention; Die Sektoren beschreiben den Kontext, in dem es stattfindet. „Lösungen“ würden diese Unterscheidung verwischen. Eine Abschnittsseite sollte erklären, was sie zusammenfasst, und Sie zu den Details führen, anstatt das Untermenü ohne Kontext wiederzugeben.

Fügen Sie eine Ebene nur hinzu, wenn sie einer für den Besucher nützlichen Unterscheidung entspricht. Wenn ein Zweig schwer zu verstehen ist, überprüfen Sie seine Gruppierungen, bevor Sie alles auf die erste Ebene zurücksetzen. Bei einer guten Schlichtung geht es darum, die Entscheidungen zu verstehen, nicht um eine universelle Klickschwelle.

Titel, die ein Ziel ankündigen

Ein Titel muss es ermöglichen, die nächste Seite vorwegzunehmen. Google empfiehlt Linktext, der beschreibend, einigermaßen prägnant und sowohl für die Start- als auch für die Zielseite relevant ist ^[17]. Lesen Sie Ihre Formulierungen allein: Wenn ihre Bedeutung außerhalb des Modells verschwindet, formulieren Sie sie neu.

Hier ist ein fertiges Diagnoseraster für das fiktive Büro. Vorschläge sollen getestet werden, nicht beobachtete Ergebnisse.

Behalten Sie zwischen vergleichbaren Abschnitten die gleiche grammatikalische Form bei. Vermeiden Sie Akronyme ohne Erklärung und Titel, die so lang sind, dass die Navigation auf Mobilgeräten schwierig wird. Der Inhalt muss halten, was der Wortlaut verspricht: Die Umbenennung von „Dokumentation“ in „Technische Leitfäden“ erfordert eine Prüfung der tatsächlich angebotenen Dokumente.

Trennen Sie Links von Untermenübefehlen

Für dieses Modell trennen wir die Ziele und die Befehle. „Dienste“ kann ein Link zur Abschnittsseite sein; Eine nahegelegene Schaltfläche mit der Bezeichnung „Dienste anzeigen“ steuert das Untermenü. Sein zugänglicher Name und sein Zustand sollen es ermöglichen zu verstehen, ob es offen oder geschlossen ist. Wir berücksichtigen hier die Linknavigation, nicht das Verhalten im Anwendungsmenü.

Ziele verwenden HTML-Links a mit einem Attribut href enthält eine echte Adresse. Dies ist das Format, das Google im Allgemeinen untersuchen kann; Ein Skriptschritt allein überschreibt diesen Link nicht ^[17].

Das WAI erfordert, dass Dropdown-Untermenüs mit Maus und Tastatur nutzbar sind ^[14]. Unser Kontrollszenario überprüft daher in dieser Reihenfolge:

• Navigieren Sie mit der Tabulatortaste zu jedem Link und jeder Schaltfläche und sehen Sie den Fokus.
• Öffnen Sie das Untermenü über die Tastatur und greifen Sie auf seine Ziele zu;
• Schließen Sie es mit Esc oder dem Schließbefehl.
• Finden Sie den Auslöseknopf nach dem Schließen, ohne den Fokus zu verlieren;
• Rückkehr zur vorherigen Seite ohne inkonsistenten Menüstatus.

Testen Sie auf Mobilgeräten auch das Öffnen, Scrollen und Schließen per Berührung. Kein Ziel sollte vom Überflug abhängig sein. Stellen Sie sicher, dass versteckte Links nicht über die Tastatur navigierbar bleiben. Wenn das bewegliche Bedienfeld die Seite verbirgt, prüfen Sie außerdem, dass der Fokus nicht auf unsichtbare Elemente dahinter verschoben wird. Bei der Maus sollte das Untermenü nicht sofort verschwinden, wenn der Mauszeiger seinen anklickbaren Bereich verlässt ^[14].

Suchen Sie die Seite und kehren Sie zurück

Das Hauptmenü dient zur Auswahl eines großen Ziels. Die Breadcrumbs lokalisieren die Seite in einer Hierarchie: zum Beispiel „Home > Services > Bewehrungsstudien“. Es gibt nicht unbedingt zuvor besuchte Seiten wieder. Diese weitere Funktion übernimmt der Zurück-Button des Browsers.

Kontextuelle Links begleiten eine Frage, die sich beim Lesen stellt: von einem Dienst aus, einen Ratgeber zu Voruntersuchungen konsultieren oder das Kontaktformular öffnen. Um diese Passagen zu organisieren, konsultieren Sie unseren Leitfaden zu interne Verlinkung zwischen nützlichen Seiten.

Melden Sie auch die aktive Seite in der Navigation. Das WAI hebt den Vorteil eindeutiger Menüs und leicht erkennbarer Zustände hervor, insbesondere der aktuellen Seite ^[14]. Die Breadcrumbs ersetzen daher weder das Menü noch die im Inhalt platzierten Links.

Beobachten Sie in den Tests, wie eine Person von einem Detail zu ihrem Abschnitt zurückkehrt und dann den Sektor wechselt. Ein kurzer, aber zweideutiger Weg verdient eine Korrektur; ein klar benannter zusätzlicher Schritt kann weiterhin relevant bleiben.

Ein aufgabenbasiertes Testprotokoll

Bereiten Sie eine identifizierbare Version der Baumstruktur und anschließend ein interaktives Modell vor. Definieren Sie vor der Sitzung das erwartete Ziel und was beweist, dass es der Nachfrage entspricht. Wählen Sie Personen aus, die den Zielgruppen entsprechen. Variieren Sie die Bedingungen zwischen Computer, Mobiltelefon und Tastatur, ohne davon auszugehen, dass ein Test alle Verwendungszwecke abdeckt.

Hier sind Anleitungen, die für das fiktive Büro verwendet werden können:

• „Sie bereiten die Verstärkung eines bestehenden Gebäudes vor. Finden Sie den richtigen Eingriff und erklären Sie, was er umfasst.“ Ziel: Verstärkungsstudien.
• „Sie vertreten einen Industriebetreiber. Wo kann überprüft werden, ob das Amt in Ihrem Kontext eingreift? » Ziel: Industriestandorte.
• „Sie suchen nach der Definition eines Strukturbegriffs. Wo kann man ihn nachschlagen? » Ziel: Strukturglossar.
• „Sie möchten sich ohne entsprechendes Angebot bewerben. Wo finde ich die Anleitung? » Ziel: Initiativbewerbung.

Nur die Anweisung lesen, nicht das Ziel. Bitten Sie die Person, zu sagen, was sie von ihrer ersten Wahl erwartet. Beobachten Sie dann die Route, ohne den richtigen Abschnitt anzugeben. Notieren Sie den gewählten Titel, Bedenken, Rückmeldungen, das erreichte Ziel und eine kurze Begründung Ihrer Argumentation.

Bitten Sie bei Ihrer Ankunft darum, die Informationen vorzulegen, die Ihren Anforderungen entsprechen. Ein Klick auf die gewünschte Seite reicht nicht aus, wenn deren Inhalt die Auswahl nicht bestätigt. Beenden Sie mit einer Rückkehr zum Abschnitt und einem anschließenden Zielwechsel. Notieren Sie technische Vorfälle getrennt von Klassifizierungsmissverständnissen.

Entscheiden Sie über Korrekturen und bewahren Sie den Korrekturabzug auf

Beheben Sie zunächst defekte Ziele und unbrauchbare Befehle. Befassen Sie sich dann mit Namensmehrdeutigkeiten und dann mit Gruppierungen. Wenn eine Formulierung verstanden wird, aber zu unangemessenen Inhalten führt, korrigieren Sie die Seite und nicht das Menü. Ändern Sie nicht alle Parameter gleichzeitig: Sie verlieren sonst die Fähigkeit, den neuen Test zu interpretieren.

Validierungsblatt erstellt, nicht getestet: Aufgabe „Verstärkung eines Gebäudes“; Ziel „Verstärkungsstudien“; vorgeschlagener Eintrag „Dienstleistungen“; Risiko der Untersuchung einer „Verwechslung mit Sektoren“; erwarteter Nachweis „Route notiert und relevante Informationen auf der Seite angegeben“.

Nach der Korrektur wiederholen Sie die Aufgabe und die technischen Prüfungen. Bewahren Sie die Version des Modells, die anonymisierten Notizen, die begründete Entscheidung und eine Erfassung des korrigierten Zustands auf. Für die Validierung sind ein klares Ziel und brauchbares Feedback erforderlich, kein positiver Gesamteindruck.

Dieser Umfang stellt keine behördliche Prüfung der Website dar. Das WAI-Tutorial bietet Best Practices ^[14] ; Formulare, Dokumente und andere Bestandteile müssen noch gemäß den für Ihre Organisation geltenden Standards geprüft werden.

Häufige Fragen

Kann eine Dienstleistung in mehreren Sektoren vorkommen?

Ja, wenn jeder Link zur gleichen Serviceseite führt und der sektorale Kontext explizit bleibt. Stellen Sie auf der Seite „Industriestandorte“ dar, warum dieser Eingriff relevant sein könnte, und verlinken Sie dann auf seine Beschreibung. Halten Sie eine stabile Hauptbefestigung für die Semmelbrösel bereit. Vermeiden Sie die Erstellung mehrerer identischer Seiten, nur um alle Menüzweige zu replizieren.

Wie verarbeite ich eine auf einer anderen Plattform gehostete Personalbeschaffung?

Führen Sie auf Ihrer Website einen Eintrag „Rekrutierung“, der die Berufe und Bewerbungsverfahren erläutert. Benennen Sie auf dieser Seite den externen Link entsprechend seiner Verwendung, zum Beispiel „Konsultieren Sie die Angebote auf der Rekrutierungsplattform“. Melden Sie die Site-Änderung. Überprüfen Sie auch die Rückkehr zu Ihrer Website und die vorgeschlagene Lösung, falls die Plattform nicht verfügbar ist.

Ist ein in JavaScript generiertes Menü akzeptabel?

Ja: Google gibt an, dass dynamisch eingefügte Links crawlbar bleiben, wenn sie das erwartete Markup, einschließlich eines Elements, verwenden a mit einem Attribut href ^[17]. Eine Garantie für deren Indizierung oder Verwendbarkeit ist hierdurch nicht gegeben. Überprüfen Sie deren Vorhandensein im gerenderten HTML und testen Sie dann separat das Öffnen, Schließen und die Tastaturnavigation in der Version, die den Besuchern tatsächlich angezeigt wird.

Wechseln Sie von der Baumstruktur zur Steuerung

Nehmen Sie eine vorrangige Aufgabe und bereiten Sie deren Form vor: erwartetes Ziel, vorgeschlagener Titel, Testbedingungen und Validierungsnachweis. Gehen Sie dann das Modell durch, ohne seine Klassifizierung zu erläutern. Korrigieren Sie das erste identifizierte Hindernis und spielen Sie dann das Szenario erneut ab.

Um Ihre Baumstruktur und die Einschränkungen ihrer Implementierung untersuchen zu lassen, konsultieren Sie unsere Webdienste, SEO und digitales Marketing und besprechen Sie mit 4SYSTEM den Umfang Ihres Projekts.

Quellen

• Menus Tutorial | Web Accessibility Initiative (WAI) | W3C (abgerufen 2026-10-08)
• SEO Link Best Practices for Google | Google Search Central | Documentation | Google for Developers (abgerufen 2026-10-08)