Seitenstruktur und Navigation der Website planen, bevor das Design beginnt
So planen Sie Seitenstruktur und Navigation vor dem Design: Seitenliste, Menügruppen, Ebenen und eine Reihenfolge, die WCAG 3.2.3 erfüllt.
- Nº
- 15
- Veröffentlicht
- Lesezeit
- 10 Min.
- Kategorie
- Notes
- Geschrieben von
- Revylio
Seitenstruktur und Navigation der Website planen: erst die Seitenliste, dann das Design
Wer Seitenstruktur und Navigation der Website planen will, legt vor dem ersten Entwurf drei Dinge fest. Erstens, welche Seiten es gibt. Zweitens, wie diese Seiten zu wenigen Menüpunkten gebündelt werden. Drittens, in welcher Reihenfolge die Menüpunkte auf jeder Seite erscheinen. Erst danach entsteht das Design.
Seitenstruktur ist der interne Aufbau einer Website. Gemeint ist, aus welchen einzelnen Seiten der Auftritt besteht und wie diese Seiten geordnet und miteinander verlinkt sind. Website-Navigation beschreibt, wie sich Besucher von einer Seite zur anderen bewegen und Inhalte finden.
Die Reihenfolge hat einen Grund. Dieselbe Hierarchie bestimmt drei Dinge zugleich:
- die Barrierefreiheit, denn WCAG 2.1 verlangt auf Stufe AA eine gleichbleibende Reihenfolge wiederholter Navigation,
- die Auffindbarkeit, denn Google findet laut eigener Dokumentation die überwiegende Mehrheit neuer Seiten über Links,
- die Pflege nach dem Launch, denn neue Inhalte brauchen einen festen Platz im Menü.
Ein Design, das vor der Struktur entsteht, muss später oft umgebaut werden, sobald die tatsächliche Seitenzahl feststeht. Ob für Ihre Website ein kompletter Neuaufbau ansteht, klärt unser Beitrag dazu, wann sich ein Website-Relaunch lohnt. Dieser Leitfaden setzt einen Schritt früher an: bei der Liste der Seiten und ihrer Ordnung.
Welche Seiten eine Firmenwebsite braucht: Ziel, Besuchergruppen und Seitenliste
Welche Seiten eine Firmenwebsite braucht, ergibt sich aus ihrem Ziel und ihren Besuchergruppen, nicht aus der alten Menüleiste. Halten Sie zuerst in einem Satz fest, was die Website leisten soll, etwa Anfragen gewinnen oder Bewerbungen auslösen. Danach legen Sie fest, wer die Website besucht.
Für die Besuchergruppen hilft ein Werkzeug aus dem UX-Design. Personas sind fiktive Steckbriefe einer Nutzergruppe mit Annahmen über deren Ziele und Fragen. Ein Interessent, ein Bestandskunde und ein Bewerber suchen auf derselben Website unterschiedliche Seiten. Jede Persona liefert so einen Teil der Seitenliste.
Für die Seitenliste einer Firmenwebsite bewähren sich vier Gruppen:
- die Startseite als Einstieg in alle Bereiche,
- Angebotsseiten für Leistungen oder Produkte,
- Vertrauensseiten wie Unternehmen, Referenzen und Karriere,
- Service- und Rechtsseiten wie Kontakt, Anfahrt, Impressum und Datenschutzerklärung.
Rechtsseiten wie Impressum, AGB und Datenschutzerklärung stehen laut Wix meist in der Fußzeile, nicht im Hauptmenü. Schreiben Sie jede geplante Seite mit einem Satz zu ihrem Zweck in eine Liste. Seiten, für die Ihnen kein Zweck einfällt, gehören nicht in die neue Struktur.
Seiten zu Menüpunkten bündeln: höchstens sechs oder sieben Hauptkategorien
Die Seitenliste wird zur Navigation, indem Sie verwandte Seiten zu Gruppen bündeln. Jede Gruppe wird ein Punkt der ersten Menüebene, die zugehörigen Seiten liegen darunter. Wix empfiehlt, das Menü so klein wie möglich zu halten, mit höchstens sechs oder sieben Kategorien.
Ein kleines Menü hat einen handfesten Grund. Laut moinAI zeigte eine Untersuchung, dass bis zu 50 % der Internetnutzer ein Standardmenü nicht richtig nutzen können. Jeder zusätzliche Hauptpunkt erhöht die Auswahl, die ein Besucher treffen muss.
Die Zahl der Ebenen bestimmt, welche Menüform später passt:
- Ein herkömmliches Aufklappmenü zeigt laut moinAI meist eine oder zwei Ebenen von Links.
- Ein Mega-Menü kann mehrere Ebenen von Links und Unterkategorien zugleich anzeigen.
Benennen Sie jede Gruppe so, wie Ihre Besucher denken, nicht wie Ihre Abteilungen heißen. Wix schreibt, dass ein beschreibendes Menü auch Google und anderen Suchmaschinen vermittelt, worum es auf der Website geht. Ein Blatt mit Pfeilen von der Startseite bis zur Anfrage reicht als erster Test, ob jeder Weg kurz und eindeutig ist.
Navigationsarten im Vergleich: Kopfzeile, Aufklappmenü, Hamburger-Menü, Fußzeile und Breadcrumbs
Die Navigationsart wählen Sie erst, wenn die Menügruppen feststehen, denn sie muss zur Zahl der Ebenen passen. Eine Website nutzt in der Regel mehrere Formen zugleich, etwa eine Leiste in der Kopfzeile, eine Fußzeile und Breadcrumbs. Die folgende Tabelle ordnet die gängigen Formen nach Ort und Eignung.
| Navigationsart | Typischer Ort | Eignung laut Quellen |
|---|---|---|
| Horizontale Leiste | Kopfzeile | Älteste und daher allgemein bekannte Form; laut moinAI der am häufigsten verwendete Typ |
| Dropdown-Menü (Aufklappmenü) | Unter einem Hauptmenüpunkt | Vertikale Navigationsart; zeigt laut moinAI meist eine oder zwei Ebenen |
| Mega-Menü | Unter jeder Oberkategorie der Kopfzeile | Zeigt mehrere Ebenen von Links und Unterkategorien zugleich |
| Hamburger-Menü | Symbol aus drei gestapelten Linien | Weit verbreitet, besonders im mobilen Webdesign |
| Seitenleiste | Linker oder rechter Rand | Laut Wix weniger verbreitet und daher gewöhnungsbedürftig |
| Fußzeile | Seitenende | Meist Zusatzinformationen wie Impressum, AGB und Datenschutzerklärung |
| Breadcrumbs | Oben über dem Inhalt | Zeigen die aktuelle Position; höhere Ebenen links, niedrigere rechts |
Für mobile Ansichten ist das Hamburger-Menü laut moinAI besonders beliebt. Hierarchische Navigation zeigt moinAI am Beispiel der New York Times: Nach dem Klick auf eine Kategorie im Hauptmenü wechselt das Menü zu den Punkten dieser Kategorie. Breadcrumbs ergänzen jede dieser Formen, weil sie die Position auf Unterseiten sichtbar machen.
Beispiel: Seitenstruktur für einen Handwerksbetrieb mit drei Leistungen
Ein durchgerechnetes Beispiel zeigt, wie aus Seitenliste und Menügruppen eine fertige Navigation wird. Angenommen sei ein Elektrobetrieb mit drei Leistungen, der Kunden gewinnen und Fachkräfte einstellen will. Die Besuchergruppen sind Privatkunde, Hausverwaltung und Bewerber.
Die Hauptnavigation in der Kopfzeile hat fünf Punkte und liegt damit in der Spanne, die Wix empfiehlt:
- Leistungen, mit den Unterseiten Elektroinstallation, Photovoltaik und Smart Home
- Referenzen
- Unternehmen
- Karriere
- Kontakt, mit Anfahrt auf derselben Seite
Die Fußzeile enthält Impressum und Datenschutzerklärung. Das Logo verlinkt auf die Startseite. Wix nennt einen fehlenden Startseiten-Link am Logo einen häufigen und leicht vermeidbaren Fehler.
Auf jeder Leistungsseite zeigt eine Breadcrumb-Navigation den Pfad, zum Beispiel Startseite > Leistungen > Photovoltaik. Die Adresse folgt derselben Logik: /leistungen/photovoltaik. Google schreibt dazu, dass Keywords im URL-Pfad allein kaum Auswirkungen haben, außer dass sie in den Navigationspfaden erscheinen. Der Pfad dient also vor allem der Orientierung.
Die Bezeichnungen bleiben wörtlich. Wix weist darauf hin, dass beschreibende Menüpunkte Besuchern und Suchmaschinen zeigen, worum es auf einer Website geht. „Leistungen“ sagt mehr als „Was wir können“, und „Karriere“ mehr als „Werde Teil von uns“. Die Struktur hat zwei Ebenen und lässt Platz für weitere Leistungen unter „Leistungen“.
Konsistente Navigation nach WCAG 2.1, Erfolgskriterium 3.2.3 (Stufe AA)
Das Erfolgskriterium 3.2.3 „Consistent Navigation“ verlangt auf Stufe AA, dass wiederholte Navigation auf allen Seiten in derselben relativen Reihenfolge erscheint. Das Verständnisdokument des W3C zu Kriterium 3.2.3 formuliert es so: Navigationsmechanismen, die sich innerhalb einer Gruppe von Seiten wiederholen, stehen jedes Mal in derselben relativen Reihenfolge, sofern der Nutzer keine Änderung auslöst.
Zwei Begriffe aus dem Kriterium sind wichtig. Eine Gruppe von Webseiten ist eine Sammlung von Seiten mit gemeinsamem Zweck, die von derselben Organisation stammen. Dieselbe relative Reihenfolge heißt: gleiche Position im Verhältnis zu den anderen Punkten, auch wenn Punkte eingefügt oder entfernt werden.
Das W3C begründet die Regel mit konkreten Nutzergruppen:
- Menschen mit Sehbehinderung, die eine Bildschirmlupe nutzen, orientieren sich an visuellen Hinweisen und Seitengrenzen.
- Blinde Menschen, die Inhalte nacheinander durchgehen, profitieren von einer gleichbleibenden Position im Quelltext.
- Menschen mit kognitiven Einschränkungen finden wiederkehrende Elemente schneller.
Untermenüs und sekundäre Navigation bleiben ausdrücklich erlaubt. Als Fehler dokumentiert das W3C dagegen Navigationslinks, die auf verschiedenen Seiten in unterschiedlicher Reihenfolge stehen (F66). Bei Svennis vergleichen wir im Relaunch die Reihenfolge der Hauptnavigation in jeder Seitenvorlage einzeln, nicht nur auf der Startseite. Abweichungen entstehen nach unserer Erfahrung meist in Sondervorlagen wie Karriere- oder Aktionsseiten. Was wir darüber hinaus prüfen, beschreibt unser Beitrag zur barrierefreien Website nach WCAG 2.1 AA im Relaunch.
Wie Google Seitenstruktur, Menülinks und Linktexte auswertet
Google erschließt eine Website vor allem über ihre Links, deshalb ist die Navigation auch ein Wegweiser für den Crawler. Laut dem SEO-Startleitfaden von Google Search Central stammt die überwiegende Mehrheit der neuen Seiten, die Google täglich findet, von Links. Eine Seite, die in keinem Menü und keinem Text verlinkt ist, wird daher schwer gefunden.
Die Menübezeichnungen zählen dabei mit. Der Linktext, auch Ankertext genannt, ist der sichtbare Teil eines Links und informiert Nutzer und Google über den Inhalt der Zielseite. Wix schreibt, dass ein beschreibendes Menü Suchmaschinen vermittelt, worum es auf einer Website geht. moinAI empfiehlt, häufig gesuchte Begriffe, die sich zur Gliederung eignen, in die Menüstruktur aufzunehmen.
Drei Hinweise aus dem Google-Leitfaden betreffen die Technik der Navigation:
- Sind CSS und JavaScript für Google gesperrt, versteht Google die Seiten möglicherweise nicht.
- Ab mehr als ein paar Tausend URLs kann die Organisation der Inhalte das Crawling beeinflussen.
- Änderungen wirken nach wenigen Stunden oder erst nach mehreren Monaten; zur Beurteilung rät Google, einige Wochen zu warten.
Ändert die neue Struktur bestehende Adressen, brauchen Sie Weiterleitungen. Wie Sie dabei vorgehen, zeigt unsere Checkliste für einen Website-Umzug ohne Verlust an Google-Traffic.
Pflege nach dem Launch: Navigation messen, testen und erweitern
Eine Seitenstruktur ist nach dem Launch nicht fertig, sie muss mit neuen Inhalten mitwachsen. Eine sauber geplante Hierarchie erleichtert das, weil jede neue Seite einen klaren Platz in einer bestehenden Menügruppe findet.
Die Navigation selbst ist dabei auch Messgrundlage. Laut moinAI erschwert eine schlecht gestaltete Navigationsstruktur die Messung der Nutzerströme. Wenn Menüpunkte eindeutig sind, sehen Sie in der Auswertung, welcher Weg zu einer Anfrage führt. Wie Sie diese Messung datenschutzkonform aufbauen, erklärt unser Beitrag Messen, was die Website bringt.
Für die laufende Prüfung eignen sich drei einfache Signale:
- Testpersonen auf Desktop und Smartphone: Lassen Sie typische Aufgaben auf beiden Geräten lösen, etwa eine Leistung finden oder eine Anfrage stellen.
- Wiederkehrende Fragen: Fragen Besucher den Chatbot oder den Kundendienst immer wieder nach vorhandenen Inhalten, sind diese laut moinAI möglicherweise schlecht strukturiert und schwer auffindbar.
- Die Seitensuche: Laut Wix nützt eine Suchleiste besonders Menschen mit wenig Interneterfahrung.
Neue Seiten fügen Sie in eine bestehende Gruppe ein, statt einen weiteren Hauptmenüpunkt anzulegen. So bleibt die Reihenfolge nach Kriterium 3.2.3 auf allen Seiten erhalten.
Was die Planung von Seitenstruktur und Navigation für Unternehmen in Deutschland bedeutet
Für Unternehmen in Deutschland stellt sich bei Impressum und Datenschutzerklärung vor allem die Frage nach dem Ort in der Struktur. Laut Wix stehen solche Angaben üblicherweise in der Fußzeile, die auf jeder Seite erscheint. Planen Sie die Fußzeile deshalb als festen Teil der wiederholten Navigation.
Zweisprachige Websites brauchen eine eigene Entscheidung. Das W3C betrachtet verschiedene Sprachversionen als verschiedene Gruppen von Webseiten. Die deutsche und die englische Fassung müssen also jeweils in sich konsistent sein. Sie dürfen sich voneinander unterscheiden, etwa wenn ein Menüpunkt nur für deutsche Bewerber sinnvoll ist.
WCAG 2.1 auf Stufe AA ist der Maßstab, an dem sich barrierefreie Firmenwebsites messen lassen. Kriterium 3.2.3 lässt sich bereits in der Strukturplanung erfüllen, also lange bevor ein Prüfer die fertige Website testet. Wer die Reihenfolge der Navigation einmal festlegt und in allen Vorlagen übernimmt, vermeidet den dokumentierten Fehler F66 von Anfang an.
Viele mittelständische Betriebe arbeiten regional. Für sie entscheidet die Struktur auch darüber, ob Standort- und Leistungsseiten klar getrennt und verlinkt sind. Eine eigene Seite pro Leistung mit eindeutiger Bezeichnung macht das Angebot für Besucher und Suchmaschinen gleichermaßen lesbar.
Checkliste: Seitenstruktur und Navigation vor dem Design freigeben
Die folgende Checkliste fasst zusammen, was vor dem ersten Designentwurf feststehen sollte. Gehen Sie sie mit allen Beteiligten durch und geben Sie die Struktur erst frei, wenn jede Zeile beantwortet ist.
| Prüfpunkt | Woran Sie es erkennen | Grundlage |
|---|---|---|
| Ziel und Zielgruppen | Ziel in einem Satz, je Nutzergruppe eine Persona | Eigene Festlegung |
| Seitenliste | Jede Seite hat einen benannten Zweck | Eigene Festlegung |
| Fußzeile | Impressum, AGB und Datenschutzerklärung in der Fußzeile jeder Seite | Wix |
| Hauptmenüpunkte | Höchstens sechs oder sieben Kategorien mit wörtlichen Bezeichnungen | Wix |
| Tiefe | Aufklappmenü für eine oder zwei Ebenen, Mega-Menü bei mehr | moinAI |
| Startseiten-Link | Logo verlinkt zur Startseite | Wix |
| Reihenfolge | Gleiche relative Reihenfolge in allen Seitenvorlagen | W3C, Kriterium 3.2.3 |
| Orientierung | Breadcrumbs auf Unterseiten, URL-Pfad folgt der Hierarchie | Wix, Google |
| Erreichbarkeit | Jede Seite ist über mindestens einen Link erreichbar |
Eine Zeile ohne Antwort ist ein Hinweis, dass die Struktur noch nicht reif für das Design ist.
Nächste Schritte: Seitenstruktur der eigenen Website aufnehmen und neu ordnen
Der erste Schritt ist eine Bestandsaufnahme Ihrer heutigen Website. Sie zeigt, welche Seiten es gibt und welche davon im neuen Auftritt einen Zweck haben. Gehen Sie in dieser Reihenfolge vor:
- Listen Sie alle bestehenden Seiten mit Adresse und Zweck in einer Tabelle auf.
- Beschreiben Sie Ziel und Zielgruppen in je einem Satz und legen Sie Personas an.
- Streichen Sie Seiten ohne Zweck und ergänzen Sie fehlende Seiten.
- Bündeln Sie die Seiten zu höchstens sechs oder sieben Gruppen mit wörtlichen Bezeichnungen.
- Legen Sie die Reihenfolge der Hauptnavigation und den Inhalt der Fußzeile fest.
- Prüfen Sie das Ergebnis mit der Checkliste und lassen Sie es von Testpersonen auf Desktop und Smartphone durchgehen.
Diese Arbeit kostet wenige Stunden am Tisch und spart Umbauten am fertigen Design. Das Ergebnis ist zugleich die Grundlage für Weiterleitungen, Barrierefreiheitsprüfung und spätere Messung.
Wenn Sie die Strukturplanung als Teil eines Neuaufbaus angehen möchten, finden Sie den Ablauf auf unserer Seite zu Website-Relaunch und Webdesign. Wie geordnete Strukturen in der Praxis aussehen, zeigen unsere bisherigen Arbeiten.