Hören Sie sich die Audioversion dieses Artikels an
Als Standardbestandteil des UX-Prozesses erstellen Designer bei der Entwicklung von Produkten eine Informationsarchitektur. Die Informationsarchitektur definiert alle Wege und Pfade, die Benutzer durch eine Anwendung oder Website nehmen können, und ist viel mehr als nur eine Sitemap, die zeigt, welche Seite wohin führt.
Ähnlich wie Bauarchitekten einen Bauplan verwenden, um jeden Teil eines Hauses zu konstruieren, von der physischen Struktur bis hin zu komplexeren inneren Abläufen wie der Elektrik und den Sanitäranlagen, beschreibt die Informationsarchitektur die Hierarchie, Navigation, Funktionen und Interaktionen einer Website oder Anwendung. Und so wie Baupläne für einen Architekten das wertvollste Dokument beim Bau eines Gebäudes sind, kann die Informationsarchitektur das mächtigste Werkzeug im Arsenal eines Designers sein.
Die Entwicklung einer solchen Architektur ist jedoch nicht so einfach, wie das Zusammenstellen einer Liste von Funktionen und das Aufzeigen ihrer Funktionsweise – lassen Sie uns den Prozess untersuchen.
Was ist eine Informationsarchitektur und warum ist sie wichtig?
Die Informationsarchitektur (IA) ist wie eine Blaupause eine visuelle Darstellung der Infrastruktur, der Funktionen und der Hierarchie des Produkts. Der Detaillierungsgrad ist dem Designer überlassen, so dass die IA auch Navigation, Anwendungsfunktionen und -verhalten, Inhalte und Abläufe umfassen kann. Es gibt keine feste Grenze für die Größe oder Form der IA; dennoch sollte sie die allgemeine Struktur des Produkts umfassen, so dass jeder (theoretisch) in der Lage sein sollte, sie zu lesen und zu verstehen, wie das Produkt funktioniert.
Wir werden den Verweis auf die Blaupause häufig verwenden, da der Zweck beider Dokumente nahezu identisch ist. Genau wie eine Blaupause bietet die IA den Designern (sowie den Produktentwicklungs- und Konstruktionsteams) einen Überblick über das gesamte Produkt aus der Vogelperspektive. Ein einziges Dokument, das eine einfache und verständliche Darstellung der Funktionsweise der Anwendung oder der Website liefert, ist für die Entwicklung neuer Funktionen, die Aktualisierung bestehender Funktionen und für den Überblick über die Möglichkeiten des bestehenden Produkts unerlässlich.
Mit einer IA wird es wesentlich einfacher, wichtige Entscheidungen für neue Funktionen und Implementierungen zu treffen, Zeitpläne für Produktänderungen zu verstehen und das Benutzerverhalten über mehrere Prozesse hinweg zu verfolgen.
Lassen Sie uns in ein grundlegendes Video eintauchen, um zu sehen, wie eine IA aufgebaut ist.
Wie man eine Informationsarchitektur entwirft
Als Teil des UX-Prozesses folgt das IA-Design sehr ähnlichen Mustern wie das Flowcharting: Fügen Sie Formen hinzu und verbinden Sie diese mit Linien in einer organisierten Weise zu einem einzigen Dokument. Die Herausforderung bei der Erstellung von IA besteht darin, zu verstehen, wie Ihre App oder Website aus der Sicht des Benutzers tatsächlich funktioniert, und wie man diese Informationen in einem lesbaren Format organisiert.
Es gibt zwei Hauptanforderungen für die eigentliche Konstruktion von IA: die Organisation durch eine visuelle Hierarchie (d. h. eine Hierarchie von Merkmalen, Funktionen und Verhalten) und die Erstellung einer Legende für die Anzeige verschiedener Arten von Merkmalen, Interaktionen und Abläufen. Bei einem Standard-Flussdiagramm folgen die Formen bestimmten Anforderungen (Rechtecke sind Prozesse, Rauten sind Entscheidungspunkte usw.); die Einhaltung dieser Nomenklatur ist jedoch keine Voraussetzung.
Mit anderen Worten, die wichtigsten Faktoren für den Aufbau Ihrer IA sind, wo die einzelnen Komponenten der Architektur platziert sind (hierarchisch) und wie sie beschriftet und dargestellt werden.
Visuelle Hierarchie verstehen und darstellen
Die größte Herausforderung bei der Erstellung einer neuen Informationsarchitektur besteht fast immer darin, sie hierarchisch aufzubauen. Es ist ein weit verbreiteter Irrglaube, dass eine Informationsarchitektur „von oben nach unten“ aufgebaut werden muss. Das ist fast immer schwieriger, es sei denn, es handelt sich um ein bestehendes Produkt, wie im obigen Video.
Wenn Sie die Informationsarchitektur von Grund auf neu aufbauen, ist es sehr schwierig, etwas nach der obersten Ebene zu entwerfen, es sei denn, Ihre Website oder Anwendung folgt einem Standardformat. Es ist so, als würde man einen Mechaniker bitten, ein Auto von oben nach unten zu bauen, anstatt in Teilen. Jedes Teil muss im Voraus konstruiert werden, mit eigener Forschung, Zeit für Design und Entwicklung. Das Gleiche gilt für die IA.
Die Darstellung der visuellen Hierarchie ist ein wertvoller Bestandteil der IA, nicht nur, weil sie dem Leser einen besseren Kontext bietet, sondern auch die wichtigsten Bereiche des Produkts verallgemeinert. Wenn die wichtigste Funktion Ihrer App die Bestellung einer Fahrt (a la Uber oder Lyft) ist, die von der Startseite aus erfolgen kann, dann wird diese Seite die meisten Berührungspunkte und den größten Wert für das Produkt haben. Das Gleiche gilt für die visuelle Hierarchie.
Sitemaps sind für das Verständnis der Hierarchie sehr nützlich, da sie die Seiten numerisch ordnen (z. B. 1.0 Home, 2.0 Payment, 2.1 Add Pay Method usw.). Oder betrachten Sie das Beispiel der Bibliothekswebsite der Duke University, wo die Hauptnavigation nicht nur ganz oben steht, sondern auch hervorgehoben ist, um in der gesamten Anwendung sichtbar zu sein.
Hierarchie von Formen, Farben und anderen visuellen Elementen
Abgesehen von der Hierarchie ist die obige Architektur auch in anderer Hinsicht gut: Durch eine einfache Legende und einige Schlüsselsätze wird jeder Einbindungspunkt bei Bedarf eindeutig angezeigt. Die Legende bezeichnet die Art der Seite und des Inhalts und weist auf Unterschiede zwischen den Farben der Formen hin. Dies ist wichtig, denn obwohl die Website von Duke recht einfach erscheint, geht die Benutzeroberfläche nur drei Ebenen tief. Jedes gelbe Rechteck bezeichnet eine Anwendung, so dass die Vorgänge innerhalb dieser Kästchen in diesem Dokument nicht behandelt werden!
Auch ohne diese Teile ist die Struktur so, dass wir die Navigation auf der Website allein durch die IA verstehen können. Das hört auf, wenn wir eine Anwendung innerhalb der Website erreichen – das muss nicht sein.
Die folgende IA ist für ein Spiel. Mit vier Formen, ohne Farbe und geschickt platzierten Textschnipseln ist jede wichtige Interaktion ohne Prototypen verständlich, und was noch wichtiger ist, sie kann von jedem verstanden werden, der daran arbeitet.
Dieses Modell ist nicht perfekt, aber es organisiert die App-Hierarchie klar und beschreibt, was der Benutzer an einem bestimmten Punkt entweder sieht oder tut.
Die besten Informationsarchitektur-Tools
Es gibt viele Software-Anwendungen, die den Aufbau einer IA ermöglichen, aber nur wenige sind einfach und schnell genug, um die Erfahrung angenehm zu machen. Oder zumindest einfach zu handhaben.
Draw.io, das im obigen Video verwendet wird, ist für den privaten und beruflichen Gebrauch völlig kostenlos und lässt sich automatisch mit Google Drive verbinden. Es bietet auch Integrationen mit Confluence und JIRA, die kostenpflichtig sind. Draw.io eignet sich hervorragend für die Erstellung von Flussdiagrammen, Benutzerabläufen und Informationsarchitekturen. Mit der Drive-Funktionalität können mehrere Personen an demselben Dokument arbeiten und Änderungen live sehen. Es gibt auch eine kostenlose Offline-Version.
Lucidchart ist ein weiteres großartiges Tool, das eine etwas bessere Erfahrung als Draw.io bietet und zusätzliche Vorteile wie vorgefertigte Vorlagen, viele weitere Integrationen, eine mobile App (mit 2,5 Sternen im App Store bewertet) und Unterstützung für Unternehmen hat.
Omnigraffle und Visio sind seit langem in der Branche etabliert und eignen sich hervorragend für die Erstellung und Pflege eines IA-Designs, obwohl Visio nur online verfügbar ist (die ältere Offline-Version ist nur für Windows verfügbar), während Omnigraffle nur für den Mac verfügbar ist und separate Käufe für die MacOS- und iOS-Version erfordert. OmniGraffle hat gegenüber den großen Konkurrenten den Vorteil, dass es JavaScript- und AppleScript-Automatisierung bietet, was für die meisten Designer unnötig sein mag, aber Vollzeit-Informationsarchitekten wissen dies in der Regel zu schätzen.
Alle oben aufgeführten Tools sind auf Geschwindigkeit und Benutzerfreundlichkeit ausgelegt, insbesondere im Hinblick auf Flussdiagramme, die nahezu identischen Prinzipien wie die Informationsarchitektur folgen. Andere Anwendungen wie Balsamiq, MindMeister, MindManager oder XMind bieten alle einen ähnlichen Stil, sind aber für andere Zwecke wie Prototyping oder Mind Mapping entwickelt worden.
Best Practices für Informationsarchitektur
Es gibt zwar nur wenige definierte Regeln dafür, was Informationsarchitektur ausmacht, aber wenn Sie den Prozess durchlaufen, sollten Sie Folgendes beachten:
Konzentrieren Sie sich nicht auf die Hierarchie, sondern auf die Struktur
Die Hierarchie ist anpassbar. Die Homepage wird immer die Homepage sein, aber wohin sie führt, wie die Nutzer dorthin gelangen und alles, was dazwischen und darüber hinaus liegt, wird später festgelegt.
Alle Prozesse sollten logisch sein
Auch wenn die IA im UX-Prozess für die Interaktionen mit den Nutzern gedacht ist, muss jeder Schritt auf dem Weg Sinn machen. Registrierungsbildschirme sollten nicht zu Einstellungen führen, eine Kamerafunktion sollte nicht zu einer Kartenansicht springen … die Liste geht weiter.
Erinnern Sie sich an den UX-Prozess
Ein häufiger Fehler ist es, einfach IA zu machen, ohne Ressourcen, Forschung oder andere Assets oder Arbeit. Das ist so, als würde man einem Autor sagen, er solle ein Buch ohne eine Gliederung schreiben, oder einem Programmierer, er solle eine App ohne Prototypen programmieren.
Sie sind der Kartograph
Kartographen berücksichtigen alles auf einer Karte, von Gebirgszügen bis zu Staatsgrenzen. Genau wie die Kartographen bestimmen die Designer, was in das IA-Design einfließt. Einzelne Seiten, spezifisches Benutzerverhalten, Kontext für Entscheidungspunkte und so weiter.
Letztendlich entscheidet der Kartograph, was auf die Karte kommt, basierend auf den Bedürfnissen der Benutzer. Das Gleiche gilt für Designer, also konstruieren Sie die IA für den Endbenutzer, d.h. für die Produktentwicklungs- und Designteams.
Informationsarchitekturen ändern sich ständig und entwickeln sich weiter
Um es noch einmal zu verdeutlichen: Alle IAs sind für Veränderungen ausgelegt. Produkte entwickeln sich weiter, Entwürfe ändern sich, Benutzer passen sich an, und der Zyklus geht weiter, immer und immer wieder. Nehmen Sie es nicht zu ernst und seien Sie sich bewusst, dass es immer Raum für Verbesserungen geben wird. Streben Sie nicht nach Perfektion, sondern entwickeln Sie eine einfache, anpassungsfähige IA.
Meine Informationsarchitektur ist fertig… was nun?
Es ist eine weit verbreitete Auffassung, dass Designarbeit nie wirklich fertig ist, und das ist bei der Informationsarchitektur sicherlich der Fall. Sie wachsen und schrumpfen und verändern sich wie unsere Produkte. Anders als ein Bauplan für ein Gebäude wird sich die Informationsarchitektur immer weiterentwickeln, sei es aufgrund von Benutzeranforderungen, neuen Funktionen oder einer Produktüberholung. Ein Großteil der Struktur kann gleich bleiben und für Konsistenz zwischen den Versionen sorgen, damit die Benutzer nicht verwirrt werden.
Und das ist auch gut so. Das Wissen, dass es sich bei der IA um ein fließendes Dokument handelt – eines, das sich wahrscheinlich wöchentlich und manchmal sogar täglich ändert -, ist eine gute Möglichkeit, die Gesamtstruktur Ihrer App oder Website zu erhalten, ohne jemals den Code anzufassen oder neue Prototypen zu erstellen. Je besser das gesamte Produktentwicklungsteam die IA kennt, desto schneller weiß jeder, was möglich ist und was nicht, und wie seriös jede vermeintlich „einfache Arbeit“ wirklich ist.
Womit wir bei der wahren Schönheit der Informationsarchitektur wären: Es gibt keinen vordefinierten Startpunkt. Während der traditionelle UX-Designprozess vorschreibt, dass die IA nach der Fertigstellung einer ausreichenden Anzahl von Benutzerströmen erstellt wird, kann sie, bewaffnet mit viel Benutzer- und Wettbewerbsforschung, auch das erste sein, was getan wird … oder das letzte. Der Prototyping-Prozess bringt oft Informationen darüber zutage, wie bestimmte Verhaltensweisen oder Aktionen ablaufen sollten, die man sich bei einer logischen oder einfallslosen IA nur schwer vorstellen kann.
Das IA-Design ist eine sich ständig weiterentwickelnde Praxis, die sowohl eine Kunst als auch eine Fertigkeit ist, was zum Teil der Grund dafür ist, dass große Unternehmen Stellen für Informationsarchitekten haben. Diese Designer sind die Torwächter riesiger Systeme, und mit ihrem Verständnis für das Produktwachstum im Laufe der Zeit helfen sie den Produkt-, Design- und Technikteams, über Jahre hinweg die richtigen Entscheidungen zu treffen. Diese Art der Organisation ist nicht für alle Designer geeignet, aber jeder Designer kann eine einfache, verständliche Informationsarchitektur aufbauen.
– – –
Leseempfehlungen zur Informationsarchitektur
IA für das Web und darüber hinaus
Wie man aus jedem Chaos einen Sinn macht: Informationsarchitektur für jedermann
Grundlagen der Informationsarchitektur
Der Unterschied zwischen Informationsarchitektur und UX-Design