Website-Konzepte erstellen – Sitemap, Informationsarchitektur, Content-Outline und Navigation planen
Von: Jonas Ein durchdachtes Website-Konzept basiert auf einer sorgfältigen Analyse und umfasst neben einer Sitemap und verschiedenen Navigationsbereichen auch die sog. Content-Outline, Informationen zu Inhaltstypen und Taxonomien sowie funktionale Anforderungen.
Das Konzept einer Website ist eine komplexe Aufgabe, die eine durchdachte Planung erfordert. Werden in der Konzeption Fehler gemacht, fallen diese schlimmstenfalls erst im laufenden Betrieb der Seite auf und erzeugen viel Ärger, Kosten oder beides. Das trifft vor allem auf ein Website-Redesign zu, denn hier gilt es die bestehenden Strukturen zu optimieren, ohne dass die Erfolge der Vergangenheit verloren gehen.
Wir gehen daher sehr strukturiert vor, und haben Leitfäden und Checklisten erstellt, um nichts zu vergessen.
Voraussetzungen
Bevor die Informationsarchitektur und Navigation geplant werden, müssen die Projektziele klar definiert sein. Zielgruppen und ggf. Personas sollten bereits vorliegen, ebenso wie die inhaltlichen und funktionalen Anforderungen. Auch Infos zu Mitbewerbern sind relevant, um strategische Ziele entwickeln zu können.
Bestehende Website analysieren
Ein Website-Redesign basiert auf einer bestehenden Website, die als Grundlage dient und bereits im Internet bekannt ist. Deshalb starten wir mit einer umfassenden Analyse. Bei Neuprojekten kann dieser Punkt übersprungen werden.
Wir nutzen das Crawling-Tool »Screaming Frog«, um alle Unterseiten automatisiert zu erfassen und exportieren die Daten als Excel-Tabelle. Wir klären Fragen zur Struktur und internen Verlinkung und entscheiden, welche Inhalte nicht mehr benötigt werden. Diese Bestandsaufnahme erfordert Zeit, ist aber essenziell, um die Suchmaschinenoptimierung nicht zu gefährden und bestehende Verlinkungen zu erhalten.
Darüber hinaus informieren wir uns in Analyse-Tools wie Matomo, Google Analytics oder der Search Console über Seitenzugriffe, Suchanfragen, Performance und Geräteverteilung. Dadurch ergibt sich uns ein umfassendes Bild über Qualität und Umfang der aktuellen Website.
Sitemap erstellen
Die Neustrukturierung der Inhalte wird in Form einer Sitemap visualisiert. Wir fassen ähnliche Unterseiten zusammen, benennen Bereiche um, löschen überflüssige Inhalte und fügen neue Unterseiten hinzu. Wir machen uns auch bereits Gedanken zur URL-Struktur, Mehrsprachigkeit und zur Suchmaschinenoptimierung. All das gleichen wir regelmäßig mit den Projektzielen (i.d.R. User Journeys) ab.
Die gewählte Darstellung ist abhängig von der Komplexität des Projekts. Üblich sind visualisierte Sitemaps in Tools wie Figjam oder Miro und/oder Excel-Tabellen. In dieser frühen Phase des Projekts entsteht oft auch schon ein erster Entwurf für die Navigation, der später konkretisiert wird. Wichtig ist, dass die Navigation und die Informationsarchitektur nicht verwechselt werden.
Templates & Teaser planen
Sobald es mehrere Seiten mit vergleichbarem inhaltlichen Aufbau gibt, ergibt es Sinn diese über ein gemeinsames Template (Seitenvorlage) zu steuern. Templates vereinfachen die technische Umsetzung und sorgen später für gestalterische und inhaltliche Konsistenz.
Beim Erstellen der Sitemap haben wir Gruppen von ähnlichen Inhalten i.d.R. bereits erkannt. Wir planen dafür passende Templates und benennen sie. Somit stellen wir sicher, dass alle Unterseiten, die mit demselben Template gesteuert werden, auch inhaltlich gleich aufgebaut sind.
Wenn es mehrere Detailseiten gleicher Art gibt (z.B. mehrere News, Produkte, Personen etc.), benötigen die Inhalte auch einen Teaser, um in Kurzform auf Übersichtsseiten angezeigt werden zu können. Wir planen daher auch alle notwendigen Teaser.
Content-Outline planen
Die geplanten Inhalte aller Unterseiten dokumentieren in Form einer sog. Content-Outline. Stichpunktartig legen wir den inhaltlichen Aufbau jedes Templates und jeder individuellen Seite fest. Das Ziel der Content–Outline besteht darin, das wir eine klare Vorstellung von den späteren Inhalten der Website haben, ohne dass schon konkrete Texte ausformuliert werden müssen.
Der Prozess wird auch als Content-Out bezeichnet und bildet die ideale Grundlage für Design, Suchmaschinenoptimierung und Barrierefreiheit. Aufgrund der linearen Struktur der Outline entspricht diese Vorgehensweise automatisch auch dem Mobile First-Ansatz.
Inhaltstypen und Taxonomien festlegen
Mit der Planung von Inhaltstypen und Taxonomien stellen wir sicher, dass wichtige technische Anforderungen erfüllt sind und keine relevanten Aspekte übersehen werden. Wichtig sind in diesem Zusammenhang auch die Ziel-Technologien – beispielsweise das verwendete CMS. Wir setzen Projekte meist als maßgeschneidertes WordPress-Theme um, daher ist die sog. Template Hierarchie von WordPress in dieser Projektphase für uns relevant.
Wir gehen ins Detail und legen fest, in welcher Reihenfolge die Inhalte eines Typs auf den Übersichtsseiten erscheinen sollen. Außerdem prüfen wir, ob es Inhaltstypen gibt, die keine eigene Detailseite benötigen und ausschließlich als Liste auf einer Übersichtsseite dargestellt werden, etwa Personen, Events oder Downloads.
Die Unterscheidung zwischen Template und Inhaltstyp fällt mitunter schwer. Templates fallen stärker in den konzeptionellen/gestalterischen Bereich. Sie steuern den Layoutaufbau und sind verantwortlich für eine einheitliche Darstellung. Inhaltstypen hingegen definieren, welche Art von Inhalten gespeichert wird und wie diese in der Datenbank strukturiert sind. Der Inhaltstyp »Beitrag« würde beispielsweise über das Template »Beitrag-Detail« gesteuert.
Ein weiterer wichtiger Aspekt ist die Taxonomie. Diese spielt insbesondere dann eine Rolle, wenn Inhalte gefiltert oder kategorisiert werden sollen. Sollen Filme beispielsweise nach Genre gefiltert werden können, müssen sowohl das Filterkriterium (z. B. »Genre«) als auch die möglichen Filteroptionen (Action, Thriller Comedy usw.) definiert werden.
Darüber hinaus ermöglicht die Taxonomie auch die Verknüpfung verschiedener Inhaltstypen untereinander. Möchten wir beispielsweise, dass Ansprechpersonen automatisch bei den passenden Produkten angezeigt werden, könnte eine gemeinsame Taxonomie – etwa »Vertriebsgebiet« – diese Verbindung herstellen.
Navigationsbereiche planen
Die finale Navigation wird erst geplant, nachdem die Informationsarchitektur – also die gesamte Seitenstruktur inklusive aller Templates und Verknüpfungen – festgelegt wurde. Zwar existiert oft bereits ein erster Entwurf der Navigation, doch erst jetzt erfolgt die detaillierte Ausarbeitung.
Basierend auf den Projektzielen und User Journeys entwickeln wir verschiedene Navigationsbereiche. Neben der Hauptnavigation mit Untermenüs können dies beispielsweise eine Service-Navigation, Suchfunktionen oder rechtlich notwendige Menüpunkte im Footer sein. Jeder Navigationsbereich erhält einen einzigartigen und beschreibenden Namen, und wir achten darauf, dass Umfang und Formulierung der Menüpunkte gängigen UX-Konventionen entsprechen.
Ergebnis des Website-Konzepts
Am Ende unseres Prozesses liegt ein durchdachtes Website-Konzept vor, das alle wesentlichen Aspekte berücksichtigt und zu einem erfolgreichen Website-Projekt- bzw. Redesign führen sollte.
Die Sitemap dient als visuelle Grundlage für die Seitenstruktur, während die Content-Outline eine detaillierte Planung der Inhalte ermöglicht. Die geplanten Inhaltstypen und Taxonomien sorgen für eine konsistente und logische Verknüpfung der Inhalte. Durch die detaillierte Planung verschiedener Navigationsbereiche wird sichergestellt, dass alle Nutzer intuitiv durch die Website geführt werden und schnell zu den gewünschten Informationen gelangen.
Klasse Artikel, danke! Eure Sitemap-Grafiken sehen superschön aus, was habt Ihr da für eine Software, wenn ich fragen darf?
Hallo Susi, wir arbeiten mit Figjam und empfehlen das Tool auch für den UX/Konzept-Teil. Mit Miro kannst du aber ähnliche Ergebnisse erreichen.
Super, danke Dir! :-)