Webdesign: Die Basics guter Informations­architektur

Der Zugang zu Informationen will gut organisiert und strukturiert sein, damit der Informationssuchende schnell und umfassend fündig werden kann. Dazu bedarf es umfassender Überlegungen im Vorfeld der Design-Ausführung. Heraus kommt die Informationsarchitektur.

Der Begriff der Informationsarchitektur ist mit einem Alter von einigen Dekaden nicht mehr ganz neu und wurde im Laufe der Zeit schon für verschiedenste Zwecke benutzt. Sogar im Chipdesign oder bei der Netzwerkplanung fand er Verwendung. In den letzten zehn Jahren kommt er indes vorwiegend im Kontext mit Softwareprojekten zum Einsatz.

Informationsarchitektur im Webdesign

Im Zusammenhang mit Webdesign meint „Informationsarchitektur” die sinnvolle Organisation und Strukturierung von Inhalten mit dem Ziel, dass eben diese Inhalte von Nutzern schnell gefunden und erschlossen werden können. Webdesigner sind demnach notwendigerweise stets auch Informationsarchitekten. Jedenfalls sollten sie es sein. Vielfach entsteht dieser Eindruck jedoch nicht.

Informationsarchitektur ist nicht gleichbedeutend mit visueller Gestaltung

Kunden und Dienstleister verwenden erfahrungsgemäß sehr viel Zeit auf visuelle Aspekte, so dass strukturelle Überlegungen nicht selten zu kurz kommen. Dabei ist eine gelungene Informationsarchitektur die beste Grundlage für eine ebenso gelungene Website. Informationsarchitektur lässt sich allerdings nicht als Photoshop-Mockup bauen und mag von daher als verzichtbarer Aufwand betrachtet werden. Das Gegenteil ist der Fall.

Vielfach wird Informationsarchitektur (IA) mit UX-Design gleichgesetzt, was ebenfalls viel zu kurz gesprungen erscheint. Auch hier gilt, dass IA lediglich die Grundlage für das UX-Design bildet. UX-Design ist indes weit weniger strukturell in den Überlegungen, sondern befasst sich deutlich konkreter mit den großen und kleinen Fragen der Benutzererfahrung, etwa welche Interaktion welches Ergebnis zeitigen soll.

Informationsarchitektur ist das Fundament jeder Website

Wenn wir also über IA sprechen, dann befinden wir uns am Ursprung, an der Baugrube eines digitalen Projekts. Hier gibt es noch nichts zu sehen und die künftige Benutzererfahrung ist in weiter Ferne. In der Informationsarchitektur geht es um rein strukturelle Fragen.

Das mag dir auf den ersten Blick reichlich langweilig vorkommen. Betrachtest du aber mal das Beispiel einer großen Bibliothek, wird dir schnell klar, dass Informationsbereitstellung ohne durchdachte Architektur keine gute Idee ist.

In unserem Städtchen existiert nur eine relativ kleine Stadtbücherei. Aber selbst in dieser könnte ich kein Buch finden, wenn sich die Bibliothekare nicht ein so gutes Ordnungssystem, eine nachvollziehbare Informationsarchitektur, ausgedacht hätten.

Eine Kombination aus einem digitalen Katalog und einem physikalischen Wegweisersystem führt dazu, dass jeder Besucher das von ihm gesuchte Buch auch findet. Gäbe es das nicht, bestünde nur eine zufällige Chance, die gesuchten Informationen zu erhalten. Die meisten Besucher dürften wohl ob des erheblichen Frustpotenzials rasch kapitulieren.

Ähnlich ergeht es den Besuchern einer Internetseite, wobei das Problem mit steigender Informationsdichte größer wird. Je mehr Informationen eine Website bietet, desto durchdachter muss ihre Informationsarchitektur sein. Generell bedarf jedoch auch die kleinste Website einer sinnvollen IA. Lediglich der Komplexitätsgrad dieser Architekturen unterscheidet sich in Abhängigkeit von der Größe des Gesamtprojekts.

Verbreiteter Irrtum: Informationsarchitektur ist ein anderes Wort für Navigation

Typische Fragen, die eine gute Informationsarchitektur dem Besucher beantworten können muss, lauten etwa:

• Wo bin ich?
• Worum geht es hier?
• Wohin gelange ich von hier?
• An welcher Stelle im Angebot befinde ich mich?
• Wozu dient diese Website?
• Was habe ich von diesem Angebot?
• Wer steckt dahinter und wie kann ich denjenigen erreichen?

In Anbetracht dieser Fragen könntest du auf die Idee kommen, dass Informationsarchitektur nur ein anderes Wort für Navigation ist. Auch das würde jedoch zu kurz greifen. Richtig ist, dass die Navigation ein Bestandteil der IA ist. Sie lässt sich allerdings erst ableiten, wenn ein paar vorbereitende Arbeiten erledigt sind.

Informationsarchitektur erfordert die Klassifizierung und Kategorisierung aller Inhalte

Es ist eines der verbreitetsten Probleme in der Kunde-Designer-Beziehung. „Fangen Sie schon mal an, die Inhalte liefern wir Ihnen nach und nach.” Wer kennt das nicht?

Und wer hat sich nicht schon oft, wenn auch intuitiv gefragt, wie das denn funktionieren soll? Die Antwort auf die Frage ist recht einfach: Gar nicht.

Bevor du sinnvoll eine Website erstellen kannst, musst du alle Inhalte kennen, sortieren und strukturieren. Schon die Festlegung, welche Inhalte überhaupt in die Website integriert werden sollen, ist ein wichtiger Aspekt der Informationsarchitektur. Wer hat sich nicht bei verschiedenen Websites schon über seltsam „angeflanscht” wirkende Menüpunkte gewundert? Da kam der Kunde kurz vor Projektende noch mit einer neuen Ladung Informationen, die wir dann kurzerhand außerhalb der geplanten Struktur rein nehmen mussten. „Ist ja kein Problem, oder?“

Liegen alle Inhalte vor und sind die zu verwendenden definiert, gilt es, die Inhalte zu klassifizieren und zu benennen. Dabei werden die Inhalte Kategorien zugeordnet, aus denen sich später unsere Navigation entwickeln wird.

Es empfiehlt sich, dabei ganz klassisch mit Taxonomien zu arbeiten. So erhält jede Kategorie stets nur eine Oberkategorie, was zu einem Abhängigkeitsbaum führt, wie er für Organigramme üblich ist. Innerhalb des Baumes bewegst du dich von ganz grob nach ganz fein. Je weiter unten in den Verästelungen du dich befindest, desto spezifischer werden die Informationen.

Flache Informationshierarchien bevorzugt

Dabei solltest du zudem darauf achten, dass deine Informationshierarchie nicht zu tief wird. Zum einen schätzt es kein Besucher, wenn er wahre Klickorgien bewältigen muss, um letztlich zur gewünschten Information zu gelangen. Zum anderen bevorzugt der Google-Bot ebenfalls eindeutig flache Hierarchien.

Die einzelnen Kategorien sollten sich dabei ganz klar thematisch unterscheiden, so dass Besucher und Crawler gleichermaßen in die Lage versetzt werden, Zusammenhänge erkennen und verstehen zu können. Denkbar sind, je nach Sinn und Zweck der Website, natürlich auch andere Unterscheidungen, etwa chronologischer Art oder nach dem Typ des Besuchers (zum Beispiel Kunde, Lieferant, Investor).

Wichtig ist nur, dass du einen einmal eingeschlagenen Weg nicht verlässt, weil es sonst zu einer Vermischung unterschiedlicher Hierarchien kommen kann.

Suchen und Finden, aber nicht frei gewürfelt

Ein wichtiger Teil der Informationsarchitektur ist die Suchfunktion, die meist selbstverständlich als bloßer Teil des CMS angesehen wird. Dabei würde eine optimale IA niemals auf die Standardsuche von etwa WordPress als Volltextsuche setzen, sondern auf ein gezieltes Konzept bauen. Dabei würde es darum gehen, was Besucher wohl suchen könnten und welche Ergebnisse sie dann finden sollten. Das hätte mit Freitextsuche nicht viel zu tun, würde aber bessere Ergebnisse liefern, die sowohl dem Interesse des Besuchers als auch dem des Betreibers entgegen kämen.

Das ist längst noch nicht alles, aber ein Anfang

Informationsarchitektur ist eine Wissenschaft für sich. In diesem Beitrag habe ich mich auf die absoluten Basics beschränkt. Das magst du beklagen, aber bedenke dabei, dass es gerade die kleineren Projekte sind, denen IA-Überlegungen derzeit noch am meisten fehlen.

Dabei sind das gleichzeitig jene Projekte, in denen gar nicht erst über User-Befragungen, Card Sorting und andere spezifische Techniken ausgewachsener Informationsarchitekten nachgedacht werden muss. Wenn du bisher deine Kunden ganz ohne IA-Basics bedient hast, wird dir der Beitrag sicherlich ein paar Denkanstöße gegeben haben.

Damit ist der Anfang auf jeden Fall gemacht.

Die Fehlerquelle Mensch

Jeder im weitesten Sinne in der IT tätige Mensch weiß, dass das größte Problem der Computerei in kurzem Abstand vor dem Gerät zu finden ist. Insofern ist es seit Jahrzehnten etablierte Praxis, die Fehlerquelle Mensch so weitgehend wie möglich auszuschalten. Das funktioniert sehr gut, indem du den Nutzer stark gängelst und ihm kaum Freiheiten lässt.

Geben wir dem Menschen genau einen Weg vor, so kann er keinen anderen nehmen. Das klingt plausibel und ist es auch. Zumindest dann, wenn der Anwendungszweck dieses Mittel heiligt.

Das kann der Fall sein, wenn es etwa darum geht, per App eine Taxifahrt abzuwickeln. Hier wählt das System den Standort per GPS vor. Der Nutzer gibt sein Fahrziel ein. Das System sucht den nächstgelegenen Fahrer und schickt ihn zum Nutzer. Am Ende der Fahrt zahlt der Nutzer über das System und hinterlässt eine Bewertung. Flexibilität wäre hier wohl völlig fehl am Platze und die einfache Bedienung ist sicherlich einer der Gründe für den Erfolg solcher Apps (neben den Fahrpreisen natürlich).

In weniger simplen Umgebungen wirkt eine zu schlichte und zu lineare Informationsarchitektur hingegen wirklich wie eine unnötige Gängelei. Generell sollten Nutzer stets das Maß an Freiheit zur Verfügung haben, das sie sich persönlich wünschen, soweit dieser persönliche Wunsch mit einer gewissen Sinnhaftigkeit in Einklang mit dem Anwendungszweck zu bringen ist.

Selbst wenn dieser Einklang gegeben ist, bleibt die nonlineare Informationsarchitektur ein Eiertanz. Denn das Frustrationspotenzial steigt mit jedem möglichen Weg von A nach B. Und frustrierte Nutzer will natürlich keiner von uns.

Wege zu mehr Flexibilität

Ein Weg, den starren linearen Vorgang aufzubrechen, könnte sein, nach Nutzern zu unterscheiden: Handelt es sich um einen technisch wenig versierten, vielleicht sogar unerfahrenen Nutzer oder haben wir es mit einem Poweruser unserer Dienste zu tun?

Im letztgenannten Fall könnten wir durchaus die Zügel lösen und dem loyalen Nutzer mehr Freiheiten einräumen. Auf der psychologischen Ebene dürfte eine solche Vorgehensweise seine Loyalität sogar noch verstärken. Ein Neuling hingegen, wird sich eher über die deutliche Unterstützung freuen.

Ein anderer Weg könnte darin bestehen, nach Aufgaben zu unterscheiden: Wenn deine Website und App es erlauben, unterschiedliche Aufgaben zu erledigen, so unterscheide nach deren Komplexitätsgrad. Schwierigere Tasks gehst du linear an, weniger komplexe nicht linear.

Günstig kann es auch sein, den Nutzern innerhalb eines komplexeren Tasks mehr Entscheidungsspielräume zu geben. Auf diese Weise bestimmen die Nutzer, von wo aus der Weg wohin weitergeht. Das unterstützt ebenfalls das Gefühl der Selbstbestimmtheit.

Nichtlineares Design beschränkt sich aber nicht auf diese relativ großen Prozesse. Den Unterschied kannst du auch im Detail schon machen. Gib deinen Nutzern etwa verschiedene Möglichkeiten, von A nach B zu kommen – zum Beispiel, indem du einen Zurück-Button vorsiehst, um einen Schritt oder eine Seite rückwärts zu gelangen und gleichzeitig etwa unter iOS auch die entsprechende Swipe-Geste vom rechten zum linken Bildschirmrand unterstützt.

Mach die Dinge so einfach wie möglich, aber nicht einfacher

Wichtig ist dabei nur, dass die unterschiedlichen Möglichkeiten sich nicht gegenseitig im Weg stehen oder sogar widersprechen. Auch unterschiedliche Wege müssen sich vollkommen natürlich anfühlen und gehen lassen.

Kritiker der etablierten Step-by-Step-Nutzerführung wenden ein, dass es sich hierbei vielfach um Beispiele für ein Phänomen handelt, vor dem uns einst Einstein warnte, als er sagte: „Mach die Dinge so einfach wie möglich, aber nicht einfacher”. Handelte es sich tatsächlich um eine Übervereinfachung, dann müssten wir schon kurz- bis mittelfristig mit negativen Konsequenzen rechnen.

Legen deine Besucher- oder Nutzerstatistiken einen Engagement-Rückgang nahe, solltest du spätestens mal ein kritisches Auge auf deine Informationsarchitektur werfen.

Quellen zum Weiterlesen:

• Information Architecture. Basics for Designers. | Alina Arhipova
• The Difference Between Information Architecture and UX Design | Darren Northcott

(Der Beitrag erschien erstmals im Februar 2019. Seitdem wird er regelmäßig aktualisiert, zuletzt am 05.04.2022.)