Der umfassende Leitfaden zur Informationsarchitektur

Hören Sie sich die Audioversion dieses Artikels an

Als Standardbestandteil des UX-Prozesses erstellen Designer beim Erstellen von Produkten eine Informationsarchitektur. Die Informationsarchitektur definiert jeden Weg und Pfad, den Benutzer durch eine App 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 physischen Strukturen bis hin zu komplexeren Innenarbeiten wie Elektro- und Sanitärinstallationen, beschreibt die Informationsarchitektur die Hierarchie, Navigation, Funktionen und Interaktionen einer Website oder Anwendung. Und genauso wie Baupläne das wertvollste Dokument sind, das ein Architekt beim Bau eines Gebäudes verwenden kann, kann die Informationsarchitektur das mächtigste Werkzeug im Arsenal eines Designers sein.

Die Entwicklung eines solchen 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 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 liegt beim Designer, sodass IA auch Navigation, Anwendungsfunktionen und -verhalten, Inhalte und Abläufe umfassen kann. Es gibt keine festgelegte Grenze für die Größe oder Form von IA; Dennoch sollte es die allgemeine Struktur des Produkts umfassen, sodass jeder (theoretisch) in der Lage sein sollte, es zu lesen und zu verstehen, wie das Produkt funktioniert.

Wir werden die Blueprint-Referenz oft verwenden, da der Zweck beider Dokumente nahezu identisch ist. Genau wie eine Blaupause bietet IA Designern (sowie Produktentwicklungs- und Konstruktionsteams) eine Vogelperspektive des gesamten Produkts. Ein einziges Dokument zu haben, das eine einfache und verständliche Darstellung der Funktionsweise der Anwendung oder Website liefert, ist entscheidend für die Entwicklung neuer Funktionen, die Aktualisierung vorhandener Funktionen und um zu sehen, was mit dem vorhandenen Produkt möglich ist.

Mit der Verfügbarkeit von IA wird es erheblich einfacher, wichtige Entscheidungen für neue Funktionen und Implementierungen zu treffen, Zeitpläne für Produktänderungen zu verstehen und das Benutzerverhalten durch mehrere Prozesse zu verfolgen.

Lassen Sie uns in ein einfaches Video eintauchen, um zu sehen, wie eine IA erstellt wird.

Wie man Informationsarchitektur entwirft

Als Teil des UX-Prozesses folgt das IA-Design sehr ähnlichen Mustern wie das Erstellen von Flussdiagrammen: Fügen Sie Formen hinzu und verbinden Sie sie mit Linien auf organisierte Weise zu einem einzigen Dokument. Die Herausforderung beim Erstellen von IA besteht darin, zu verstehen, wie Ihre App oder Website aus der Perspektive des Benutzers tatsächlich funktioniert und wie diese Informationen in einem lesbaren, lesbaren Format organisiert werden können.

Es gibt zwei Hauptanforderungen für die tatsächliche Erstellung von IA: die Organisation durch eine visuelle Hierarchie (d. h. eine Hierarchie von Merkmalen, Funktionen und Verhalten) und das Erstellen einer Legende zum Anzeigen verschiedener Arten von Merkmalen, Interaktionen und Flüssen. Bei einem Standard-Flussdiagramm folgen die Formen bestimmten Anforderungen (Rechtecke sind Prozesse, Rauten sind Entscheidungspunkte usw.); Die Befolgung dieser Nomenklatur ist jedoch keine Voraussetzung.

Mit anderen Worten, die wichtigsten Faktoren beim Erstellen Ihrer IA sind, wo einzelne Komponenten der Architektur (hierarchisch) platziert werden und wie sie beschriftet und angezeigt werden.

Visuelle Hierarchie verstehen und zeigen

Die größte Herausforderung bei der Erstellung einer neuen Informationsarchitektur besteht fast immer darin, sie hierarchisch aufzubauen. Es ist ein weit verbreitetes Missverständnis, dass IA „von oben nach unten“ aufgebaut werden muss. Das ist fast immer schwieriger, es sei denn, es handelt sich um ein vorhandenes Produkt, wie im obigen Video.

Wenn Sie IA von Grund auf neu erstellen, ist es sehr schwierig, etwas nach der obersten Ebene zu zeichnen, es sei denn, Ihre Website oder Anwendung folgt einem Standardformat. Es ist, als würde man einen Mechaniker bitten, ein Auto von oben nach unten zu bauen, anstatt in Einzelteilen. Jedes Stück muss im Voraus mit eigener Forschung, Zeit für Design und Entwicklung konstruiert werden. Dasselbe gilt für IA.

Die Darstellung einer visuellen Hierarchie ist ein wertvoller Vorteil für IA, nicht nur, weil sie dem Leser einen besseren Kontext bietet, sondern auch Schlüsselbereiche des Produkts verallgemeinert. Wenn die wichtigste Funktion Ihrer App die Bestellung einer Fahrt (à la Uber oder Lyft) ist, die über die Homepage erfolgen kann, hat diese Seite die meisten Berührungspunkte und den größten Wert für das Produkt. Dasselbe gilt für die visuelle Hierarchie.

Sitemaps sind praktisch, um die Hierarchie zu verstehen, da sie Seiten numerisch organisieren (z. B. 1.0 Startseite, 2.0 Zahlung, 2.1 Zahlungsmethode hinzufügen usw.). Oder betrachten Sie das Beispiel im Bild unten für die Bibliothekswebsite der Duke University, wo die Top-Navigation nicht nur oben ist, sondern auch hervorgehoben wird, um in der gesamten Anwendung sichtbar zu sein.

Hierarchie von Formen, Farben und anderen visuellen Elementen

Abgesehen von der Hierarchie macht die obige Architektur noch etwas anderes gut: Sie zeigt jeden Interaktionspunkt individuell nach Bedarf durch eine einfache Legende und ein paar Schlüsselphrasen an. Die Legende bezeichnet den Seiten- und Inhaltstyp und zeigt Variationen zwischen Farben und Formen an. Dies ist wichtig, denn obwohl Dukes Site ziemlich einfach erscheint, geht die IA nur drei Ebenen tief. Jedes gelbe Rechteck bezeichnet eine Anwendung, daher sind die Prozesse in diesen Kästchen nicht in diesem Dokument enthalten!

Auch wenn diese Teile nicht verfügbar sind, ist die Struktur so, dass wir allein durch die IA verstehen können, wie man auf der Website navigiert. Das hört auf, wenn wir eine Anwendung innerhalb der Website erreichen – das muss nicht sein.

Die IA unten ist für ein Spiel. Mit vier Formen, ohne Farbe und intelligent platzierten Textschnipseln ist jede größere 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 Tools für die Informationsarchitektur

Es gibt viele Softwareanwendungen, die das Erstellen einer IA ermöglichen, aber nur wenige sind einfach und schnell genug, um die Erfahrung angenehm zu gestalten. Oder zumindest einfach zu verwalten.

Draw.io, das im obigen Video verwendet wird, ist für den persönlichen und professionellen Gebrauch völlig kostenlos und wird automatisch in Google Drive eingesteckt. Es hat auch Integrationen mit Confluence und JIRA, die kostenpflichtig sind. Draw.io eignet sich hervorragend zum Erstellen von Flussdiagrammen, Erstellen von Benutzerabläufen und Informationsarchitekturen, und 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 ein etwas besseres Erlebnis als Draw.io bietet und zusätzliche Vorteile wie vorgefertigte Vorlagen, viele weitere Integrationen, eine mobile App (im App Store mit 2,5 Sternen bewertet) und Unterstützung für Unternehmen bietet.

Omnigraffle und Visio sind seit langem die Hauptstützen der Branche und eignen sich hervorragend zum Erstellen und Verwalten eines IA-Designs, obwohl Visio nur online ist (die ältere Offline-Version ist nur Windows), während Omnigraffle nur für Mac ist und separate Käufe für MacOS und iOS erfordert Versionen. OmniGraffle hat einen Vorteil gegenüber den großen Konkurrenten, da es JavaScript- und AppleScript-Automatisierung bietet, was für die meisten Designer möglicherweise unnötig ist, aber in der Regel von Vollzeit-Informationsarchitekten geschätzt wird.

Alle oben aufgeführten Tools sind auf Geschwindigkeit und Benutzerfreundlichkeit ausgelegt, insbesondere um Flussdiagramme, die nahezu identischen Prinzipien wie die Informationsarchitektur folgen. Andere Anwendungen wie Balsamiq, MindMeister, MindManager oder XMind bieten alle ein ähnliches Verhalten, wurden jedoch für andere Hauptzwecke wie Prototyping oder Mind Mapping entwickelt.

Best Practices für die Informationsarchitektur

Obwohl es nur wenige definierte Regeln dafür gibt, was eine Informationsarchitektur ausmacht, sollten Sie beim Durchlaufen des Prozesses Folgendes berücksichtigen:

Konzentrieren Sie sich nicht auf die Hierarchie, sondern auf die Struktur

Hierarchie ist einstellbar. Die Startseite bleibt immer die Startseite, aber wohin sie führt, wie die Benutzer zu diesen Orten gelangen und alles dazwischen und darüber hinaus wird später festgelegt.

Alle Prozesse sollten logisch sein

Auch wenn die IA im UX-Prozess für Benutzerinteraktionen gedacht ist, muss jeder Schritt auf diesem Weg sinnvoll sein. Registrierungsbildschirme sollten nicht zu Einstellungen führen, eine Kamerafunktion sollte nicht zu einer Kartenansicht springen … die Liste geht weiter.

Denken Sie an den UX-Prozess

Ein häufiger Fehler besteht darin, nur IA ohne Ressourcen, Forschung oder andere Vermögenswerte oder Arbeit zu erstellen. Das ist so, als würde man einem Autor sagen, er solle ein Buch ohne Gliederung schreiben, oder einem Programmierer, er solle eine App ohne Prototypen programmieren.

Du bist der Kartograf

Kartografen berücksichtigen alles rund um eine Karte, von Gebirgszügen bis hin zu Staatsgrenzen. Genau wie Kartenhersteller bestimmen Designer, was in das IA-Design einfließt. Einzelne Seiten, spezifisches Nutzerverhalten, Kontext für Entscheidungspunkte … und so weiter.

Letztendlich entscheidet der Kartograf basierend auf den Bedürfnissen der Benutzer, was auf die Karte kommt. Dasselbe gilt für Designer, also konstruieren Sie die IA für den Endbenutzer, nämlich die Produktentwicklungs- und Designteams.

Die Informationsarchitektur verändert sich ständig und entwickelt sich weiter

Um es noch einmal auf den Punkt zu bringen: Alle IAs sind auf Veränderung ausgelegt. Produkte entwickeln sich weiter, Designs ändern sich, Benutzer passen sich an und der Kreislauf geht immer weiter. Nehmen Sie es nicht zu ernst und wissen Sie, dass es immer Raum für Verbesserungen gibt. Streben Sie nicht nach Perfektion; Erstellen Sie eine einfache, anpassbare IA.

Meine Informationsarchitektur ist fertig … was nun?

Es ist eine weit verbreitete Vorstellung, dass Designarbeit niemals wirklich abgeschlossen ist, und das trifft auf die Informationsarchitektur sicherlich zu. Sie wachsen und schrumpfen und verändern sich wie unsere Produkte. Im Gegensatz zu einem Entwurf für ein Gebäude entwickelt sich IA immer auf der Grundlage von Benutzeranforderungen, neuen Funktionen oder einer Produktüberholung weiter. Ein Großteil der Struktur kann gleich bleiben und Konsistenz zwischen den Versionen bieten, damit Benutzer nicht verwirrt werden.

Und das ist gut so. Zu wissen, dass IA ein fließendes Dokument ist – eines, das sich wahrscheinlich wöchentlich und manchmal sogar täglich ändert – ist eine leistungsstarke Möglichkeit, die Gesamtstruktur Ihrer App oder Website beizubehalten, ohne jemals den Code zu berühren oder neue Prototypen zu erstellen. Je besser das gesamte Produktentwicklungsteam die IA kennt , desto schneller wissen alle, was geht und was nicht und wie ernst vermeintliche „leichte Arbeit“ wirklich ist.

Womit wir bei der eigentlichen Schönheit der Informationsarchitektur wären: Es gibt keinen vordefinierten Ausgangspunkt. Während der traditionelle UX-Designprozess vorschreibt, dass die IA erstellt wird, nachdem genügend Benutzerflüsse abgeschlossen wurden; Ausgestattet mit viel Benutzer- und Wettbewerbsforschung kann es auch das Erste sein, was getan wird … oder das Letzte. Der Prototyping-Prozess bringt oft Informationen darüber hervor, wie bestimmte Verhaltensweisen oder Aktionen auftreten sollten, die aus einer logischen oder einfallslosen IA schwer vorstellbar wären.

Als sich ständig weiterentwickelnde Praxis ist IA-Design sowohl eine Kunst als auch eine Fähigkeit, was teilweise der Grund dafür ist, dass große Unternehmen Positionen als 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 Konstruktionsteams dabei, über Jahre hinweg die richtigen Entscheidungen zu treffen . Dieser Organisationsumfang ist nicht für alle Designer geeignet, aber jeder Designer kann eine einfache, verständliche Informationsarchitektur aufbauen.

• • •

Empfohlene Lektüre über Informationsarchitektur

IA für das Web und darüber hinaus

Wie man aus jedem Durcheinander einen Sinn macht: Informationsarchitektur für alle

Grundlagen der Informationsarchitektur

Der Unterschied zwischen Informationsarchitektur und UX-Design

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft