Im Rahmen eines User-Centered Design-Prozesses, gestalten wir die Struktur aller Informationen und Inhalte der zukünftigen Website. Dieser Prozess beschreibt die Informationsarchitektur (IA). Ziel ist es, eine möglichst zielgruppengerechte und nutzerfreundliche Gestaltung zu schaffen, welche dem User eine schnelle und einfache Orientierung bietet und hilft, innerhalb einer Website ein gewünschtes Ziel zu erreichen.
Bei der Planung und Gestaltung von Websites legt eine smarte Informationsarchitektur den Grundstein für eine erfolgreiche Website. Wir benennen, kategorisieren und strukturieren vollumfänglich das zu transportierende Informationsangebot und erarbeiten ein System für die gesamte Website-Struktur. Dabei klären wir, welche Elemente das Navigationssystem braucht, wie der User zwischen den verschiedenen Inhalten navigiert und wie Inhalte mittels der Suche gefunden werden.
Es gibt verschiedene Anforderungen an eine Website und damit auch an die Informationsarchitektur. Neben den Bedürfnissen des Users spielen definierte Business-Ziele und technische Gegebenheiten, wie z.B. Schnittstellen zu Dritt-Systemen, eine entscheidende Rolle im Hinblick auf die Relevanz der Inhalte. Ebenso kann bei der Strukturierung der Inhalte leichte Erweiterbarkeit sowie das Verarbeiten und Vererben der Inhalte in angebundene Systeme (Digital Asset Management) eine Anforderung sein.
Das Erarbeiten einer Informationsarchitektur dient allen Disziplinen, welche an der Konzeption einer Website beteiligt sind:
- Texter und Kommunikationsfachleute, welche die Texte schreiben
- User Interface Designer und Interaction Designer, welche die Inhalte gestalten
- Online Marketing-Fachleute, welche Marketing Aktivitäten und die SEO-Strategie planen
- Web- & Frontend Entwickler, welche die Website umsetzen und Schnittstellen integrieren
Vorgehen und Methoden
Um ein optimales UX Design (User Experience Design) zu erhalten, welches den Nutzer positiv durch das digitale Produkt führt, muss in erster Linie klar sein, welche Inhalte in welcher Form und an welchen Positionen ersichtlich sein sollen. Um das Grundgerüst der gesamten Website aufzuzeigen, visualisieren wir schrittweise die relevanten Inhalte und Prozesse. Die Informationsarchitektur wird in Tabellen und Diagrammen dokumentiert.
Wireframes, Prototypen oder Layouts gehören nicht in diesen Prozess. Meistens sind diese Arbeitsdokumente der nächste Schritt in der Konzeptionsphase und schliessen die Ergebnisse der IA visuell ein.
Bevor wir die Struktur und das Navigationssystem der Website erstellen, schauen wir uns die bestehenden Inhalte genauer an, vor allem wenn es sich um ein Redesign handelt. Hier dienen uns bestehende Sitemap (Baum-Diagramm aller Seiten), Definition der Business-Ziele sowie Web-Analytics, um die Relevanz der vorhandenen Inhalte einzuordnen.
Folgende Schritte helfen beim Prozess der Informationsarchitektur:
- Inhalts-Inventar
Untersuchung der Website, um bestehende Inhalte zu lokalisieren und identifizieren. - Inhaltsprüfung
Evaluieren der Nützlichkeit des Inhalts, dessen Richtigkeit, Artikulation und Gesamteffektivität. - Informationsgruppierung
Definition von nutzerzentrierten Beziehungen zwischen den Inhalten. - Entwicklung einer sprachlichen Einheit (Taxonomie)
Definition einer Namenskonvention (kontrolliertes Vokabular), um diese auf allen Inhaltsseiten anzuwenden. - Erstellen von Informationsbeschreibungen
Definition nützlicher Zusatzinformationen, die genutzt werden können, um Navigationselemente, die das Entdecken in Inhalten erleichtert, zu generieren (z.B. "Related Links" oder andere Navigationselemente).
Während dieses Prozesses können verschiedene Methoden in Bezug auf die Inhalte behilflich sein.
Beim Kategorisieren der Inhalte, Erstellen der Menüstruktur sowie beim Wording können Methoden wie das Card-Sorting helfen. Hierbei werden mögliche oder zukünftige Nutzer eines Informationssystems gebeten, die Elemente so zu benennen und anzuordnen, wie sie erwarten würden, diese vorzufinden. Die Teilnehmenden erhalten Karten mit aufgedruckten Begriffen und sortieren diese in eine für sie logische Struktur. Das Ergebnis dieser Methode sind «intuitive» Menüstrukturen, Informationsarchitekturen, Workflows oder Navigations-Pfade.
Das Card-Sorting findet idealerweise in Form eines Workshops statt.
Auch Customer Journey-Maps können bei der Gestaltung der Informationsarchitektur unterstützen und bei der Kategorisierung der Inhalte behilflich sein. Die User Journey Map visualisiert und beschreibt den Weg des Users und die Interaktionen mit der Website. Weiterhin kann die Customer Journey Map Aufschluss über den Umfang der Website geben und mögliche Funktionalitäten aufzeigen, die benötigt werden, um die Schlüsselaufgaben zu erledigen.
Abbilden der Informationsarchitektur als Sitemap
Bevor eine Informationsarchitektur nun als Sitemap (Baum-Diagramm) visualisiert wird, werden die Inhalte benannt, kategorisiert und verknüpft. Diesen Prozess nehmen wir entweder eigenständig vor oder erarbeiten die Struktur gemeinsam mit dem Kunden in dem Workshop «Navigationsstruktur & Inhaltskonzept» anhand von Post-its an einer Wand. Wir bevorzugen das Workshop-Format, da wir in diesem Setup «nah beim Kunden» sind und die Interessen der unterschiedlichen Stakeholder berücksichtigen können.
Die Ergebnisse fliessen dann in eine Sitemap, welche die Informationsarchitektur aufzeigt. Dazu nehmen wir die einzelnen Inhalte und Seiten und legen sie in einer hierarchischen Struktur ab, welche der Userführung dienen. Für das Erstellen von Sitemaps gibt es verschiedene Tools mit diversem Detailierungsgrad, z.B. Lucidchart, Slickplan, Flowmapp. Bei uns erhält der Kunde auch Zugang zum Arbeitsdokument, so dass wir kollaborativ dran arbeiten können.
Es gibt die simple Sitemap, welche die Seitenstruktur und Navigation als Baum-Diagramm abbildet. Bestenfalls ist diese angereichert mit Seitentypen und Meta Descriptions. Auf diverse Inhalte, User Journeys, Funnels oder Interaktionen wird nicht eingegangen.
Sitemap
Und es gibt Sitemaps in Form von Flow Charts. Das sind Flussdiagramme, welche Seitenabfolge, Seitentypen, Prozesse und Interaktionen zeigen. Die Seiten können bereits als Wireframes oder als unterschiedliche Seitentypen dargestellt werden. Diese Art der Sitemap ist visueller und damit emotionaler. Das Anreichern mit Daten und Inhalten macht diese Form der Sitemap effektiver und dient dem Workflow in der Konzeptphase.
Flow Chart
Wichtig dabei ist, dass die grundlegende Informationsarchitektur noch keine Gestaltung beinhaltet und nichts mit dem späteren visuellen Design der Website zu tun hat. Im nächsten Schritt können wir die Struktur und den Aufbau der einzelnen Webseite als Wireframe darstellen. Damit bekommen das Projektteam und der Kunde Einblick in die Navigations- und Inhaltselemente, Textbausteine sowie in die interaktiven Elemente wie Links und Button.
Definieren der Seitentypen und der Inhaltselemente
Das Definieren von Seitentypen dient dem Projektteam und dem Kunden. Hierbei werden alle Seiten mit ähnlichem Aufbau und Hierarchiestufe gruppiert. Das Unterscheiden der Seitentypen hilft beim Erstellen von Design-Komponenten und Produzieren von Inhalten, wie z.B. Texten und SEO-Strategie. Der Visual Designer muss stellvertretend nur eine Seite des Seitentyps designen.
Beim Definieren der Inhaltselemente bildet die Einzelseite ein Gefäss, welches wir mit Elementen und Komponenten füllen und damit den Seitenaufbau umreissen. Nun werden Details eingearbeitet wie Texte, Bilder, Call-to-Action-Elemente usw. Jetzt ist auch ein guter Moment, um die wichtigsten SEO relevanten Informationen festzulegen.
Erstellen von Wireframes
Die Grundstruktur der Website steht nun fest und wir kennen die relevanten Inhalte. Die Struktur einer Seite wird nun in einem Wireframe visualisiert. Diese schematische Darstellung des User Interfaces zeigt die Positionierung der Elemente wie Navigation, Orientierungshilfen, Content und Logo. Wireframes werden von User Experience Designer in der Konzeption eingesetzt und dienen als Grundlage zur Erstellung von interaktiven Prototypen, welche im Usability Testing eingesetzt werden.
Informationsarchitektur in unserem Alltagsgeschäft
Der Umfang der Erstellung einer Informationsarchitektur richtet sich gewissermassen nach der Komplexität der Website. Oft entsteht diese Website-Struktur im Rahmen eines Vorprojektes, wobei Funktionen der Website, Inhaltsumfang und Ideen definiert werden. Dieser Prozess verlangt eine enge Zusammenarbeit zwischen Kunde, seiner Zielgruppe bzw. den zukünftigen Usern und uns als Online Agentur.
Wird dieser Prozess aus finanziellen und zeitlichen Gründen verkürzt oder übersprungen, fliessen die Überlegungen zur Inhalts- und Interaktionsstruktur in die Designphase ein, welche dadurch verlängert wird und ein höheres Budget erfordert. Finden diese Überlegungen zur Informationsarchitektur nicht statt, geht dies zu Lasten einer guten User Experience. Relevante Inhalte können untergehen und eine konsistente User Journey unterbrechen.
Suchen Sie Unterstützung?
Sie interessieren sich für einen Checkup hinsichtlich der Informationsarchitektur ihrer Website? Oder haben Sie vor, ihre Online Kommunikation neu zu lancieren?
Gerne beraten wir Sie dazu.
