Was ist eine UX-Sitemap und wie erstellt man seine eigene

1. Was ist eine UX-Sitemap

Eine UX-Sitemap ist ein visuelles Werkzeug, das hilft, die Struktur einer Website oder App mit Fokus auf die Nutzererfahrung zu organisieren und zu skizzieren. Sie zeigt die Hierarchie und die Beziehung zwischen verschiedenen Seiten auf und hilft, fehlenden Inhalt zu identifizieren, wichtige Elemente zu priorisieren und ein digitales Produkt zu gestalten, das einfach zu navigieren ist.

Definition der UX-Sitemap

Im Webdesign bietet eine UX-Sitemap einen Überblick über das Layout einer Website und zeigt, wie verschiedene Seiten miteinander in Beziehung stehen.

Im Webdesign und in der Webentwicklung dient eine UX-Sitemap auch als Kollaborationswerkzeug, mit dem Designer, Entwickler, Content-Ersteller und Kunden das Layout der Website an Geschäftszielen und Nutzerbedürfnissen ausrichten.

Eine UX-Sitemap kann als Karte oder Skelett der Website betrachtet werden, deren Zweck es ist, eine geeignete Struktur zu schaffen. Sie wird meist in den frühen Phasen des Webdesigns eingesetzt, da sie später vom Designer genutzt wird, um Wireframes für die Website zu erstellen, aber auch als Referenz für die Entwicklung dient.

Unterschied zwischen UX-Sitemap und XML-Sitemap

Bei der Recherche zu Sitemaps stößt man wahrscheinlich auf Informationen zu einer anderen Art von Sitemap — einer XML-Sitemap. Um Verwirrung zu vermeiden, ist es wichtig, zwischen diesen beiden zu unterscheiden. Während eine XML-Sitemap eine Datei ist, die die wesentlichen Seiten einer Website auflistet und Crawlern hilft, eine Website besser zu verstehen, ist eine UX-Sitemap Teil des Designprozesses mit Fokus darauf, Inhalte zu organisieren und einen logischen Ablauf zu schaffen, der die Nutzererfahrung verbessert.

2. Kernkonzepte der UX-Sitemap

Um eine effektive UX-Sitemap zu erstellen, ist ein grundlegendes Verständnis bestimmter Konzepte wichtig. Es ist zwar nicht notwendig, ein Experte für Informationsarchitektur (IA) zu sein, aber ein fundiertes Verständnis einiger Prinzipien verbessert die Qualität und Nutzbarkeit der UX-Sitemap.

Prinzipien der Informationsarchitektur (IA)

Informationsarchitektur bedeutet, die Inhalte einer Website so zu organisieren und zu strukturieren, dass sie für Nutzer leicht verständlich und navigierbar sind. Sie ist wichtig für UX-Sitemaps, weil sie hilft, die Struktur der Website zu planen. Wichtige IA-Prinzipien für eine gute UX-Sitemap sind:

• Inhalte organisieren: Inhalte sinnvoll gruppieren und benennen, damit Nutzer sich leicht zurechtfinden.
• Navigation: Globale versus lokale Navigation verstehen und eine Struktur schaffen, die Nutzer reibungslos durch die Website führt.
• Inhaltsbeziehungen: Zeigen, wie verschiedene Inhalte miteinander verbunden sind, damit Nutzer verwandte Informationen leicht finden.
• Nutzerzentriertes Design: Design unter Berücksichtigung, wie Nutzer die Website verwenden werden.
• Barrierefreiheit: Sicherstellen, dass Inhalte für alle Nutzer, einschließlich Menschen mit Behinderungen, leicht auffindbar und zugänglich sind.

Weitere Details zur Informationsarchitektur finden Sie im folgenden Artikel: Information Architecture (IA). Dieser Artikel bietet eine grundlegende Basis zur Informationsarchitektur, die beim Erstellen einer UX-Sitemap nützlich ist.

Grundlegende UX-Design-Konzepte

Grundlegende UX-Design-Konzepte konzentrieren sich darauf, Nutzerbedürfnisse zu verstehen und einfach zu bedienende Benutzeroberflächen zu schaffen. Die Anwendung dieser Konzepte stellt sicher, dass sowohl Nutzerbedürfnisse als auch Geschäftsziele erfüllt werden. Zu den wichtigsten Konzepten gehören:

• Nutzerbedürfnisse und -ziele: Verstehen, wer die Nutzer sind und was sie von der Website brauchen. Dies hilft bei der Priorisierung von Inhalten und der Strukturierung der Sitemap.
• Content-Inventar: Wissen, welche Inhalte existieren und was hinzugefügt werden muss. Dies stellt sicher, dass alle notwendigen Informationen enthalten und in der Sitemap organisiert sind.
• Geschäftsziele: Die Sitemap an den Geschäftszielen der Website ausrichten. Dies stellt sicher, dass wichtige Seiten leicht zu finden sind und die übergeordneten Ziele der Website unterstützen.

Diese Informationen bilden eine gute Grundlage, um eine UX-Sitemap zu erstellen, die Inhalte nicht nur logisch organisiert, sondern auch die Nutzererfahrung verbessert und die Ziele der Website unterstützt.

3. Wichtige Werkzeuge zur Erstellung von Sitemaps

Die Erstellung einer Sitemap kann mit so einfachen Werkzeugen wie Stift und Papier beginnen. Eine handgezeichnete Sitemap ermöglicht schnelles Brainstorming und hilft, die Gesamtstruktur der Website oder App zu visualisieren, bevor man zu digitalen Werkzeugen übergeht.

Einige digitale Werkzeuge, die ich hilfreich fand, sind Octopus.do und ChatGPT. Octopus ist ein Werkzeug, mit dem Nutzer über eine einfache Drag-and-Drop-Oberfläche eine Sitemap von Grund auf erstellen können, was das Organisieren und Umordnen von Seiten erleichtert. Zusätzlich bietet Octopus interessante Funktionen wie KI-Generierung und URL-Freigabe, sodass Nutzer die Sitemap direkt über Octopus mit Kunden teilen können.

ChatGPT ist ebenfalls ein nützliches Werkzeug bei der Sitemap-Erstellung, da es helfen kann, Informationen zu strukturieren und erste Ideen zu generieren.

Die vollständige Sitemap lässt sich über Octopus.do erstellen. Für Präsentationszwecke ziehe ich es jedoch vor, die Sitemap nach Figma zu verschieben, da ich gerne alle designbezogenen Elemente in einer Datei behalte.

4. Wie man eine UX-Sitemap erstellt

Während Werkzeuge wie Octopus.do und ChatGPT den Prozess der Sitemap-Erstellung erheblich verbessern können, hängt der Erfolg einer Sitemap vom Verständnis der Projektziele, der Nutzerbedürfnisse und der effektiven Strukturierung von Inhalten ab. Ich nutze diese Werkzeuge zur Unterstützung meines Arbeitsablaufs, behalte aber immer den Fokus auf einer nutzerzentrierten, zielorientierten Sitemap.

Um eine fundierte Sitemap zu erstellen, sind folgende Schritte hilfreich:

1. Auf den Design Brief zurückgreifen
2. Besonderes Augenmerk auf Projektziele legen
3. Alle vorhandenen Inhalte sammeln
4. Ähnliche Websites zur Inspiration prüfen
5. Inhalte organisieren und die Sitemap erstellen
6. Die Sitemap mit dem Kunden besprechen

Auf den Design Brief zurückgreifen

Um erfolgreich Informationen über den Kunden zu sammeln, wie Unternehmensinformationen, Branding-Schlüsselwörter, Tonalität, Zielgruppe und Projektziele, ist es wichtig, ein erstes Interview zu führen und gemeinsam mit dem Kunden einen Design Brief auszufüllen.

Mit einem ausgefüllten Design Brief ist es möglich, während des gesamten Sitemap-Erstellungsprozesses darauf zurückzugreifen und sicherzustellen, dass fundierte Entscheidungen getroffen werden.

Besonderes Augenmerk auf Projektziele legen

Die Definition der Projektziele geschieht eigentlich während der Design-Brief-Phase. Beim Erstellen der Sitemap ist es jedoch wichtig, diese Ziele im Blick zu behalten und den Fokus nicht zu verlieren. Projektziele können so einfach sein wie mehr Leads zu gewinnen oder mehr Produkte zu verkaufen, aber es ist wichtig zu bedenken, dass nicht jedes Unternehmen dieselben Projektziele hat. Manche Unternehmen möchten das Nutzerengagement steigern, indem sie durch hochwertige Inhalte langfristige Nutzer gewinnen, während andere ihre Produkte auf eine bestimmte Weise präsentieren und es Nutzern leicht machen möchten, sie zu kontaktieren.

Alle vorhandenen Inhalte sammeln

Egal, ob es sich um die Neugestaltung einer alten Website oder die Erstellung einer völlig neuen handelt — es ist wichtig, so viele Informationen wie möglich über das Produkt und den Kunden zu sammeln. Diese Informationen stammen aus dem Design Brief sowie aus allen verfügbaren Unterlagen, Fotos usw., die der Kunde bereitstellen kann. Alles ist wertvoll, und der Designer muss sicherstellen, dass der Kunde alle vorhandenen Informationen bereitstellt.

Wenn der Kunde eine alte Website hat, lohnt es sich, einen Blick darauf zu werfen. Wenn er eine Broschüre oder einige Fotos hat, lohnt es sich, auch diese zu prüfen. Jede Information kann ein besseres Gefühl dafür vermitteln, wie man die Inhalte präsentiert, und hilft, Stärken und Schwächen des Unternehmens zu verstehen. Wenn der Kunde beispielsweise keine hochwertigen Fotos hat oder gar keine, ist es vielleicht besser, eine Sitemap zu vermeiden, die Bilder betont, wie etwa eine Galerieseite.

Ähnliche Websites zur Inspiration prüfen

Unternehmen in einer ähnlichen Branche oder Nische haben oft ähnliche Inhalte, weshalb es wichtig ist, ähnliche Projekte, Apps oder Websites zu analysieren. Beim Ausfüllen des Design Briefs ist es möglich, dass der Kunde einige Websites erwähnt, die zur Inspiration dienen könnten, aber es ist auch notwendig, eigene Recherchen durchzuführen. Wenn wir beispielsweise verwandte Apps und Websites recherchieren, bekommen wir ein Gefühl dafür, wie die Branche funktioniert, was die Konkurrenz richtig macht und wo sie möglicherweise Schwächen hat. Neben dem Verständnis der Nische durch die Untersuchung der Website eines Wettbewerbers ist es möglich, gute oder schlechte UX-Praktiken zu erkennen, die unseren eigenen Ansatz bei der Sitemap-Erstellung beeinflussen können. Ich werde auf Awwwards, WebDesign Inspiration und ähnlichen Websites recherchieren, um zu sehen, wie preisgekrönte Seiten ihre Inhalte strukturieren.

Die Sitemap erstellen

Nach dem Sammeln aller vorhandenen Inhalte und der Recherche ähnlicher Websites zur Inspiration besteht der nächste Schritt bei der Erstellung einer UX-Sitemap darin, die Inhalte strategisch zu organisieren. Das bedeutet, die gesammelten Rohinformationen zu nehmen und so anzuordnen, dass sie mit den Projektzielen übereinstimmen und die Nutzerbedürfnisse erfüllen. Einige wichtige Punkte, die berücksichtigt werden sollten:

• Grundstruktur skizzieren - Die Sitemap-Erstellung sollte damit beginnen, die Hauptbereiche der Website zu skizzieren, wie Startseite, Über-uns-Seite, Dienstleistungs- oder Produktseite und Kontaktseite. Von dort aus können diese Bereiche in Unterkategorien oder untergeordnete Seiten aufgeteilt werden. Es ist wichtig sicherzustellen, dass die Hierarchie klar und intuitiv ist und Nutzer auf sinnvolle Weise durch die Website führt, die die Ziele der Website unterstützt.
• Ausrichtung an Projektzielen - Die Inhaltsstruktur sollte immer die primären Ziele der Website widerspiegeln. Egal ob das Ziel Lead-Generierung, Produktverkauf oder Nutzerbildung ist — die Inhalte sollten entsprechend organisiert werden. Wenn das primäre Ziel beispielsweise der Verkauf ist, sollten Produktseiten von der Startseite aus leicht zugänglich und in der Navigation prominent platziert sein. Wenn das Ziel Nutzerbildung ist, sollten Ressourcen wie Artikel oder Fallstudien im Mittelpunkt stehen.
• Nutzerbedürfnisse widerspiegeln - Die Sitemap sollte sich an den Nutzerbedürfnissen orientieren, indem Inhalte danach organisiert werden, wie Nutzer suchen und navigieren. Erkenntnisse aus der Nutzerforschung können helfen, Bereiche zu priorisieren, wie zum Beispiel „Support“ auf einer SaaS-Website leicht auffindbar zu platzieren. Dies stellt sicher, dass die Seitenstruktur dem Nutzerverhalten entspricht und die Navigation vereinfacht.
• Gruppierung und Beschriftung - Effektive Inhaltsorganisation bedeutet, verwandte Elemente zu gruppieren und klar zu beschriften. Das macht die Navigation einfach und hilft Nutzern zu verstehen, wo sie sich auf der Website befinden. Zum Beispiel könnten alle Kundensupport-Ressourcen unter einem Bereich „Support“ gruppiert werden, mit Unterkategorien für FAQs, Kontaktinformationen und Fehlerbehebungsanleitungen. Jeder Bereich und Unterbereich sollte so beschriftet sein, dass er für den Nutzer sofort klar ist, und irreführende oder zu komplexe Begriffe vermeiden.
• Inhalte ausbalancieren - Das bedeutet sicherzustellen, dass Inhalte gleichmäßig über die Website verteilt sind. Es ist gut für Nutzererfahrung und SEO, zu vermeiden, dass ein Bereich mit Informationen überladen ist, während andere dünn besetzt sind.
• Mehrere Iterationen - Nach dem ersten Entwurf ist es gut, die Sitemap ein paar Mal zu überarbeiten und manche Entscheidungen zu überdenken. Sobald die Sitemap fertig erscheint, ist sie bereit, mit dem Kunden besprochen zu werden.

Mit dem Kunden besprechen

Nach der Erstellung der Sitemap ist es wichtig, sie mit dem Kunden zu besprechen. Es ist entscheidend, dass der Kunde bestätigt, dass er mit der Sitemap und Ihrer Erklärung, warum Sie die Inhalte auf eine bestimmte Weise organisiert haben, zufrieden ist. Zum Beispiel: Wenn der Kunde auf einer separaten Galerieseite besteht, ich mich aber entschieden habe, Nutzern auf jeder Seite eine Galerie mit seitenspezifischen Fotos zu bieten (zum Beispiel eine andere Galerie für die Seite „Über uns“ und eine andere für die Seite „Produkte“), sollte dies dem Kunden zusammen mit einer Erklärung der Vorteile mitgeteilt werden. (In diesem Zusammenhang besteht der Vorteil darin, Nutzern visuelles Feedback zu jeder spezifischen Seite zu bieten, anstatt alle Bilder ohne entsprechenden Kontext an einem Ort zu platzieren). Natürlich ist es in dieser Review-Sitzung entscheidend, dem Feedback des Kunden aufmerksam zuzuhören. Das Ziel ist nicht nur, die Designentscheidungen zu „verteidigen“, sondern eine produktive Diskussion zu führen, in der Ideen gemeinsam hinterfragt und verfeinert werden. Es ist gut, im Hinterkopf zu behalten, dass der Kunde sein Geschäft in- und auswendig kennt, genau wie der Designer das Design kennt.

5. Beispiel für die Erstellung einer Sitemap für Spatium Real Estate

Um zu veranschaulichen, wie dieser Prozess in der Praxis funktioniert, gehen wir ein Beispielprojekt durch, das ich für Spatium, ein auf Immobilien spezialisiertes Unternehmen, abgeschlossen habe. Weitere Informationen zum Projekt finden Sie auf der Projektbeschreibungsseite von Spatium.

Bevor ich überhaupt mit dem Prozess begonnen habe, habe ich ein Blatt Papier verwendet und einige Seiten skizziert, die auf einer Website fast immer vorhanden sind, wie Startseite, Dienstleistungen/Produkte, Über uns, Kontakt usw. Später, während ich recherchiere, Inhalte sortiere und weitere Erkenntnisse sammle, kann ich die Skizze anpassen oder sogar vollständig entfernen, wenn sie nicht zu den Bedürfnissen des Kunden passt.

Wie bereits erwähnt — der erste Schritt jedes Designprozesses ist die Erstellung eines Design Briefs. Das Gleiche habe ich getan, als ich mit dem Spatium-Projekt begonnen habe. Dies ermöglichte es mir, auf alle wichtigen Informationen aus dem Design Brief zurückzugreifen. Für einen besseren Einblick, wie der Spatium-Design-Brief aussah, habe ich ihn im Anhang beigefügt. Alle sensiblen Informationen wurden entfernt oder geändert, um die Privatsphäre des Kunden zu schützen.

Mithilfe des Design Briefs kann ich bereits festlegen, wie die Website strukturiert werden sollte, um die wichtigsten Informationen hervorzuheben. Bei der Entwicklung der Sitemap komme ich oft auf den Design Brief zurück, um zu prüfen, welche Informationen und Unterlagen vom Kunden bereitgestellt wurden, und um sicherzustellen, dass die Sitemap mit den Bedürfnissen des Kunden und seiner Nutzer übereinstimmt.

Innerhalb des Design Briefs gibt es einen Abschnitt mit den Projektzielen. Ich lege besonderen Wert auf die Projektziele, da sie der wichtigste Aspekt der Website sind. Im Design Brief umfassen die primären Ziele für das Website-Projekt von Spatium Real Estate:

• Besuchern erleichtern, die richtige Art von Immobilie für ihre Bedürfnisse zu finden und zu erkunden, egal ob sie kaufen, mieten oder in touristische Immobilien investieren möchten.
• Karrieremöglichkeiten hervorheben, um Top-Talente zu gewinnen, während Spatium weiter wächst und sein Team erweitert.
• Das Erscheinungsbild der Website auffrischen, um eine moderne, ansprechende Online-Präsenz zu schaffen, die die Sichtbarkeit der Marke verbessert und mehr Besucher anzieht.

Durch die erneute Betrachtung der Projektziele aus dem Design Brief kann ich Folgendes schließen:

• Separate Seiten für Kaufen, Mieten und Investieren in touristische Immobilien hinzufügen. Obwohl alle Dienstleistungen mit Immobilien zusammenhängen, möchte ich, dass diese Dienstleistungen auf separaten Seiten liegen (und separate Menüpunkte sind). Insbesondere, weil ich später feststellen werde, dass jede dieser Kategorien zusätzliche Unterkategorien hat, sodass diese Sortierung auch dabei hilft, den Nutzern eine angenehme UX zu bieten.
• Spatium ist es wichtig, Karrieremöglichkeiten hervorzuheben. Sie expandieren ständig und möchten für zukünftige Mitarbeiter zugänglich sein. Es ist also klar, dass sie auch eine separate Karriereseite benötigen. Zum Beispiel: Wenn Einstellungen nicht so wichtig wären, könnte vielleicht eine Kontaktseite ausreichen, oder ein kleinerer Bereich mit einem CTA innerhalb der Kontaktseite für potenzielle Mitarbeiter.

Während des gesamten Sitemap-Prozesses werde ich spontan Notizen machen, während ich Erkenntnisse sammle und Inhalte sortiere.

Hier werde ich erneut alle Inhalte und Informationen überprüfen, die der Kunde bereitgestellt hat. Ich habe auch einige wichtige Punkte im Abschnitt „Zusätzliche Anmerkungen“ des Design Briefs aufgenommen, also werde ich mir das ebenfalls ansehen:

• Markenrichtlinien und ein Designsystem wurden bereitgestellt, um Konsistenz bei den visuellen Elementen und der Funktionalität der Website sicherzustellen.
• Es gibt 5 verschiedene Niederlassungen
• Für inhaltsbezogene Informationen die alte Website ansehen

Darüber hinaus liefert der Abschnitt zur Zielgruppe im Design Brief ebenfalls wertvolle Informationen:

• Die Zielgruppe für Spatium Real Estate umfasst sowohl kroatische Einwohner als auch Ausländer, die am Kauf von Immobilien in Kroatien interessiert sind. Diese Zielgruppe umfasst diejenigen, die touristische Immobilien suchen, hauptsächlich für Ausländer, sowie Wohnimmobilien für kroatische Einwohner.

Ich werde ähnliche Websites zur Inspiration prüfen und mir ansehen, wie sie einige Designentscheidungen angegangen sind — insbesondere alles, was mit der Sitemap zu tun hat. Im Design Brief erwähnte der Kunde in den zusätzlichen Anmerkungen während des Interviews, dass ihre Wettbewerber Dogma Nekretnine, Manor Nekretnine und Lider Nekretnine sind. Ich werde diese recherchieren, aber auch einige Immobilien-Websites ansehen, die der Kunde nicht als Wettbewerber genannt hat.

Sobald die Recherche abgeschlossen ist, werde ich zusätzliche Notizen auf Papier, in Figma oder welchem Werkzeug auch immer ich während dieses Prozesses verwende, festhalten. Anschließend werde ich die Inhalte strategisch basierend auf den Projektzielen und Nutzerbedürfnissen anordnen.
Mein Ansatz zur Sitemap-Erstellung ist im Allgemeinen recht methodisch, und das gilt auch für das Spatium-Projekt. Ich werde Seiten einbeziehen, von denen ich weiß, dass sie typischerweise für die Website notwendig sind, einschließlich Startseite, Kontaktseite, Impressum, Datenschutzerklärung und Über-uns-Seite. Zusätzlich werde ich Seiten einbeziehen, die speziell auf die Anforderungen des Kunden eingehen, wie etwa für Kaufen und Mieten. Da Karrieren für Spatium wichtig sind, ist es sinnvoll, ihr Team auf der Über-uns-Seite hervorzuheben.

Während des Interviews äußerte der Kunde Interesse an einer News-Seite, daher werde ich ein News-Archiv mit einzelnen News-Artikeln einbeziehen. Die Karriereseite wird ebenfalls hinzugefügt, da sie ein wichtiger Aspekt für den Kunden ist. Ich werde alle verbleibenden Seiten einbeziehen, die sich aus den bisher gesammelten Informationen ergeben. Falls nötig, werde ich einige Entscheidungen erneut bewerten, die bereitgestellten Informationen erneut prüfen und sicherstellen, dass meine Sitemap mit den im Design Brief dargelegten Details übereinstimmt.

Nach Abschluss der Sitemap ist es wichtig, mindestens ein weiteres Review mit dem Kunden durchzuführen. Zum Beispiel: Während des Reviews bestand der Kunde darauf, dass ich separate Seiten für „Über uns“ und „Unser Team“ erstelle, da ihr Team und ihre Mitarbeiter für ihre Arbeit sehr wichtig sind. Ich habe die Anpassungen während unseres Interviews vorgenommen, und wir haben uns auf diese Struktur für die Website geeinigt, da sie die Ziele erfüllt, die wir beim Verfassen des Design Briefs festgelegt haben, nutzerzentriert und einfach zu navigieren ist.

Fazit

Die Erstellung einer effektiven UX-Sitemap ist ein grundlegender Schritt im Webdesign-Prozess und legt den Grundstein für eine benutzerfreundliche und zielorientierte Website. Durch das Verständnis dessen, was eine UX-Sitemap ist, und der damit verbundenen Schlüsselkonzepte lässt sich sicherstellen, dass unser Design sowohl strategisch als auch nutzerzentriert ist. Die richtigen Werkzeuge zu verwenden kann den Prozess der Sitemap-Erstellung erheblich rationalisieren, aber der wahre Erfolg liegt in der Fähigkeit des Designers, die Sitemap mit den Geschäftszielen des Kunden und den Bedürfnissen seiner Nutzer in Einklang zu bringen. Durch sorgfältige Planung, Inhaltsorganisation und fortlaufende Zusammenarbeit mit dem Kunden ist es möglich, eine Sitemap zu erstellen, die nicht nur die Nutzererfahrung verbessert, sondern auch die übergeordneten Ziele der Website unterstützt.