Besseres UX Design für die Website-Sitemap: So erstellst du eine UX-Sitemap

Die Struktur deiner Website entscheidet, ob Nutzer finden, was sie suchen, oder frustriert abspringen. Mit einer UX-Sitemap hast du diese Struktur im Griff, bevor du eine einzige Zeile Code schreibst oder einen einzigen Screen gestaltest.

Ich habe Teams gesehen, die monatelang Produkte gebaut haben, die Nutzer ab dem ersten Klick verwirrt haben. Das Problem war weder schlechtes Design noch schwacher Code. Das Problem war, dass sie ihre Informationsarchitektur vor dem Start nie skizziert hatten. Sie sind direkt in Wireframes und Prototypen gesprungen und haben sich dann gewundert, warum sich ihre Navigation kaputt anfühlte.

Eine UX-Sitemap verhindert das. Sie ist ein hierarchisches Diagramm, das jede Seite zeigt, wie die Seiten zusammenhängen und wie sich Nutzer durch dein Produkt bewegen. Sieh sie als Bauplan, der Designer, Entwickler und Produktmanager auf dasselbe strukturelle Fundament ausrichtet.

Was eine UX-Sitemap wirklich leistet

Eine UX-Sitemap visualisiert die Content-Hierarchie deiner Website. Jedes Kästchen steht für eine Seite. Linien zwischen den Kästchen zeigen Beziehungen und Navigationspfade. Das Ergebnis ist eine Vogelperspektive auf dein gesamtes Produkt, bevor du in Design oder Entwicklung investierst.

Das ist etwas anderes als eine XML-Sitemap, eine technische Datei für Suchmaschinen. XML-Sitemaps listen URLs in maschinenlesbarem Format auf, damit Google deine Website crawlen kann. UX-Sitemaps sind visuelle Planungsdokumente für Menschen, genauer gesagt für die Leute, die dein Produkt bauen.

Der praktische Nutzen:

Abstimmung passiert früh. Designer, Entwickler und Stakeholder arbeiten mit demselben Dokument. Meinungsverschiedenheiten tauchen in der Planung auf, nicht drei Wochen nach Entwicklungsstart, wenn Änderungen zehnmal so viel kosten.

Der Umfang wird sichtbar. Du kannst jede Seite zählen, die dein Produkt braucht. Dadurch werden Schätzungen für Zeitplan und Budget genauer. Außerdem siehst du Scope Creep, bevor er deinen Zeitplan sprengt.

Navigationsprobleme zeigen sich von selbst. Wenn du die ganze Hierarchie auf einer Seite siehst, erkennst du doppelte Kategorien, fehlende Seiten und verwirrende Pfade. Eine Studie der Nielsen Norman Group ergab, dass Komplexität und versteckte Optionen zu den häufigsten Fehlern in der Informationsarchitektur gehören. Eine Sitemap fängt sie ab, bevor Nutzer darauf stoßen.

User Flows werden testbar. Mit einer Sitemap kannst du die Struktur per Card Sorting und Tree Testing validieren, bevor du irgendetwas baust. Das kostet fast nichts im Vergleich dazu, die Navigation nach dem Launch neu zu bauen.

Wann du deine Sitemap erstellen solltest

Erstelle deine UX-Sitemap nach der User Research, aber vor den Wireframes. Du brauchst Erkenntnisse aus Personas und User Journeys, um die Struktur zu gestalten. Aber du willst nicht in detaillierte Screen-Designs investieren, bevor die Struktur steht.

Die Reihenfolge, die funktioniert:

1. User Research (Interviews, Umfragen, Wettbewerbsanalyse)
2. Personas und User Journeys
3. Card Sorting (um herauszufinden, wie Nutzer Inhalte gruppieren)
4. UX-Sitemap (dieser Schritt)
5. Tree Testing (um deine Sitemap zu validieren)
6. Wireframes und Prototypen

Bei bestehenden Websites kommt vor der neuen Sitemap ein Content-Audit. Erfasse jede aktuelle Seite, notiere ihre Performance und entscheide, was bleibt, was wegfällt und was zusammengelegt wird. So verlierst du nicht versehentlich Seiten, die Traffic oder Conversions bringen.

8 Schritte zu deiner UX-Sitemap

Schritt 1: Erstelle dein Content-Inventar

Liste jede Seite auf, die deine Website braucht. Bei bestehenden Websites crawlst du deine aktuellen URLs und ergänzt geplante Seiten. Bei neuen Produkten arbeitest du mit Feature-Anforderungen und User Stories.

Nutze eine Tabelle mit diesen Spalten:

• Seitenname
• URL (bestehend oder geplant)
• Übergeordnete Seite
• Content-Typ
• Priorität (Pflicht vs. nice to have)
• Status (vorhanden, muss erstellt werden, muss überarbeitet werden)

Dieses Inventar ist das Rohmaterial für deine Sitemap. Was hier fehlt, fehlt am Ende auch in deinem Produkt.

Schritt 2: Definiere deine Hauptnavigation

Die Hauptnavigation enthält deine Kategorien auf oberster Ebene. Sie erscheinen im Header-Menü und bilden das Fundament für alles andere.

Ziel sind 5-7 Einträge. Die Regel 7 plus/minus 2 ist ein Mythos, aber weniger Kategorien senken die kognitive Last. Zehn oder mehr Haupteinträge sind meist ein Zeichen, dass du zusammenfassen kannst.

Bei einer SaaS-Website umfasst die Hauptnavigation oft:

• Features
• Preise
• Lösungen (oder Use Cases)
• Ressourcen
• Unternehmen

Enterprise-Anwendungen bringen zusätzliche Komplexität. Analysen von Eleken zeigen, dass SaaS-Sitemaps Marketingseiten (um Nutzer zu gewinnen) und Produktseiten (für eingeloggte Nutzer) ausbalancieren müssen. Halte beides getrennt. Marketing gehört auf die öffentliche Website. Das Produkt liegt hinter dem Login.

Schritt 3: Baue deine Hierarchie

Sekundäre und tertiäre Navigation verzweigen sich von den Hauptkategorien aus. Bilde diese Beziehungen ab:

Primär - Sekundär - Tertiär

Für die meisten Websites unter 50 Seiten reichen zwei Ebenen. Größere Websites (100+ Seiten) brauchen eine dritte Ebene. Websites von Hochschulen und Behörden gehen manchmal vier Ebenen tief, was aber die Auffindbarkeit verschlechtert.

Baue deine Hierarchie von oben nach unten auf. Beginne mit der Startseite, verzweige dann zu den Hauptkategorien und anschließend zu den Unterseiten jeder Kategorie. Nutze Linien oder Pfeile, um Verbindungen zu zeigen.

Der Leitfaden von Miro empfiehlt aus genau diesem Grund das Baumformat: Es macht Eltern-Kind-Beziehungen sofort sichtbar.

Schritt 4: Entscheide dich zwischen flacher und tiefer Architektur

Flache Sitemaps halten alle Seiten innerhalb von 4 Klicks von der Startseite. Besser für kleine Websites (unter 50 Seiten), Portfolios und Produkte mit wenig Content. Eine flache Architektur hilft beim SEO, weil Suchmaschinen alles schnell crawlen können.

Tiefe Sitemaps haben 5 oder mehr Ebenen. Nötig für große Websites (1.000+ Seiten) mit komplexen Content-Hierarchien: E-Commerce mit Tausenden Produkten, Nachrichtenseiten mit jahrzehntelangen Archiven, Enterprise-Anwendungen mit mehrstufigen Berechtigungen.

Der Zielkonflikt: Tiefe Strukturen vergraben Inhalte. Nutzer und Suchmaschinen tun sich schwer, Seiten viele Ebenen tiefer zu finden. Wenn du Tiefe brauchst, baue Abkürzungen ein. Mega-Menüs, eine Suchfunktion und Querverlinkungen helfen Nutzern, tiefe Seiten zu erreichen, ohne sich durch jede Ebene zu klicken.

Der Leitfaden von Paddle Creative merkt an, dass hybride Ansätze für SaaS gut funktionieren: flache Struktur für Marketingseiten, tiefe Struktur für Produktfunktionen.

Schritt 5: Denk an Utility-Seiten

Utility-Seiten liegen außerhalb deiner Hauptnavigation, aber jede Website braucht sie:

• Datenschutzerklärung
• Nutzungsbedingungen
• Kontakt
• 404-Fehlerseite
• Suchergebnisse
• Login/Logout
• Kontoeinstellungen
• Seiten nur im Footer (Karriere, Presse, Investoren)

Nimm sie in deine Sitemap auf, meist in einem eigenen Bereich mit der Bezeichnung Utility- oder Footer-Seiten. Fehlen sie, gibt es in der Entwicklung Probleme, sobald jemand fragt, wohin die Datenschutzerklärung verlinken soll.

Schritt 6: Ergänze Seitenspezifikationen

Jede Karte in der Sitemap kann neben dem Seitennamen weitere Metadaten enthalten:

• Template-Typ (Blogartikel, Produktseite, Landingpage, Formular, Galerie)
• Dynamisch oder statisch (über das CMS gepflegt vs. fest im Code)
• Login erforderlich (öffentlich vs. eingeloggt)
• Priorität (kritischer Pfad vs. sekundär)
• Notizen (Content-Anforderungen, nötige Integrationen, Anliegen von Stakeholdern)

Mit diesen Metadaten wird deine Sitemap zum Projektmanagement-Tool. Entwickler sehen, welche Templates sie bauen müssen. Content-Teams sehen, was sie schreiben müssen. Produktmanager sehen, was den Launch blockiert.

Schritt 7: Validiere mit Tree Testing

Tree Testing prüft, wie gut sich Inhalte in deiner Sitemap finden lassen. Teilnehmende bekommen Aufgaben („Finde die Preise für Enterprise-Kunden“) und navigieren durch eine reine Textversion deiner Hierarchie. Kein Design, keine Navigationshilfen, nur die Struktur, die du gebaut hast.

Die Ergebnisse zeigen:

• Erfolgsquote: Haben die Nutzer die richtige Seite gefunden?
• Direktheit: Sind sie direkt dorthin gegangen oder herumgeirrt?
• Zeit: Wie lange hat es gedauert?

Ein Leitfaden von Maze empfiehlt Tree Testing nach dem Card Sorting. Card Sorting liefert Ideen für die Struktur. Tree Testing prüft, ob diese Ideen funktionieren.

Tools für Tree Testing sind unter anderem Optimal Workshop, UX Metrics und Maze. Plane 30-50 Teilnehmende ein, um statistisch brauchbare Ergebnisse zu bekommen.

Schritt 8: Iteriere und dokumentiere

Deine Sitemap ändert sich, wenn sich die Produktanforderungen ändern. Behandle sie als lebendes Dokument:

• Versioniere deine Sitemap-Dateien
• Halte fest, was sich zwischen den Versionen geändert hat und warum
• Hol dir vor größeren Strukturänderungen die Freigabe der Stakeholder
• Aktualisiere die Sitemap, wenn du nach dem Launch Features ergänzt

Dokumentation zählt, weil Menschen Entscheidungen vergessen. In sechs Monaten wird jemand fragen, warum „Lösungen“ von „Features“ getrennt ist. Dein Changelog beantwortet diese Frage ohne Meeting.

Typische Fehler, die Sitemaps kaputt machen

Vage Bezeichnungen

„Ressourcen“ sagt gar nichts. Hinter „Lösungen“ kann alles stecken. Nutzer können nicht durch Kategorien navigieren, die sie nicht verstehen.

Analysen von Adam Fard zählen unklare Bezeichnungen zu den häufigsten IA-Fehlern. Wenn Nutzer nicht vorhersagen können, was sie hinter einem Link finden, klicken sie nicht. Oder schlimmer: Sie klicken, finden etwas Unerwartetes und verlieren das Vertrauen in deine Navigation.

Die Lösung: Teste Bezeichnungen mit echten Nutzern. Card Sorting zeigt, welche Begriffe sie für Konzepte verwenden. Tree Testing zeigt, ob deine Bezeichnungen die richtige Bedeutung vermitteln.

Doppelte Content-Pfade

Wenn dieselbe Seite an mehreren Stellen auftaucht, entsteht Verwirrung. Welcher Pfad ist der richtige? Welchen Link soll man als Lesezeichen speichern? Welche URL soll Google indexieren?

Deine Sitemap deckt Dopplungen auf, bevor sie zu technischen Schulden werden. Wenn derselbe Inhalt logisch an zwei Stellen hingehört, wähle einen kanonischen Ort und setze von der anderen Stelle einen Querverweis.

Zu viele Kategorien

Sieben Einträge in der Hauptnavigation fühlen sich überschaubar an. Fünfzehn überfordern Nutzer. Sie scannen, sehen zu viele Optionen und springen entweder ab oder raten einfach.

Die Nielsen Norman Group empfiehlt, zusammenzufassen, sobald die Navigation über das hinauswächst, was Nutzer verarbeiten können. Zwei Navigationsebenen mit je 5-7 Einträgen ergeben schon 25-49 mögliche Ziele, mehr als die meisten Nutzer durchsehen wollen.

Wenn du keine Kategorien streichen kannst, denk über ein Mega-Menü nach, das verwandte Links gruppiert. Visuelles Gruppieren hilft Nutzern, schneller zu scannen.

Navigation nach Organigramm

Die interne Unternehmensstruktur passt selten zu den mentalen Modellen der Nutzer. Nutzern ist egal, dass Marketing und Produkt verschiedene Abteilungen sind. Ihnen ist wichtig, ob sie Preisinformationen finden.

Baue deine Sitemap um die Ziele der Nutzer herum, nicht um Berichtslinien. Die Ergebnisse aus dem Card Sorting sollten die Kategorien bestimmen, nicht die Organisationshierarchie deines Unternehmens.

Mobile außer Acht lassen

Mobile Navigation wird verdichtet. Dein Desktop-Menü mit 7 Einträgen wird zum Hamburger-Menü, in dem alle Einträge versteckt sind. Tiefe Hierarchien erfordern zusätzliche Taps. Wenn deine Desktop-Sitemap auf Hover-Zustände oder Mega-Menüs setzt, können mobile Nutzer nicht auf dieselbe Weise auf dieselben Inhalte zugreifen.

Der Leitfaden von Flowmapp empfiehlt, mobile Einschränkungen schon beim Erstellen der Sitemap einzuplanen, nicht erst danach. Notiere, welche Kategorien auf kleinen Bildschirmen zusammenfallen. Priorisiere die kritischen Pfade, die mobile Nutzer brauchen.

Tools für UX-Sitemaps

Figma Die meisten Designteams nutzen Figma bereits. Die Drag-and-drop-Oberfläche eignet sich für Sitemaps, und mit den Kollaborationsfunktionen können Stakeholder direkt kommentieren. Kostenlose Version verfügbar.

Miro Whiteboard-Tool mit Sitemap-Vorlagen. Stark bei Remote-Zusammenarbeit und Brainstorming-Sessions, in denen sich die Sitemap live weiterentwickelt. Integriert sich mit Figma, Jira und Azure DevOps.

FlowMapp Speziell für die Website-Planung gebaut. Vereint Sitemaps, User Flows, Wireframing und Content-Planung auf einer Plattform. Kann visuelle Sitemaps erzeugen, indem es bestehende Websites crawlt.

Slickplan Auf Sitemaps fokussiert, mit Tools für visuelle Hierarchien. Gut, um Sitemaps nicht-technischen Stakeholdern zu präsentieren.

Milanote Flexibles Canvas-Tool, das für Sitemaps genauso funktioniert wie für Moodboards und Research. Eher kreativ ausgerichteter Workflow.

FigJam Das Whiteboard-Gegenstück zu Figma. Manche Teams nutzen es ausschließlich für Sitemaps und User Flows und behalten Figma für detailliertes Screen-Design.

Für einfache Projekte reichen Stift und Papier. Eine handgezeichnete Sitemap im Stakeholder-Meeting bringt alle schneller auf eine Linie als ein weiterer Termin, um ein digitales Dokument zu besprechen.

SEO-Vorteile einer starken Informationsarchitektur

Deine UX-Sitemap verbessert dein SEO, bevor du Metadaten schreibst oder Backlinks aufbaust.

Crawlbarkeit: Flache Hierarchien lassen Suchmaschinen-Bots jede Seite schnell erreichen. Seiten, die 6 oder mehr Klicks tief vergraben sind, werden seltener gecrawlt und landen womöglich nie im Index.

Interne Verlinkung: Deine Sitemap legt die Linkstruktur zwischen den Seiten fest. Starke interne Links geben Autorität von gut rankenden Seiten an neuere Inhalte weiter. Das passiert ganz natürlich, wenn deine Hierarchie verwandte Seiten verbindet.

URL-Struktur: Sitemap-Hierarchien lassen sich oft direkt in URL-Pfade übersetzen. /features/integrations/zapier zeigt Nutzern und Suchmaschinen genau, wo eine Seite in deiner Struktur liegt.

Weniger Duplicate Content: Eine gut geplante Sitemap verhindert, dass derselbe Inhalt unter mehreren URLs erscheint. So verteilen Suchmaschinen Ranking-Signale nicht auf Duplikate.

Eine Analyse von Symphonic Digital zeigt, dass die Sitemap-Struktur die Sichtbarkeit in Suchmaschinen durch effizienteres Crawling und klarere Content-Hierarchien beeinflusst.

Von der Sitemap zur Umsetzung

Eine fertige Sitemap führt direkt in die nächsten Phasen der Produktentwicklung:

Wireframing: Jede Karte der Sitemap wird zu einem Wireframe. Die in der Sitemap definierten Template-Typen zeigen Designern, welche Layout-Patterns sie nutzen sollen.

Content-Strategie: Content-Teams sehen genau, welche Seiten geschrieben werden müssen. Prioritäten helfen ihnen, die Arbeit zu planen.

Entwicklungsplanung: Entwickler schätzen anhand von Seitenanzahl, Template-Typen und Anforderungen an dynamische Inhalte, alles sichtbar in der Sitemap.

QA-Tests: Testpläne nutzen die Sitemap, um sicherzustellen, dass jede Seite funktioniert. Navigationstests folgen den Pfaden der Sitemap, um zu prüfen, dass Nutzer jedes Ziel erreichen.

Bei Bonanza Studios erstellen wir Sitemaps in unseren 2-Week Design Sprints. Bevor wir einen einzigen Screen skizzieren, bilden wir die komplette Struktur gemeinsam mit den Stakeholdern im Raum ab. Diese Investition deckt Fehlabstimmungen früh auf, wenn die Korrektur Stunden statt Wochen kostet.

Die Sitemap wird während des gesamten Builds zur lebenden Referenz. Wenn jemand ein neues Feature vorschlägt, aktualisieren wir zuerst die Sitemap. Das erzwingt Fragen: Wo gehört es hin? Wie finden Nutzer es? Welche bestehenden Seiten müssen darauf verlinken?

Bis zum Launch hat die Sitemap Dutzende Iterationen durchlaufen. Aber die Kernstruktur, die in der ersten Woche per Card Sorting und Tree Testing validiert wurde, bleibt stabil. Nutzer können intuitiv durch das Produkt navigieren, weil wir die Struktur validiert haben, bevor wir einen einzigen Pixel gestaltet haben.

Dein nächster Schritt

Starte mit einem Content-Inventar. Liste jede Seite auf, die deine Website hat oder braucht. Gruppiere verwandte Seiten. Ordne die Gruppen in einer Hierarchie an. Teste diese Hierarchie dann mit echten Nutzern, bevor du in Design investierst.

Wenn du eine bestehende Website neu baust, mach zuerst ein Audit. Wisse, was du hast. Wisse, was funktioniert. Entscheide dann, was in die neue Struktur übernommen wird.

Wenn du bei null anfängst, mach Card Sorting mit deinen Zielnutzern. Lerne, wie sie über deine Inhalte denken. Nutze ihre mentalen Modelle, um deine Kategorien zu formen, nicht Annahmen darüber, was deinem Team logisch erscheint.

Das Ziel ist keine perfekte Sitemap. Das Ziel ist eine Sitemap, die so lange validiert und überarbeitet wird, bis Nutzer erfolgreich darin navigieren. Diese Validierung erspart dir später Monate an Nacharbeit.

Über den Autor

Behrad Mirafshar ist Gründer und CEO von Bonanza Studios, wo er Ideen in 4-12 Wochen in funktionsfähige MVPs verwandelt. Mit 13 Jahren in der Berliner Startup-Szene war er Teil der Gründungsteams von Grover (Unicorn) und Kenjo (führende HR-Plattform in DACH). CEOs holen ihn für Projekte, die ihre Teams nicht anfassen können oder wollen, weil er Produkte baut, keine PowerPoints.

Vernetz dich mit Behrad auf LinkedIn

Du baust ein Produkt, kämpfst aber mit der Informationsarchitektur? Unser 2-Week Design Sprint umfasst Sitemap, Nutzertests und einen validierten Prototyp. Du gehst mit einer Struktur raus, die funktioniert, nicht mit einem Strategie-Deck, das im Regal verstaubt.