Loading...
Informations-Architektur
Work in Progress

Informations-Architektur

Wir kennen die Zielgruppe, wir wissen ihnen eine packende Geschichte zu erzählen. Nun gilt es dieses Drehbuch in eine Webseite umzuwandeln.
Verbindung der Materie

User, Context, Content

Um unsere Webseiten passend zu machen, muss die Inhaltsstrukturierung sich auf verschiedene Aspekte berufen.

User

Die Persona oder später dann die realen User*innen mit ihren Bedürfnissen & Wünschen.

Content

Die Geschichte, die auf der Webseite erzählt wird.

Context

der Umstand in der sich die Beziehung zwischen User & Content befindet. Also die Schauplätze der Interaktionen wie auch das Verständnis sowie die Beziehung zwischen Users und Inhalt.

Haben wir ein Verständnis davon, können wir beginnen die Informations-Architektur aufzubauen.

Information architecture is a practice of making sense.

By Abbey Covert

Dies geschieht anhand dreier Methoden. Ontologie, Taxonomie und Choreografie.

Kreisdiagramm mit drei sich schneidenden Kreisen. (User, Content & Context)
© Webdesign Essentials
Kreisdiagramm mit drei sich schneidenden Kreisen. (User, Content & Context)
Bedeutung des Zusammenspiels

Ontologie

Die Bedeutung der Inhalte sowie ihren Verbindungen und Abhängigkeiten zueinander gilt es zu verstehen, um die Taxonomie zu ergänzen.

Die Ontologie wird genutzt, um Verbindungen zwischen den einzelnen Themen zu schaffen. Es zeigt in welcher Beziehung die Inhalte zueinander stehen.

Durch das Verständnis der Inhaltsverbindungen können entscheidende Abhängigkeiten definiert werden. Dies hilft die technische Entwicklung zu planen.

Pragmatisches Beispiel

Auf einer Webseite gibt es die Rubrik Landwirtschaft und die Rubrik Bau. In beiden Rubriken kommen gleiche Maschinen vor. Ein Landwirt schaut aber nicht intuitiv in der Kategorie «Bau» nach. Der Betreiber will die Inhalte nicht zweimal pflegen, aber den Marketing-Fokus auf die jeweilige Zielgruppe nicht missen.

Die Informations-Architektin plant nun eine «Maschinen-Rubrik» wo alle Produkte erfasst werden. Sie definiert, dass Kategorien/Tags pro Artikel vermerkt werden um auf den jeweiligen Seiten, die entsprechenden Maschinen zu zeigen.

Sitemap Schema, bei dem zwei Unterkategorien eine Verbindung zueinander haben.
© Webdesign Essentials
Sitemap Schema, bei dem zwei Unterkategorien eine Verbindung zueinander haben.
3

Gute Einführung ins Thema

Slideshare about Ontology - Abbey Covert

Die Klassifikation der Inhalte

Taxonomie

Die Logik unserer Sprache und unserer Kultur definiert unsere Kommunikation. Eine Klassifikation der Begrifflichkeiten hilft Verständnis zu wahren oder aufzubauen.

Die Taxonomie wird genutzt um Sitemaps und somit Inhalte zu organisieren. Es betrifft meistens die grosse Inhaltsstrukturierung der Navigation.

Die Taxonomie in der Biologie veranschaulicht ihre Logik gut. Der Wildkatze ist eine Art, die zur Familie der Katzen gehört, welche wiederum in der Ordnung der Raubkatzen innerhalb der Klasse der Säugetiere zu finden ist.

Es gibt nur fünf Möglichkeiten etwas zu organisieren.

Nach: Ort, Alphabetisch, Zeit, Kategorie oder Hierarchie.

Die Inhalte einer Webseite werden in einer Sitemap organisiert. Meist Hierarchisch.

Diagramm einer zoologischen Taxonomie. Säugetier / Klasse (Nashorn), Raubkatze / Ordnung (Tiger), Katzen / Familie (Puma), Art siamesische Hauskatze.
© Webedesign Essentials
Diagramm einer zoologischen Taxonomie. Säugetier / Klasse (Nashorn), Raubkatze / Ordnung (Tiger), Katzen / Familie (Puma), Art siamesische Hauskatze.
4
Das Zusammenspiel

Choreografie

Die Choreografie befasst sich mit der Interaktionen zwischen der Bedeutung und der Struktur des Inhalts.

Es geht darum zu verstehen in welchem Flow diese Verbindungen aller Teile zueinander stehen. Es geht um das Timing und die Platzierung der Informationsdarstellung.

So wird definiert, wann es sinnvoll ist, Fokus auf das aktuelle Thema zu geben und wann weiterführende oder andere Inhalte in Verbindung mit dem aktuellen Inhalt gebracht wird.

Die Choreografie widerspiegelt sich in einem Wireframe oder in User-Stories.

Kreisdiagramm bei dem sich die drei Kreise vom Zentrum her ausbreiten. Innerer Kreis (Ontologie), mittlerer Kreis (Taxonomy), Äusserer Kreis (Choreografie)
© Webdesign Essentials
Kreisdiagramm bei dem sich die drei Kreise vom Zentrum her ausbreiten. Innerer Kreis (Ontologie), mittlerer Kreis (Taxonomy), Äusserer Kreis (Choreografie)
5
Struktur

Die Sitemap

Eine gute Sitemap beinhaltet die Synthese zwischen «dem kurzen Weg» und der «einfachen Entscheidung».

Der kurze Weg

Ein Ansatz mit möglichst wenigen Klicks alle Inhalte einer Webseite zu erreichen.

Die einfache Entscheidung

Ein Ansatz um den User nicht mit zu viel Angebot zu überfordern und ihn in vielen Schritten durch die Webseite zu führen.

Synthese

Die Hauptnavigation sollte nicht mehr als 4-5 Punkte aufweisen und die Hierarchie sollte nicht tiefer 3-5 Stufen haben.

Diese Kombination ermöglicht es für Menschen wie für Suchmaschinen eine optimale und überschaubare Navigation zu bauen.

Diagramm zweier Schemen. Links Data-Cluster Wolke bestehend aus losen Punkten. Rechts Sitemap. Punkte sind verbunden und strukturiert.
Webdesign Essentials
Diagramm zweier Schemen. Links Data-Cluster Wolke bestehend aus losen Punkten. Rechts Sitemap. Punkte sind verbunden und strukturiert.
Zusammenspiel der Inhalte

Wireframes

Wireframes bilden Inhalte und Funktionalitäten in ihrer Inhaltsstruktur ab.

Wireframes sind der Bauplan einer Webseite. Demnach muss er von Informations-Architekt*innen oder UX-Designer*in sowie Developer*innen (BackEnd/FullStack) gleichermassen verstanden und gutgeheissen werden.

Ich bin überzeugt, dass die brauchbarsten Wireframes dann entstehen, wenn die Expertisen von Informations-Architektur und Backend-Developer vereint werden.

Der Fokus liegt auf der Strukturierung, Priorisierung und Choreographie der Inhalte und ihrer technischen Funktionalität.

Inhaltsstrategie

Mobile First

Mobile First ist die Strategie den Inhalt sowie die Technik zuerst für Mobile-Devices zu konzipieren und danach für Tablet und Desktop.

Durch diesen Ansatz, wird durch den kleineren physischen Platz auf Mobile-Screens, der Inhalt aufs Wesentliche reduziert. So kann die Essenz der Nutzung herausgeschält werden.

Desktop Designs verfallen oft der Versuchung mehr Inhalt, als notwendig darzustellen.

Es gilt darauf zu achten. Das unterschiedliche Devices, unterschiedliche Nutzungen bedingen und sich so auch die Priorität der Inhalte pro Device ändern.

Wird mit der Mobile-First Strategie programmiert, ist der Fall-Back immer der essentielle Inhalt. ;)

Design-Ästhetik lässt sich aber gut mit dem Desktop-First Ansatz entwickeln.

Drei Devices. Zuerst das Mobile mit reduzierten, schematischem Inhalt (Rechtecke). Danach das Tablet und Desktop mit mehr Inhalten. Pfeile von Mobile via Tablet zu Desktop symbolisieren den Mobile-First-Ansatz.
© Webdesign Essentials
Drei Devices. Zuerst das Mobile mit reduzierten, schematischem Inhalt (Rechtecke). Danach das Tablet und Desktop mit mehr Inhalten. Pfeile von Mobile via Tablet zu Desktop symbolisieren den Mobile-First-Ansatz.
8

Link

Luke Wroblewski - Initiator of the Term «Mobile First» in 2009

Die Erste Verifikation

Wireframe User Tests

Klickbare Wireframes lassen sich testen, um Klarheit über die Verständlichkeit der Inhaltsstrukturierung, Content-Priorisierung sowie dem funktionalen User-Flow zu erhalten.

Dies ist insbesondere bei komplexen und funktionsreichen Webseiten ein extrem wichtiger Schritt. So kann viel Energie und Geld gespart werden.

Die Voraussetzung ist, dass die Inhaltsstrategie sowie die wichtigsten Texte bereits definiert sind. Kein «Lorem Ipsum» in Titeln.

Wireframe User-Tests können nicht die User-Experience testen, da zu einem Erlebnis eines Users auch die visuelle Gestaltung gehört.

Gute Wireframes sind schematisch und fokussieren auf die Struktur und Funktion.

Die Gestaltung kommt danach!

© Google Developpers
9

Eine überzeugende Gestaltung geht nicht ohne guten Inhalt.

Jegliche visuelle Kommunikation ist gestaltet. Mit oder ohne Absicht. Daher gilt es der visuellen Gestaltung viel Wert beizumessen. Aber wem erzähle ich das?

Inhaltsstrategien

Es ist egal wie technisch herausragend oder wie schön deine Webseite gestaltet ist. Passt der Inhalt nicht zum gewünschten Zielpublikum und kann die Geschichte nicht transportieren, ist alles umsonst. Die Kunst ist es, die richtige Tonalität zu finden. Webdesigner*innen sind zwar keine Texter oder Markt-analyst*innen, aber ohne ein Interesse an der inhaltlichen Materie verspielt man viel.