• Facebook
  • Google+
  • Twitter
  • XING
21.06.2014

Der Unterschied zwischen Informationsarchitektur (IA) und Navigation

Die IA ist das Informations-Rückgrad der Website; die Navigation bezieht sich auf diejenigen Elemente, die den Nutzern ermöglichen, spezifische Informationen auf der Website zu finden.

Card Sorting

© CandyBox Images - Fotolia.com

 

by Jennifer Cardello (deutsche Übersetzung) - 22.06.2014

 

Praktiker verwechseln manchmal die Konzepte der Informationsarchitektur (IA) mit dem Navigationsdesign. Es mag zwar stimmen, dass diese Konzepte zusammenhängen und dass die Informationsarchitektur das Design der Navigation bestimmt, aber die IA und die Navigation sind nicht das gleiche. In der Tat erstreckt sich die IA weit über die Website-Navigation hinaus. Nathaniel Davis bezieht sich in seinem Artikel für UXmatters mit dem Titel "Framing the Practice of Information Architecture" darauf, dass die Navigation als Spitze des Eisbergs auf der IA der Website sitzt.

Was ist die Informationsarchitektur einer Website?

Die Informationsarchitektur einer Website (oder eines Intranets) besteht aus zwei Hauptkomponenten:

  • Identifikation und Definition von Seiten Inhalt/Funktionalität
  • Die Grundliegende Organisation, Struktur und Nomenklatur, welche die Beziehungen zwischen dem Seiteninhalt bzw. der Funktionalität definiert.

Die Informationsarchitektur (IA) ist jedoch kein Bestandteil des Nutzerinterfaces (UI) - viel mehr versorgt die IA das UI mit Informationen. Die IA wird in Tabellen und Diagrammen dokumentiert, nicht aber in Wireframes, umfassenden Layouts, oder Prototypen.

Informationsarchitektur NNG

Diese Inhaltsübersicht beschreibt die einzelnen Teile der nngroup.com Website und deren Beziehung zueinander. Blaue Knoten repräsentieren erstrangige Informationsobjekte, grüne Knoten sind zweitrangige und gelbe sind drittrangige Objekte. Die Kinder der Knoten sind darunter aufgelistet.

Auch wenn die IA selbst nicht im UI zu sehen ist, hat sie auf jeden Fall Auswirkungen auf die User Experience (UX). Wie wir aus Definition der User Experience (engl.) wissen, besteht die UX aus allen Elementen, denen ein Nutzer auf einer Website begegnet. Und obwohl die Nutzer die Struktur der Website nicht sehen, werden sie doch hoffentlich das Gefühl bekommen, dass der Inhalt der Website entsprechend ihren Anforderungen und Erwartungen sauber aufgeteilt ist. Natürlich verlassen viele Nutzer traurigerweise eine Website mit dem Gefühl, dass der Inhalt und die Funktionen nicht ihren Wünschen entsprechen, weil die schlechte Organisation, Struktur und Nomenklatur eine unschöne User Experience verursacht.

Als Analogie: Sie können ja auch nicht das Skelett von einem Pferd oder einem Huhn sehen, wenn Sie diese beobachten (ausser vielleicht Sie sind Superman oder eine Radiologe). Aber diese verschiedenen Skelette machen genau den Unterschied zwischen diesen Tieren aus. Versuchen Sie nicht Hühner zu reiten, das Skelett wird Sie nicht tragen.

Die Vorgehensweise bei der Definition einer Informationsarchitektur beinhaltet folgende Elemente:

  • Content Inventar: Untersuchung der Website, um bestehende Inhalte zu lokalisieren und identifizieren.
  • Content Audit: Evaluieren der Nützlichkeit des Inhalts, dessen Richtigkeit, Artikulation und Gesamteffektivität.
  • Informationsgruppierung: Definition von Nutzerzentrierten Beziehungen zwischen den Inhalten.
  • Entwicklung der Taxonomie: Definition einer Namenskonvention (kontrolliertes Vokabular), um diese auf allen Inhaltsseiten anzuwenden.
  • Erstellen von Informationsbeschreibungen: Definition nützlicher Metadaten, die genutzt werden können, um "Related Links" oder andere Navigationselemente, die das Entdecken in Inhalten erleichtert, zu generieren.

Was ist Website Navigation?

Die Website Navigation ist eine Sammlung von UI-Komponenten. Das primäre Ziel einer Navigation ist es, dem Nutzer das Auffinden von Informationen und Funktionen zu erleichtern und ihn dazu zu ermutigen, gewünschte Aktionen durchzuführen. Navigationskomponenten umfassen die globale und lokale Navigation, die Gebrauchsnavigation, die Breadcrumb-Navigation, Filter, die Facetten-Navigation, Related Links, Fusszeilen, die so genannten "Fat Footers", und so weiter.

Navigation SBA.gov Teil 1
Navigation SBA.gov Teil 2

Hier einige Beispielkomponenten einer Navigation: 1) Nutzungsnavigation; 2) Globale Navigation; 3) Brotkrumenpfad; 4) Lokale Navigation; 5) Verwandte Links (In diesem Fall Artikel und Blogposts); 6) Fette Fusszeile. (http://www.sba.gov/)

Für jede einzelne Navigation müssen eine Reihe von Entscheidungen getroffen werden:

  • Nutzungspriorität: Wie fest stützen sich Nutzer auf diese Navigationskomponente ab? Werden Nutzer beispielsweise in erster Linie mit der lokalen Navigation durch die Site navigieren? Oder verlassen sie sich eher mehr auf die "Related Links"?
  • Anordnung: Auf welchen Seiten sollte die Navigation präsent sein? Wo im Seitenlayout soll sie platziert werden? (Oben, unten, links rechts?)
  • Pattern: Welches Navigations-Design-Pattern unterstützt das Finden und Entdecken von Inhalten am besten - Tabs, Megamenus, Karusells, Accordeons (und weitere)

Beziehung zwischen IA und Navigation

Können Designer beim Erstellen einer neuen Seite die IA ignorieren und sich nur auf die Navigation konzentrieren? Die Antwort ist nein: Es ist ineffizient und kann sogar gefährlich sein, es zu tun. Eine Navigation, die nicht dem ganzen Spektrum des Inhalts und der Funktionalität Platz bietet, kann ziemlich teuer werden. Nehmen wir zum Beispiel an, ein Team von Designern entscheidet sich für die typische umgekehrte L-Navigation weil es gut aussieht (Eine Navigationsleiste oben und eine Navigationsleiste auf der linken Seite). Ein umgekehrtes L kann aber nur Seiten unterbringen, die aus nicht mehr als 4 Ebenen bestehen. Unglücklicherweise stellt sich später bei dem Projekt heraus, dass die Website mehr als 4 Ebenen tief ist. Nun müssen sie entweder mit dem Design der Navigation von vorne anfangen, oder solange an der Seite herumbasteln, bis der ganze Inhalt auf nur 4 Ebenen platziert werden kann.

Navigation Suffolk Universität

Beispiel einer umgekehrten L Navigation (http://www.suffolk.edu/)

Definieren Sie die IA bevor Sie mit dem Design der Navigation beginnen

Wenn Sie davor stehen, ein Projekt zu designen oder zu re-designen, ist es wichtig, zuerst einen Blick unter die Haube zu werfen und mit der Definition oder Neudefinition der IA zu beginnen. Die IA muss nicht zwingend komplett fertig sein, um mit dem Wireframe oder dem Prototypen zu beginnen, aber es ist wichtig zu wissen, wie komplex und wie volumenreich der Inhalt der geplanten Website ist.
Navigationskomponenten-Entscheidungen lediglich nach dem Aussehen zu treffen kann Sie dazu zwingen, die ideale IA zu verwerfen und eine IA zu erstellen, die weder den Bedürfnissen der Nutzer, noch Ihren Inhalten auf der Website Rechnung trägt.

Lernen Sie mehr darüber und besuchen Sie unseren Kurs für Informationsarchitektur und Navigation (engl.) an den "Usability Week" Events.

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

  • Silvia

    26-06-14 09:43

    Wir haben vor einigen Jahren für eine interne Studie 150 Websites geprüft und bewertet, abgestützt auf den ISO-Standard 9241-151. Keine der damaligen Websites hat die Anforderungen an die Informationsarchitektur erfüllt.

    Hier noch die Norm:
    Ergonomics of human-system interaction - Part 151: Guidance on World Wide Web user interfaces (ISO 9241-151:2008)

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen