Definition: Was ist die Informationsarchitektur einer Website?
Mit dem Ausdruck "Informationsarchitektur" (Abk. IA) wird der Aufbau einer Website umschrieben. Dieser kommt durch die strukturierte Anordnung der unterschiedlichen Unterseiten einer Website zustande. Ausgehend von der Startseite werden Benutzer:innen entsprechend der festgelegten Gliederung durch die Themen und Inhalte der Website geleitet.
Die Informationsarchitektur ermöglicht den Nutzer:innen somit die Orientierung, bietet dem Redaktions-Team eine Struktur für die Content-Pflege und Webbots der Suchmaschinen (z. B. Google Crawler) die Möglichkeit, die Website nach relevanten Inhalten zu durchsuchen.
Vorüberlegungen: Informationsarchitektur ableiten
Die Informationsarchitektur dient als Grundgerüst für eine Website und sollte deshalb nicht unüberlegt oder ohne vorhergehende Analyse und Planung aufgebaut werden. Unsaubere Hierarchien, Kategorien und Kennzeichnungen haben Einbußen in den Rankings und hohe Absprungraten zur Folge.
Es macht demnach Sinn, genügend Ressourcen für diese Phase der Website-Entwicklung aufzuwenden. Die Website, ihre Struktur und Inhalte sollten u. A. zur Zielgruppe, den Unternehmenszielen und dem eigenen Geschäftsmodell passen:
Zielgruppe, Nutzerintentionen und Inhalt
Stellen Sie sich die Frage: Wonach sucht meine Zielgruppe in den Suchmaschinen? Neben den relevanten Suchbegriffen spielt auch die Suchintention eine wichtige Rolle. Die Suchintention der Nutzer:innen kann in vier verschiedene Kategorien unterschieden werden:
- Know/Wissensaufbau: Besucher:innen möchten mehr über ein Thema erfahren und ihr Wissen über dieses vertiefen.
- Do/Interaktion: Besucher:innen erwägen eine Interaktion, z. B. den Kauf eines Produktes oder die Kontaktaufnahme mit einem Unternehmen .
- Visit/Physischer Besuch: Besucher:innen möchten einen physischen Ort, z. B. ein Geschäft oder eine öffentliche Einrichtung besuchen.
- Website/Markenname: Besucher:innen suchen eine bestimmte Website, z. B. nordseite.com.
Keywordrecherche, -clusterung und anschließende Redaktionsplanung helfen, die relevanten Inhalte strukturiert zu erstellen und auf Ihrer Website zu platzieren. Ein Primärkeyword sollte dabei auf einer und nicht mehreren Unterseiten behandelt werden, um sogenannte Switching-Probleme in den Suchmaschinen zu verhindern. Google erkennt in diesem Fall nicht, welche Seite für den entsprechenden Suchbegriff relevant ist, die Keywords kannibalisieren sich und konkurrieren in den SERPs (Search Engine Result Pages).
Sollten Sie aufgrund ähnlicher Produkte o. Ä. nicht verhindern können, dass der Content sich auf zwei verschiedenen Seiten sehr stark ähnelt, sollten Sie mit einem Canonical-Tag im Head-Bereich der Website auf die ursprüngliche Ressource verweisen.
Obwohl die Produktion des Inhalts, dem Aufbau der Informationsarchitektur nachgelagert ist, sollte schon in diesem Prozessschritt eine klare Vorstellung der Strukturierung des Inhalts bestehen. Soll es z. B. einen Knowledge-Hub in Form eines Lexikons geben? Wo kommen die Informationen über das Leistungsangebot unter und welche Informationen müssen auf den ersten Blick erkennbar sein?
Markenkern und Geschäftsmodell
Der Markenkern und das Geschäftsmodell bestimmen ebenfalls über die Gestaltung der Informationsarchitektur einer Website. Besucher:innen erwarten sich von einem Unternehmen, dessen Markenpersönlichkeit einen hohen Grad an "Ästhetik" und "Innovation" verspricht einen anderen Seitenaufbau als von einem Unternehmen mit den Persönlichkeitsmerkmalen "traditionell/familiär". Der Webauftritt einer kulturellen Einrichtung, wie z. B. eines Museums ist anders strukturiert als der eines Handelsunternehmens.
Welche Produkte oder Dienstleistungen angeboten oder welche Themen auf der Website dargestellt werden sollen, wird also zwangsläufig über deren Aufbau entscheiden.
Unternehmensziele
Welches Ziel wollen sie auf Unternehmensebene erreichen und welche auf Maßnahmenebene? Die Implementierung einer Website ist immer mit Aufwand verbunden. Egal, ob dieser höher oder niedriger ausfällt – der Nutzen sollte die Kosten langfristig übersteigen.
Einige Website-Betreiber:innen nutzen eine Website als Visitenkarte, um Informationen über ihr physisches Geschäft zu kommunizieren. Andere generieren Umsatz über einen Online-Shop oder nutzen die Website als reine Lead-Plattform. Die Festlegung der zu erreichenden Ziele ist entscheidend für die Informationsarchitektur.
Marktpositionierung und Wettbewerber
Halten Sie eine Preisführerschaft oder gewinnen Sie Kunden vor allem durch einen Zusatznutzen, z. B. eine detaillierte Beratung, zu einem höheren Preis? Was erwartet die Zielgruppe von Ihrer Website aufgrund Ihrer Positionierung im Marktumfeld? Die Erfahrungen der Nutzer:innen mit Wettbewerber-Websites hat Einfluss auf die Wahrnehmung Ihrer Website. Fragen Sie sich, wie Sie sich abheben können und welche Information die Website unbedingt enthalten muss. Die Erkenntnisse werden die Architektur der Website beeinflussen.
Besonders bei der Zusammenarbeit mit Agenturen ist es wichtig, dass alle diese Überlegungen innerhalb von Beratungsgesprächen oder im Rahmen von Workshops besprochen und für den weiteren Projektverlauf dokumentiert werden.
Konzept: Informationsarchitektur erstellen und visualisieren
Informationsarchitekt:innen nutzen für die Visualisierung der Architektur unterschiedliche Tools, von denen wir Ihnen im Folgenden einige vorstellen. Außerdem gehen wir tiefer auf Komponenten der Architektur, z. B. die Navigation oder Merkmale unterschiedlicher Seitentypen ein.
Wireframes, Mockups und Tools zur Visualisierung
Wireframes werden im Prozess vor den Mockups erstellt und skizzieren die Website, immer mit der gewünschten Usability im Fokus. Mockups enthalten wiederum Farben, Elementformen sowie weitere Designelemente und stellen den fertigen Prototyp der finalen Website dar.
Wireframe.cc
Das cloud-basierte Wireframe-Tool Wireframe.cc überzeugt mit Einfachheit: Features sind in der kostenlosen Version begrenzt, reichen aber für kleinere Projekte aus. Gibt es mehrere Nutzer:innen, die auf die Anwendung zugreifen möchten, muss auf die bezahlte Variante gewechselt werden.
Balsamiq
Baslamiq ist ein reines Wireframe-Tool, das dazu zwingt, sich zunächst ausschließlich auf die Struktur der zukünftigen Website zu fokussieren. User:innen können zwischen drei unterschiedlichen Installationsmöglichkeiten entscheiden (Cloud, Desktop, Google Drive). Die Preise variieren je nach Version zwischen 90 und $1990 pro Jahr oder zwischen 44,50 und $89,00 pro User, je nachdem wie viele Lizenzen innerhalb eines Unternehmens vergeben werden.
Axure
Umfangreichere Funktionen bietet die Anwendung Axure. Hiermit können Sie auch Mockups, also vollumfängliche Prototypen mit Elementen, Benutzerbefehlen und Interaktionsflüssen erstellen.
Sketch
Elemente, User Journeys und Wege über die Website können mit Sketch dargestellt werden. Die ersten 30 Tage steht das Tool kostenlos zur Verfügung, danach kostet es $9 pro Monat pro Editor. Das Tool eignet sich vor allem für Teams, in denen Editoren eng mit Webdesignern zusammenarbeiten.
Adobe XD
Adobe XD kann einen Monat lang kostenlos getestet werden und kostet danach für Einzelanwender:innen ca. 12,00 € pro Monat. Mit dem Tool können nicht nur Wireframes gebaut werden. Webdesigner:innen können diese anschließend farblich und dynamisch gestalten. Mittels Prototyping werden Klickwege, Interaktionen und Nutzerbefehle dargestellt, die Dynamik der Seite wird für das Co-Editing und andere Projektteilnehmer:innen sichtbar.
Weitere digitale Tools sind z. B. MockFlow, Figma und Lucidchart.
Analog: Stift und Zettel
Neben den digitalen Möglichkeiten werden auch weiterhin analoge Wege genutzt, um die Informationsarchitektur einer Website darzustellen. Flip-Charts, Haftnotizzettel unterschiedlicher Farben und Stifte fördern, vor allem bei der initialen Ausarbeitung, die kreative Zusammenarbeit im Team. Die Ausarbeitung sollte anschließend auch digital dargestellt werden.
(Aufgeführte Tool-Preise entsprechen dem Stand: August 2022)
Website-Hierarchie, unterschiedliche Seitentypen und Suchfunktion
Herkömmliche Websites, sogenannte Multi-Page-Anwendungen bestehen aus einer Startseite und mehreren Unterseiten mit unterschiedlichen URLs, während Single Page Applications auf nur einer URL basieren. Egal, für welchen Website-Typ Sie sich entscheiden – die Darstellung der Informationsarchitektur sollte in jedem Fall erfolgen.
Die Tiefe der Unterseiten ist mit der Anzahl der Hierarchien gleichzusetzen. Grundsätzlich gilt: Interessent:innen sollten ihr Ziel, z. B. den Kauf eines Produkts, mit maximal drei Klicks erreichen können. Dieses Ziel ist in den meisten Fällen nicht nur über einen Klickweg erreichbar. Es ist davon abzuraten, zu tiefe Seitenhierarchien aufzubauen. Das erschwert nicht nur den Nutzer:innen die Orientierung, sondern kann auch dazu führen, dass Google die tiefliegenden Seiten nicht indexiert. Von mehr als fünf Hierarchieebenen raten wir ab.
Eine Kategorie sollte mit ihren Unterkategorien semantisch verknüpft sein, damit Nutzer:innen sich über die Hierarchieebenen hinweg zurechtfinden.
Aber was bedeutet semantische Verknüpfung genau? Semantische Verknüpfungen begegnen uns tagtäglich, ohne sie wäre unser Leben chaotisch und unübersichtlich. Sie sorgen dafür, dass wir Begriffe kategorisieren und strukturieren, einem Wort eine Bedeutung zuordnen können. So würde z. B. jeder das Wort "Apfel" der Kategorie "Obst" und nicht der Kategorie "Gemüse" zuweisen.
Bei der Gestaltung der einzelnen Seitentypen ist darauf zu achten, dass Merkmale eines Seitentyps nicht zu oft auch für einen anderen Seitentyp zum Einsatz kommen. So wird die Abgrenzung der Themen und Inhalte einer Website auch visuell über die Struktur der unterschiedlichen Seitentypen und der enthaltenen Merkmale deutlich. Ein Beispiel: Eine Produkt-Detailseite sollte sich optisch immer von einer Produkt-Kategorieseite abheben. Eine Detailseite eines Blogs enthält andere Merkmale als eine Angebotsübersicht.
Website-Betreiber:innen umfangreicherer Websites können Suchfunktionen nutzen, um den Besucher:innen eine Abkürzung anzubieten.
Orientierung durch Navigation, URL-Struktur und Breadcrumb
Website-Navigation
Eine Navigation kann auf unterschiedlichste Art und Weise gestaltet und einer Website hinzugefügt werden (global, lokal, kontextbezogen). Wichtig ist, dass diese selbsterklärend ist und sich hinter den enthaltenen Navigationspunkten der Inhalt befindet, der über den entsprechenden Begriff versprochen wird (Stichwort: Semantik).
In die Meta-Navigation werden Links aufgenommen, die auf jeder Unterseite der Website erreichbar sein sollen. Die Meta-Navigation befindet sich meistens im Header der Website. Typische Funktionen, die hier aufgeführt werden, sind die Sprachauswahl, Login-Möglichkeiten, die Newsletter-Anmeldungen, der Warenkorb oder eine Kontaktmöglichkeit. Die Meta-Navigation kann als globale Navigation bezeichnet werden, weil sie immer, unabhängig von der Unterseite, auf der man sich gerade befindet, sichtbar ist.
Eine Lokale Navigation kann zusätzlich zur globalen Navigation, z. B. am Seitenrand eingesetzt werden. Die Anzeige soll einen Überblick über die Unterverzeichnisse geben und wird vor allem bei tiefen Hierarchien, z. B. Produktverzeichnissen genutzt.
Kontextbezogene Navigationselemente können Cross-Selling Angebote enthalten, verwandte Themen teasern oder für Nutzer:innen relevante Seitenverknüpfungen unterschiedlicher Verzeichnisse herstellen. Beispiel: Sie befinden sich auf der Detailseite eines Online-Shops, das ein T-Shirt mit Preis, Produkteigenschaften und Bildern genau beschreibt. In einer Galerie am Seitenende wird ein Kombinationsvorschlag mit einer Jeans präsentiert. Die Seite, auf der Sie sich befinden gehört zum Unterverzeichnis "Oberteile", die hier eingesetzte kontextbezogene Navigation schlägt eine Unterseite aus dem Verzeichnis "Hosen" vor.
Breadcrumb
Die Breadcrumb wird von Entwickler:innen als zusätzliche Orientierungshilfe zur Navigation eingesetzt. Üblicherweise ist sie eine Textzeile, die anzeigt, in welchem Seitenbereich man sich innerhalb der Website befindet. Die Textzeile enthält dann die Kategorien oder Verzeichnisse der Website, hier können auch alternative Titel angegeben werden, falls der ursprüngliche Titel zu lang ist. Auch die Breadcrumb befindet sich im oberen Seiten-, in den meisten Fällen, dem Head-Bereich der Website. Wir empfehlen den Einsatz einer Breadcrumb ab drei Hierarchieebenen.
URL-Struktur
Die Informationsarchitektur ist außerdem die Grundlage für die URL-Struktur. Eine URL (Uniform Resource Locator) sollte einen Überblick über die Verzeichnisstruktur der Website geben und relevante Keywords enthalten. Jeder Backslash ("/") in der URL grenzt die aufeinanderfolgenden Hierarchieebenen voneinander ab. Die Gestaltung der einzelnen URLs und die URL-Struktur spielen auch eine entscheidende Rolle für das Ranking der Website in den Suchmaschinen (SEO).
Wie wichtig ist die Informationsarchitektur für SEO?
Da die Informationsarchitektur Einfluss auf die Usability und User Experience einer Website hat, ist sie auch wichtig für die Suchmaschinen und sollte den Rankingfaktoren der Suchmaschinen Beachtung schenken. Vermeiden Sie Dopplungen von Kategorien, Redundanzen von Inhalten auf verschiedenen Seiten und Wiederholungen von Merkmalen auf unterschiedlichen Seitentypen. Diese führen zu einer schlechteren Usability. Die negativen Nutzersignale wiederum zu Rankingverlusten.
Im oberen Teil dieses Beitrags wurde bereits auf die Nutzerintention, Keywordrecherche und Canonical Tags eingegangen. Die Ergebnisse der Analysen fließen schon ganz am Anfang in den Gestaltungsprozess ein, um On-Page-SEO zu einem späteren Zeitpunkt überhaupt möglich zu machen.
Die Sitemap (sitemap.xml) enthält die URL-Struktur einer Website und erleichtert die Indexierung der Unterseiten. Umso besser die URL-Struktur desto effizienter kann der verfügbare interne Link-Juice auf die relevanten Seiten verteilt werden. Wichtig ist, dass die Sitemap bei Änderungen der URLs angepasst wird und die Änderungen des sogenannten URL-Slugs immer von einem durchdachten Weiterleitungs-Management begleitet wird. Über die robots.txt können einzelne Seiten von der Indexierung ausgeschlossen werden.
Interaktionsdesign und User Experience
In unserem Beitrag über User Experience Design und User Interface erfahren Sie mehr über Gestaltungsprinzipien, Messung und Aufgaben von UX-Designer:innen.
Wir unterstützen Sie gerne bei der Gestaltung der Informationsarchitektur für Ihr Web-Projekt. Wir freuen uns auf Ihre Mail, Ihren Anruf oder Ihre Anfrage über das Kontaktformular.