Zum Inhalt springen

Pontpoint

Die lokale Nachrichten

Wie erstellt man einen übersichtlichen Website-Plan für eine einfache Navigation?

Ein funktionierender Website-Plan basiert auf Hierarchieentscheidungen, die vor jedem Entwurf getroffen werden. Die Klicktiefe, die Gruppierung nach Suchintention …

Une femme dessine un plan de site web sur papier avec des post-its et des wireframes sur un bureau en bois dans un bureau moderne
5 Minuten

Ein funktionierender Seitenplan beruht auf Hierarchieentscheidungen, die vor jedem Mock-up getroffen werden. Klicktiefe, Gruppierung nach Nutzerintention und einheitliche Bezeichnungen entscheiden darüber, ob Besucher die richtige Seite erreichen oder abspringen. Einen klaren Seitenplan zu erstellen bedeutet, die Struktur als technisches Arbeitsergebnis zu behandeln – nicht als intuitive Sortierübung.

Klicktiefe und Crawl-Budget: die technischen Grenzen des Seitenplans

Jede strategisch wichtige Seite sollte von der Startseite aus mit höchstens drei Klicks erreichbar sein. Bei größerer Tiefe verringern Suchmaschinen die Crawling-Frequenz, und Besucher springen ab. Diese Tiefenregel bestimmt die gesamte Seitenhierarchie.

Bei einer Unternehmenswebsite mit fünf bis zehn Seiten ist die Klicktiefe kein Problem. Schwierigkeiten entstehen erst, wenn ein Produktkatalog, ein aktiver Blog oder mehrere Unterkategorien hinzukommen. Wir empfehlen, die tatsächliche Tiefe vor der endgültigen Festlegung des Menüs mit einem Crawl zu erfassen (Screaming Frog, Sitebulb), denn die in einer Tabelle wahrgenommene Tiefe entspricht nicht immer der technischen Tiefe.

Ein oft übersehener Punkt: nicht crawlbare JavaScript-Links erzeugen verwaiste Seiten, die für Googlebot unsichtbar sind. Google weist darauf hin, dass interne HTML-Links dabei helfen, Seiten zu entdecken und ihre Beziehungen zueinander zu verstehen. Prüfen Sie, ob jeder Eintrag im Seitenplan auf eine URL verweist, die über einen standardmäßigen HTML-Link erreichbar ist – nicht über ein onclick-Ereignis oder clientseitiges Routing ohne serverseitiges Rendering.

Wie sich eine flache Seitenhierarchie konkret umsetzen lässt, zeigt der Seitenplan von Ludika Studio: Alle Seiten liegen dort ein oder zwei Ebenen von der Wurzel entfernt.

Ein Mann präsentiert in einem modernen Besprechungsraum an einem Whiteboard ein Navigationsdiagramm für eine Website

Nach Nutzerintention statt nach interner Logik gruppieren

Die meisten Seitenhierarchien bilden das Organigramm des Unternehmens oder die interne Produktnomenklatur ab. Besucher orientieren sich dagegen an ihrem Bedarf: vergleichen, kaufen, Kontakt aufnehmen oder einen Service verstehen. Wer Seiten nach der Suchintention gruppiert, reduziert die Klickzahl und die Absprungrate.

Die zuverlässigste Methode ist Card Sorting. Dabei legen Sie einer Gruppe von Nutzern aus Ihrer Zielgruppe die Seitentitel vor – auf physischen Karten oder mit einem Tool wie Adapté Workshop. Die Teilnehmenden gruppieren die Karten frei, anschließend analysieren Sie die Cluster. Ergänzend dazu dient der Tree Test: Die Teilnehmenden sollen eine bestimmte Information in der vorgeschlagenen Seitenhierarchie finden – ohne grafische Benutzeroberfläche.

Beide Tests decken häufige Abweichungen zwischen Geschäftslogik und Nutzerlogik auf. Ein Dienstleister kann seine Angebote nach Branchen ordnen, während potenzielle Kunden nach Art der Leistung suchen. Zeigt das Card Sorting eine andere Gruppierung als die von Ihnen geplante, ist das ein Zeichen dafür, dass die Struktur überarbeitet werden sollte.

  • Offenes Card Sorting: Die Teilnehmenden erstellen selbst Kategorien. Geeignet für eine neue Website oder einen vollständigen Relaunch
  • Geschlossenes Card Sorting: Die Kategorien sind vorgegeben. Geeignet, um eine bereits entworfene Seitenhierarchie zu überprüfen
  • Tree Test: Misst die Erfolgsquote und die benötigte Zeit, um eine Seite in der Hierarchie zu finden – ohne Einfluss des Designs

Navigationsbezeichnungen: Konventionen und Tastaturzugänglichkeit

Eine wirksame Menübezeichnung beschreibt das Ziel, nicht die Handlung. „Unsere Projekte“ funktioniert besser als „Entdecken“, weil Besucher wissen, was sie hinter dem Link erwartet. Beschränken Sie jede Bezeichnung auf zwei oder drei Wörter. Längere Bezeichnungen machen das Menü auf Mobilgeräten unübersichtlich; außerdem zeigen Tree Tests, dass dadurch die Erfolgsquote sinkt.

Seit dem 28. Juni 2025 gilt der Europäische Rechtsakt zur Barrierefreiheit für bestimmte E-Commerce-Dienste für Verbraucher. Für die betroffenen Websites gehören Tastaturnavigation und verständliche Nutzerpfade zu den Anforderungen, die bereits bei der Strukturplanung berücksichtigt werden müssen.

Das W3C empfiehlt, dass jedes interaktive Element per Tastatur erreichbar ist und der Fokus sichtbar bleibt. In der Praxis bedeutet das, zu testen, ob sich ein Dropdown-Menü öffnen, seine Links durchgehen und das ausgewählte Element ohne Maus erkennen lässt. Eine häufige Falle: Ein fixierter Header verdeckt den Link, der den Tastaturfokus erhält. Das WCAG-2.2-Kriterium „Focus Not Obscured (Minimum)“ zielt genau auf dieses Problem ab.

Brotkrumennavigation und kontextbezogene Orientierung

Die Brotkrumennavigation (Breadcrumb) ergänzt das Hauptmenü und zeigt Besuchern ihre Position in der Hierarchie. Sie ersetzt keine klare Seitenstruktur, hilft aber bei direkten Einstiegen über eine Suchmaschine, wenn Nutzer ohne Kontext auf einer tiefer liegenden Seite landen.

Implementieren Sie die Brotkrumennavigation mit dem strukturierten Daten-Markup BreadcrumbList (schema.org). Google kann den hierarchischen Pfad dann in den Suchergebnissen anzeigen, was die Klickrate verbessert.

Hände bedienen in einem minimalistischen Homeoffice auf einem großen Touchscreen eine Software für hierarchische Seitenpläne

XML-Sitemap und HTML-Seitenplan: zwei unterschiedliche Arbeitsergebnisse

Die XML-Sitemap richtet sich an Suchmaschinen-Crawler, der HTML-Seitenplan an Besucher. Wer beides verwechselt, lässt eine der beiden Zielgruppen außer Acht. Die XML-Sitemap listet alle indexierbaren URLs mit ihrer Priorität und ihrem Änderungsdatum auf. Der HTML-Seitenplan hingegen zeigt eine organisierte Auswahl der wichtigsten Seiten, meist in Form einer hierarchischen Liste.

Eine XML-Sitemap kann eine mangelhafte interne Verlinkung nicht ausgleichen. Ist eine Seite über keinen HTML-Link mit einer anderen Seite verbunden, weist die XML-Sitemap die Suchmaschine zwar auf ihre Existenz hin, doch die fehlende interne Verlinkung schwächt ihre Autorität. Umgekehrt verlangsamt ein HTML-Seitenplan ohne XML-Sitemap die Entdeckung neuer Seiten durch Crawler.

  • XML-Sitemap: technische Datei im Stammverzeichnis, in der robots.txt angegeben, auf 50 000 URLs pro Datei begrenzt
  • HTML-Seitenplan: für Besucher navigierbare Seite mit den wichtigsten Links nach Kategorien geordnet, über die Fußzeile erreichbar
  • Sitemap-Index: erforderlich, wenn die Website die Grenze einer einzelnen XML-Datei überschreitet; verweist auf mehrere untergeordnete Sitemaps

Wann die XML-Sitemap neu generiert werden sollte

Jede hinzugefügte, gelöschte oder weitergeleitete Seite macht eine Aktualisierung der Sitemap erforderlich. Bei einem CMS wie WordPress erzeugen Erweiterungen die Datei automatisch. Bei einer statischen Website oder einem JavaScript-Framework mit serverseitigem Rendering sollten Sie die Sitemap-Generierung in Ihrer Deployment-Pipeline automatisieren, damit sie nicht vergessen wird.

Der übersichtlichste Seitenplan der Welt ist nutzlos, wenn die zugrunde liegende Hierarchie nicht den tatsächlichen Besucherpfaden entspricht. Testen Sie die Seitenstruktur mit Nutzern, prüfen Sie die technische Tiefe mit einem Crawl und halten Sie die XML-Sitemap mit jeder Veröffentlichung auf dem neuesten Stand. Wie klar ein Seitenplan ist, zeigt sich an der Erfolgsquote im Tree Test – nicht an der Eleganz des Menüs.

Wie erstellt man einen übersichtlichen Website-Plan für eine einfache Navigation?