Die Informationsarchitektur (IA) – sprich die strategische Website-Konzeption – einfach zu überspringen und direkt mit dem Design zu starten, ist der grösste Fehler bei der Erstellung einer Website. Zugegeben die Verlockung ist gross.
Für die Erstellung einer strategischen Website, die Umsatz bringt, reicht ein schickes Design Template alleine nicht. Es braucht eine durchdachte Struktur mit dem Fokus auf die Website-Besucher:innen. Oder mit anderen Worten eine überzeugende Informationsarchitektur.
Informationsarchitektur heisst Planung und hat noch nichts mit der visuellen Gestaltung der Website am Hut
Wer Erfolg will, braucht eine Planung der Informationsarchitektur. Eine Klärung der nachfolgenden Fragen ist unumgänglich: Welche Infos brauchen die Besucher:innen, um das Angebot zu verstehen? Welche Seiten werden dafür benötigt? Welche Seitentypen lassen sich aus den benötigten Seiten ableiten? Wie werden die Inhalte sortiert? Welche Seiten sind Teil der Hauptnavigation?
Es gibt also zahlreiche Fragen, die beantwortet sein wollen, bevor man sich ans Design der Website macht. Das Gute daran: Für die Planung der Informationsarchitektur braucht es keine verrückten oder gar teuren Tools: Papier und Stift sind insbesondere für kleinere Projekte bzw. kleinere Teams vollkommen ausreichend.
Kleiner Exkurs
Weil die Begriffe so gerne durcheinander gebracht werden, hier eine kurzer Erläuterung zur Terminologie:
- Website: Bezeichnet die komplette Website
- Webseite: Meint eine einzelne Seite der Website
- Homepage oder auch Home genannt: Das ist die Startseite – also die erste Seite der Website.
Sitemap als Landkarte der Website – Informationsarchitektur #1
Eine Sitemap ist gleichsam eine Landkarte der Website. Sie zeigt die hierarchische Struktur der Website inklusive aller Verzeichnisse und Unterseiten.
Bei der Erstellung der Sitemap werden zunächst alle benötigten Seiten aufgelistet. Wer mag kann dazu auch Post-its verwenden.
Anschliessend werden die verschiedenen Seiten kategorisiert. Daraus kann dann die Sitemap erstellt und später die Navigation abgeleitet werden. Natürlich können nicht alle Seiten in die Hauptnavigation gesteckt werden. Es gilt also zu priorisieren und für jede Seite das passende Plätzchen zu finden.
Exkurs: Wenn im Rahmen der Informationsarchitektur von der Sitemap gesprochen wird, ist nicht die XML-Sitemap gemeint. Die XML-Sitemap wird für die Suchmaschinenoptimierung gebraucht. So sollte nach dem Going Live der Website eine XML-Sitemap erstellt werden und diese in der Google Search Console hinterlegt werden.
Wer gerne mit Online Tools arbeitet, dürfte an GlooMaps: https://www.gloomaps.com/ Freude haben. Das kostenlose Sitemap Tool bietet drei verschiedene Ansichten und die erstellte Sitemap kann laufend weiterentwickelt, heruntergeladen und geteilt werden.
Seitentypen und Wireframes – Informationsarchitektur #2
Im nächsten Planungsschritt geht es darum, die benötigten Seitentypen zu bestimmen. Anschliessend werden die pro Seitentyp benötigten Inhalte definiert. Mittels Wireframes lassen sich diese Inhalte skizzenhaft festhalten. Doch beginnen wir mit den Seitentypen.
Welche Seitentypen gibt es?
Auf einer Website kommen ganz unterschiedliche Seitentypen (Pagetype) zum Einsatz. Zu den klassischen Seitentypen gehören die Startseiten, die Angebotsseiten, die About-Seite und die Kontaktseite. Aber auch die Blogübersichtsseite, die einzelnen (Blog-)Beitragsseiten, die Portfolioseiten, eine 404-Seite, das Impressum und die Datenschutzseite gehören dazu. Und je nach Business Case gibt es noch etliche weitere Seitentypen.
Was ist ein Wireframe?
Ein Wireframe (übersetzt Drahtmodell) ist eine stark reduzierte Darstellungsweise der Inhalte eines bestimmten Seitentyps – allerdings und das ist elementar: ohne visuelles Design.
Wireframes schaffen also Klarheit und sie fördern das Denken aus Kundensicht. Sie beschleunigen den Projekt-Ablauf, indem Inhalte und Funktionen definiert werden bevor über Farben und Schriften diskutiert wird.
Wireframes beschleunigen den Projektablauf
Wireframe haben noch zwei weitere grosse Vorteile: Ein Wireframe gibt eine klare und detaillierte Guideline an die Hand, welche Inhalte (Text, Bilder, Videos u.a.) und Funktionen auf der Website benötigt werden. Sie ermöglichen, dass die Entwicklung des Design, die Content-Erstellung und das Aufsetzen der benötigten Funktionen parallel laufen können (sofern es dafür unterschiedliche Ansprechpartner gibt).
1) Wenn die Wireframes der verschiedenen Seitentypen auf die benötigten Seiten (gemäss Sitemap) übertragen werden, sind die benötigten Inhalte der gesamten Website definiert. Es ist definiert, wo Bilder, Videos oder Texte benötigt werden. Das bedeutet nicht anderes als, dass sobald die Wireframes stehen, mit der Content-Produktion – also mit dem Schreiben der Texte und der Suche nach dem passenden Bildmaterial begonnen werden kann.
2) Üblicherweise werden in der Konzeptionsphase auch alle benötigten Funktionen definiert. Die konkrete Beschreibung der einzelnen Funktion in Textform ist in der Regel aufwändig und zeitintensiv. In Wireframes können diese weitaus einfacher festgehalten und definiert werden.
Macht es Sinn Wireframes in WordPress zu erstellen?
Es gibt verschiedene Möglichkeiten Wireframes zu erstellen. Einmal mehr sind Stift und Papier eine gute Option – insbesondere ganz zu Beginn. Doch früher oder später sind digitale Wireframes sinnvoll. Hierfür gibt es etliche Online Tools wie Balsamique, Figma, Adobe XD u.a. Allerdings ist die Erstellung der Wireframes in zusätzlichen Tools mit Aufwand (Zeit und in der Folge mit Kosten) verbunden. Entsprechend attraktiv ist es, die Wireframes direkt in WordPress aufzusetzen.
Wireframe Kit für Divi by WebSENNsation
WebSENNsation hat einen eigenen Wireframe Kit für Divi erstellt. Dieser Divi Wireframe Kit ermöglicht die Erstellung der Wireframes direkt in WordPress und basiert auf dem Divi Page Builder.
Der Nutzen dieses Vorgehens ist immens, denn es können gleich mehrere Anforderungen abgedeckt werden:
- Die Interaktionselemente sind klickbar und der Nutzerfluss wird verständlich
- Die Wireframes sind responsive – sprich für verschiedene Geräte optimiert
- Deutliche Beschleunigung des Projekts, weil keine Umsetzungen auf externe Tools nötig sind
Mit anderen Worten aus den Wireframes auf Papier entstehen bei der Umsetzung mittel des Divi Wireframe Kit gleichsam ein klickbarer, interaktiver und responsiver Prototyp. Damit ist der Meilenstein “Informationsarchitektur” geschafft und damit ist die Zeit für das Design gekommen.
Fazit: Eine gute Informationsarchitektur spart viel Ärger, Zeit und Geld
Widerstehen Sie der Versuchung und beginnen Sie nicht mit dem Design Ihrer Website ohne davor eine Planung der Informationsarchitektur gemacht zu haben. Ohne Planung zieht sich ein Website-Projekt unnötig in die Länge und sorgt für viel Frust. Wäre doch schade, wenn Sie sich nicht richtig über Ihre neue Website freuen könnten, nur weil Ihnen beim Gedanken an die Umsetzung graut.