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

Die Struktur deiner Website entscheidet, ob Nutzer finden, was sie brauchen, 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 dabei zugesehen, wie sie monatelang Produkte gebaut haben, die Nutzer vom ersten Klick an verwirrt haben. Das Problem war weder schlechtes Design noch schwacher Code. Das Problem war, dass sie ihre Informationsarchitektur nie geplant hatten, bevor sie loslegten. Sie sind direkt in Wireframes und Prototypen gesprungen und haben sich dann gewundert, warum sich die 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. Stell sie dir als Bauplan vor, der Designer, Entwickler und Produktmanager auf demselben strukturellen Fundament hält.

Was eine UX-Sitemap wirklich leistet

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

Das ist etwas anderes als eine XML-Sitemap, also 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:

Einigkeit entsteht früh. Designer, Entwickler und Stakeholder arbeiten mit demselben Dokument. Meinungsverschiedenheiten kommen in der Planung auf den Tisch, 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. Das macht Zeit- und Budgetschätzungen genauer. Und es deckt Scope Creep auf, bevor er deinen Zeitplan sprengt.

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

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 erstellst

Erstelle deine UX-Sitemap nach der User Research, aber vor dem Wireframing. 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 gehört vor die neue Sitemap ein Content Audit. Erfasse jede aktuelle Seite, notiere ihre Performance und entscheide, was bleibt, was geht und was zusammengelegt wird. So verhinderst du, dass versehentlich Seiten wegfallen, die Traffic oder Conversions bringen.

8 Schritte zu deiner UX-Sitemap

Schritt 1: Sammle dein Content-Inventar

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

Nutze eine Tabelle mit Spalten für:

• Seitenname
• URL (bestehend oder geplant)
• Übergeordnete Seite
• Inhaltstyp
• Priorität (Must-have vs. Nice-to-have)
• Status (existiert, muss erstellt werden, muss überarbeitet werden)

Dieses Inventar ist das Rohmaterial für deine Sitemap. Was hier fehlt, fehlt am Ende auch im 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 Anwendungsfälle)
• 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 der Anmeldung.

Schritt 3: Bau deine Hierarchie auf

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

Primär - Sekundär - Tertiär

Für die meisten Websites mit weniger als 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.

Bau deine Hierarchie von oben nach unten auf. Beginne mit der Startseite, verzweige dann in die Hauptkategorien und danach in die Unterseiten jeder Kategorie. Zeig die Verbindungen mit Linien oder Pfeilen.

Der Guide von Miro empfiehlt genau deshalb das Baumformat: Es macht Eltern-Kind-Beziehungen sofort sichtbar.

Schritt 4: Wähle 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 Inhalt. Eine flache Architektur hilft der SEO, weil Suchmaschinen alles schnell crawlen können.

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

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

Der Guide 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 der Link zur Datenschutzerklärung führen soll.

Schritt 6: Ergänze Seitenspezifikationen

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

• Template-Typ (Blogbeitrag, Produktseite, Landingpage, Formular, Galerie)
• Dynamisch oder statisch (über das CMS gepflegt vs. fest im Code)
• Anmeldung erforderlich (öffentlich vs. eingeloggt)
• Priorität (kritischer Pfad vs. nachrangig)
• Notizen (inhaltliche Anforderungen, nötige Integrationen, Bedenken 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 umhergeirrt?
• Zeit: Wie lange hat es gedauert?

Ein Guide 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
• Notiere, was sich zwischen den Versionen geändert hat und warum
• Hol dir die Freigabe der Stakeholder, bevor du die Struktur grundlegend änderst
• Aktualisiere die Sitemap, wenn du nach dem Launch Features ergänzt

Dokumentation ist wichtig, 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 nichts aus. Unter Lösungen kann alles Mögliche 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 vorhersehen können, was sie hinter einem Link erwartet, 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 Pfade zu denselben Inhalten

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

Deine Sitemap deckt Duplikate auf, bevor sie zu technischen Schulden werden. Wenn derselbe Inhalt logisch an zwei Stellen gehö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 überfliegen das Menü, sehen zu viele Optionen und gehen entweder 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 ein Raster aus 25-49 möglichen Zielen, und damit mehr, als die meisten Nutzer durchgehen wollen.

Wenn du keine Kategorien streichen kannst, denk über ein Mega-Menü nach, das zusammengehörige Links gruppiert. Visuelle Gruppierung 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. Sie wollen wissen, ob sie die Preise finden.

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

Mobile vergessen

Mobile Navigation wird verdichtet. Dein Desktop-Menü mit 7 Einträgen wird zu einem 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 Guide von Flowmapp empfiehlt, mobile Einschränkungen schon bei der Erstellung der Sitemap einzuplanen, nicht erst danach. Notiere, welche Kategorien auf kleinen Bildschirmen zusammengefasst werden. Priorisiere die kritischen Pfade, die mobile Nutzer brauchen.

Tools für UX-Sitemaps

Figma Die meisten Design-Teams nutzen Figma ohnehin. 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-Templates. 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 Sitemap-Erstellung, User Flows, Wireframing und Content-Planung auf einer Plattform. Kann visuelle Sitemaps durch Crawlen bestehender Websites erzeugen.

Slickplan Konzentriert sich auf die Sitemap-Erstellung mit Tools für visuelle Hierarchien. Gut, um Sitemaps nicht-technischen Stakeholdern zu präsentieren.

Milanote Flexibles Canvas-Tool, das für Sitemaps ebenso funktioniert wie für Moodboards und Research. Eher auf kreative Workflows ausgerichtet.

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

Bei einfachen Projekten reichen Stift und Papier. Eine handgezeichnete Sitemap im Stakeholder-Meeting bringt alle schneller auf eine Linie, als einen weiteren Call anzusetzen, um ein digitales Artefakt zu besprechen.

SEO-Vorteile einer starken Informationsarchitektur

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

Crawlbarkeit: Flache Hierarchien lassen Suchmaschinen-Bots jede Seite schnell erreichen. Seiten, die 6+ 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 sagt Nutzern und Suchmaschinen genau, wo eine Seite in deiner Struktur liegt.

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

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

Von der Sitemap zur Umsetzung

Eine fertige Sitemap ist direkt mit den nächsten Phasen der Produktentwicklung verbunden:

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

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

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

QA-Testing: 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-wöchigen Design Sprints. Bevor wir einen einzigen Screen skizzieren, bilden wir die komplette Struktur gemeinsam mit den Stakeholdern im Raum ab. Diese Investition deckt Unstimmigkeiten früh auf, wenn ihre Behebung Stunden statt Wochen kostet.

Die Sitemap wird während des gesamten Builds zur lebendigen 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 navigieren intuitiv durch das Produkt, weil wir die Struktur validiert haben, bevor wir einen einzigen Pixel gestaltet haben.

Dein nächster Schritt

Fang mit einem Content-Inventar an. Liste jede Seite auf, die deine Website hat oder braucht. Gruppiere zusammengehörige Seiten. Ordne die Gruppen in einer Hierarchie an. Und teste diese Hierarchie dann mit echten Nutzern, bevor du in Design investierst.

Wenn du eine bestehende Website neu aufbaust, mach zuerst ein Audit. Wisse, was du hast. Wisse, was funktioniert. Dann entscheide, was es in die neue Struktur schafft.

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 können. Diese Validierung erspart dir später monatelange Nacharbeit.

Über den Autor

Behrad Mirafshar ist Gründer und CEO von Bonanza Studios, wo er Ideen in 4-12 Wochen zu funktionsfähigen MVPs macht. Mit 13 Jahren in der Berliner Startup-Szene war er Teil der Gründungsteams von Grover (Unicorn) und Kenjo (führende HR-Plattform im DACH-Raum). 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, aber die Informationsarchitektur bereitet dir Kopfzerbrechen? Unser 2-Week Design Sprint umfasst die Erstellung der Sitemap, Nutzertests und einen validierten Prototyp. Du gehst mit einer Struktur raus, die funktioniert, nicht mit einem Strategie-Deck, das im Regal verstaubt.