Website-Entwicklung. Ein Thema, mit dem man sich in der Regel eher selten «zum Spass» auseinandersetzt. Der Grund ist einfach. Texter wissen nicht, was sie schreiben sollen, weil sie nicht Wissen, wie das Design aussieht. Designer wissen nicht, was sie gestalten sollen, weil ihnen der Inhalt fehlt und vom Leid der Entwickler will ich gar nicht klagen. Als Online-Marketer oder Web-Projektleiter gehört das recht umfangreiche und teils etwas komplizierte Knowhow über die Konzeptionierung einer Website allerdings zum Grundwissen. Mit einer Informationsarchitektur werden Websites Projekte effizienter und schneller umgesetzt und es gibt weniger Unstimmigkeiten unter den Fachexperten, denn jeder weiss was zu tun ist. Wer den kompletten Prozess durchmacht, der hat nachher sogar seine Website für Suchmaschinen optimiert.
Dank meiner langen Erfahrung in einer Web-Agentur konnte ich in den letzten 10 Jahren vermutlich über 300 Websites umsetzen. Angefangen als Entwickler und Versuche als Designer machten mich zur idealen Schnittstelle zwischen Kunden und der Agentur. Durch die Zusammenarbeit mit Designer, Usability-Experten, User Experience Spezialisten, Front- sowie Backend-Entwicklern konnte ich die Bedürfnisse aller Seiten kennenlernen und mir einen fundierten Wissensschatz anlegen. Die wichtigsten Grund(edel)steine zur Website-Konzeption aus dieser Schatzkiste möchte ich euch in diesem Blogbeitrag näherbringen und erklären. Wer nicht lesen will, kann natürlich auch den Podcast hören.
Vor allem geht es mir um ein Prinzip zur Websitegestaltung. Nur die wenigsten Marketer wissen tatsächlich, was es mit diesem Prinzip auf sich hat und wie es funktioniert. Wahrscheinlich ist es vielen einfach zu theoretisch.
Für mich ist dieses Prinzip aber pures Gold wert. In der Umsetzung und der Entwicklung ist diese Herangehensweise keine Stütze – sie ist ein unglaublich starkes und sehr hilfreiches Fundament!
Der übliche Ablauf eines Redesigns
Normalerweise verläuft die Gestaltung einer neuen Website folgendermassen: Ihr beauftragt eine Agentur die euch gemäss euren Angaben ein paar Designvorschläge unterbreitet. Ihr entscheidet euch für einen davon und bekommt dann etwas später den Auftrag eine Sitemap zu erstellen oder die Agentur liefert euch einen Vorschlag. Und da verzieht sich oft jegliche Anfangsmotivation und Euphorie recht schnell in den Keller.
Die Sitemap ist nämlich völlig hierarchisch und unflexibel strukturiert. In den meisten Fällen wird meist nur die Navigation darin abgebildet. Von Inhalt, Funnels, Journeys oder weiteren Informationen fehlt jede Spur.
Wie ist eine Sitemap aufgebaut?
Eine Sitemap ist nichts anderes als Struktur eurer neuen Website in Form aller vorhanden Seiten. Sie zeigt die hierarchische Auflistung der Ordner-Struktur auf: Wie ein Wasserfall geht es also von der Startseite zu den verschiedenen Unterseiten.
Mit der Navigations-Struktur werden dann gewisse Platzierungen im Layout unterteilt, die dann jeweils benannt werden. Beispielsweise «erste Navigation», «zweite Navigation», «Footer Navigation» usw. Diese Navigationspunkte werden wiederum in entsprechende Seiten gepackt. Die Navigations-Struktur beschreibt quasi den Weg, den der Visitor auf eurer Seite gehen soll.
Soweit – so gut, könnt man meinen. Denn genau so soll eine Website schliesslich aufgebaut sein. Was hat es also mit der Informationsarchitektur auf sich?
Die Informationsarchitektur ist das Konzept eurer kompletten Website
Bei der Informationsarchitektur geht es darum, dass man sich primär mit dem Strukturieren des Inhalts auseinandersetzt. Und wenn ihr das nicht macht, dann tut das eure beauftragte Web-Agentur. Wenn ihr euch schon mal gefragt habt, warum ein Design so teuer ist, dann könnte es daran liegen, dass der Designer sich ganz alleine im stillen Kämmerli die Gedanken dazu selber macht. Oft gehen wichtige Details von Kundenwünschen dann verloren, wenn der Designer nicht selber zur Zielgruppe gehört.
Zunächst ist es wichtig zu verstehen, dass die grundlegende Informationsarchitektur rein gar nichts mit der Grafik oder dem Aussehen der Website zu hat.
Hier geht es in erster Linie um die Strukturierung eurer gesamten Seite und um deren Inhalt. Als Arbeitsdokument kann man später die Wireframes, Mockups und schlussendlich das Design damit verknüpfen. Das Prinzip stammt aus der Softwareentwicklung, bei der man versucht, Prozesse schrittweise zu visualisieren. Für mich ist sie eines der besten Mittel, um das Grundgerüst einer Website aufzuzeigen beziehungsweise aufzuzeichnen.
Die Gliederung der iA einer Website
Der rote Faden, anhand dem sich die Informationsarchitektur aufbaut, sind Fragen. Mit diesen können die grundlegenden Bausteine definiert werden.
«Wo befindet sich der User?» ist die erste Frage, die gestellt werden muss. Gut, diese Frage erfindet das Rad sicherlich nicht neu und spielt bei jeder Art der Websitegestaltung eine gewichtige Rolle. Doch die Informationsarchitektur geht da noch etwas tiefer.
Mit der zweiten Frage wird nämlich ganz klar festgelegt, worum es überhaupt auf der Seite geht. Das mag euch jetzt wahrscheinlich völlig logisch erscheinen. Ist es auch. Doch in den wenigsten Sitemaps wird dieser Punkt beachtet. Oftmals ist hier die Betitelung eines Navigationspunkts wenig bis gar nicht aussagekräftig.
Die dritte Frage setzt sich mit dem Navigationsweg des Users auseinander. Wie kommt der Besucher von einem Punkt zum nächsten? Es wird demnach die Verlinkung der Navigationspunkte thematisiert.
Die Informationsarchitektur geht also deutlich tiefer und setzt sich nicht nur mit den einzelnen Seiten auseinander, sondern detailliert mit dem ganzen Zusammenspiel aller Seiten. Das komplette Angebot wird beleuchtet und letztendlich gilt es, Wege zu kreieren, über die man mit dem Kunden in Kontakt treten kann.
Wie sieht der Prozess einer iA genau aus?
Anders gefragt: Wie erstellt man eine Informationsarchitektur? Nun, letztendlich heiligt der Zweck die Mittel. Ihr könnt eure iA auf PowerPoint, Word, Excel, usw. darstellen. In der Zusammenarbeit mit Kunden bevorzuge ich die physische Variante mit Post-Its und einer grossen Wand. Für die weitere Verarbeitung würde euch das Tool «FlowMap» ans Herz legen, das genau dafür konzipiert wurde und mit dem sich selbst Marketing-Laien schnell zurechtfinden. Die 11 USD pro Monat, die für FlowMap anfallen, sind auf alle Fälle gut investiert. Zudem habt ihr die Möglichkeit, das Tool zunächst kostenlos an einem oder zwei Projekten auszuprobieren. Bedenkt aber bitte, dass FlowMap nicht zwingend für unglaublich komplexe Projekte geeignet ist. Für solche Mammut-Aufgaben würde sich da schon eher komplexe MindMap-Programme eignen.
Der erste Schritt bei der Erstellung einer Informationsarchitektur ist im Grunde nichts anderes, als eine ganz normale Sitemap darzustellen und somit die Struktur eurer neuen Website zu verankern. Dafür gibt es verschiedene Wege für den Start. Ihr könnt den bestehenden Inhalt eurer Website auf Kärtchen schreiben und neu sortieren oder ihr macht ein Brainstorming im Team.
Aber am besten veranschauliche ich das ganze anhand eines Beispiels.
Wir gehen mal davon aus, dass wir eine Website für ein Unternehmen aufbauen, das Sitzungszimmer in verschiedenen Grössen vermietet. Es ist ein Startup und hat bisher noch keine Website.
1. Brainstorming
Im Zentrum steht der Einsatzbereich und das Angebot. Was genau bieten wir? Mit einem Brainstorming stellen wir fest, dass viele Begriffe in Frage kommen könnten: Workshop-Raum, Meeting-Raum, Seminar-Raum, Schulungs-Raum, Sitzungszimmer etc.
2. Verwandte Begriffe und Synonyme prüfen
Bekanntlich wissen wir selbst nicht alles, also her mit Thesaurus oder Woxikon, um verwandte Begriffe zu prüfen. Auch die Google Vorschläge beim eintippen oder zu unterst auf der ersten Suchresultatsseite liefern interessante Erkenntnisse.
3. Was würde die breite Masse für Fragen stellen?
Mein kleiner Geheimtipp, der auch ideal als Inspirationsquelle für Content dient ist die Website Answer the Public. Dort könnt ihr ein Keyword eingeben und erhaltet Fragen, vorangestellte und nachfolgend eingegebene Wörter.
Oft ergibt sich daraus zusätzlich noch weitere Informationen wie die Anforderungen an das Produkt. Im Beispiel der Räume: Grösse, Bestuhlung, Technik, usw. Das spielt nämlich auch bei der Suchmaschinen-Optimierung eine wichtige Rolle: Wir würden also nicht nur von Räumen reden, sondern auch unbedingt die oben definierten Einsatzbereiche als Keywords einsetzen.
4. Card Sorting
Beim Card Sorting geht es darum die verschiedenen Keywords in eine Struktur zu bringen. Verwandte Begriffe werden gruppiert und je näher ein gruppierter Stapel bei einem anderen liegt, desto wichtiger ist die Verbindung dieser.
Für die Website in unserem Beispiel hat sich herausgestellt, dass sie über folgende Themen verfügt:
- Einsatzbereich: Sitzungszimmer, Konferenzraum, Saal, etc.
- Anwendungsmöglichkeiten: LEGO® Serious Play®, Werkstatt, 3D-Drucker
- Region und Erreichbarkeit
Und als wichtiger Inhalt hat sich herausgestellt, braucht es:
- Ausstattung
- Technische Hilfsmittel
- Grundriss
- Einrichtungsmöglichkeiten
- Preise
5. SEO Prüfung: Die Relevanz der Keywords checken
Mit gefühlten 4 Millionen Karten aus Keywords lässt sich nur schwer eine schlanke Website bauen. Mit Ubersuggest prüft ihr das kostenlos das Suchvolumen und definiert das wichtigste Keyword pro Stapel.
6. Seitenstruktur erstellen
Gratulation! Der mühsamere Teil ist geschafft und ihr habt die Grundlage für eure Suchmaschinen-Optimierung gelegt. Jetzt wird die Sitemap erstellt. Nehmt die Stapel und baut eine hierarchische Struktur.
7. Inhalt pro Seite definieren
Und jetzt gelangen wir an den Punkt, der sich nun von einer Sitemap am meisten unterscheidet. Ihr steckt den Inhalt pro Seite ab. Erinnert ihr euch noch an die Fragen, die eine Informationsarchitektur beantworten sollte? Die sind jetzt wieder wichtig.
- «Wo befindet sich der User?»
- «Worum geht es auf der aktuellen Seite?»
- «Wie gelangt man zum nächsten Punkt?»
Jetzt habt ihr die Möglichkeit, alle Details einzuarbeiten, die auf vielen Website einfach nicht berücksichtigt werden. Überschriften, Call to Action und die Beschriftung der Buttons sind hier nur ein paar Beispiele. Dann könnt ihr direkt festlegen, wie der Header aussehen soll. Zudem könnt ihr Inhalts-Stichpunkte zu jedem Punkt verfassen und einfügen. Kurz: Ihr könnt jedes Element der einzelnen Seite jetzt schon ausarbeiten und bestimmen, was die Seite letztendlich beinhaltet.
Ihr wisst noch nicht so recht, wie ihr die einzelnen Seiten strukturieren sollt? Das Inverted Pyramid Design könnte euch helfen eure Seite nach psychologischen Kriterien sinnvoll zu strukturieren.
Ich empfehle pro Seite gleich noch die wichtigsten SEO relevanten Informationen festzulegen:
- Site-Title
- Meta-Description
- URL
Fangt dabei bei den Seiten der untersten Hierarchie an. Die Startseite solltet ihr ganz zum Schluss in Angriff nehmen!
8. Seitentypen definieren
Zu guter letzt definiert ihr Seitentypen, indem ihr alle Seiten mit ähnlichem Aufbau gruppiert. Wieso? Ein Designer muss ja nicht 6x dieselbe Seite mit unterschiedlichem Inhalt grafisch umsetzen. Ein Beispiel zur Orientierung sollte ausreichen.
So geht’s mit der Informationsarchitektur weiter: Wireframes erstellen
Nun habt ihr eine wirklich fundierte Grundstruktur der Website gestaltet. Jetzt ist der Moment gekommen, wo ihr eine Skizze in Form eines Wireframes erstellen könnt. Dies könnt ihr in der iA anhängen und somit eurem Text-Team überreicht werden. Dieses hat dann eine klare und detaillierte Guideline zur Hand, nach der die Texte verfasst werden können. Parallel könnt ihr diese iA eurem Design-Team in die Hände drücken. Mit dem ersten Textdraft für einen Seitentype kann das Design-Team ein Mockup erstellen und solange ans Fein-Tuning gehen, bis es für Texter und Designer passt. Dieses Zusammenspiel ist sehr wichtig. Denn Design ohne Inhalt ist nichtssagend. Und ohne Designvorstellung entstehen mitunter Texte, die völlig am Thema vorbeilaufen. Nur wenn Design und Text simultan miteinander agieren, entstehen wirklich gute Websites.
Informationsarchitektur zusammengefasst
- Die iA beschreibt im Grunde das Konzept eurer kompletten Website.
- Im besten Fall zeigt es nicht die Struktur der Website auf, sondern auch den Inhalt der einzelnen Seiten.
- Die Informationsarchitektur könnt ihr ganz easy mit eurem Design verknüpfen und habt somit praktisch eine detaillierte Blaupause für eure neue Website in der Hand.
- Die iA ist ein geniales Tool, das euch nicht nur enorm Zeit spart, sondern auch euer Nervenkostüm schont.
Abschliessend möchte ich euch noch einen Tipp mit auf den Weg geben: Wenn ihr die Gestaltung eurer Website einer Agentur in die Hände legt, fragt sie nach der geplanten Informationsarchitektur. Das mag zwar bei manchen Agenturen auf Schulterzucken stossen, denn vielleicht nennen sie diesen Prozess anders oder haben sogar noch nichts davon gehört. Sollte das der Fall sein, dann schickt ihnen einfach den Link zu diesem Blogbeitrag oder zu meinem Podcast. Und – ganz klar – würde ich mich sehr über eur Feedback freuen. Wie geht die beauftragte Agentur die Websitegestaltung an? Wendet euer Partner dieses System an? Hat es funktioniert? Oder nicht?
Und natürlich freue ich mich immer über euren Input und eure Fragen zum Thema. Meldet euch einfach bei mir.
