Informationsarchitektur und Navigationsstruktur auf Websites

Die Informationsarchitektur (IA) organisiert die Inhalte einer Website. Die Navigation macht diese Inhalte für den Besucher bestmöglich zugänglich. Nehmen wir als Beispiel eine Ausstellung, so ist die IA der Katalog, die Navigation die Führung durch die Ausstellung. Beides kann sehr unterschiedliche Herangehensweisen abbilden und unterstützen. Je nach Website-Typ bieten sich verschiedene Ansätze an.

Der Website-Typ bestimmt die beste Struktur

Eine hierarchische Struktur eignet sich gut für Corporate Websites. Blogs und Wikis sind in einer netzförmigen Struktur angeordnet. Eine lineare Struktur eignet sich am besten für Onepager, Bezahlvorgänge und Registrierungen. Selten findet sich auf einer Website ausschließlich eine Struktur. Im Sinne der bestmöglichen Benutzerführung werden die Konzepte entsprechend kombiniert.

Hierarchische Informationsarchitektur

Die hierarchisch aufgebaute Website-Struktur, auch Baumstruktur genannt, ordnet die Unterseiten einer Website in einer klaren Gliederung an. Diese Informationsarchitektur erinnert an das Inhaltsverzeichnis eines Fachbuchs. Der Detailgrad der Informationen verfeinert sich, je tiefer der Besucher in die Website vordringt. Die hierarchische Struktur ist im Internet sehr verbreitet und bewährt.

Durch diese Struktur ist es möglich, viele Inhaltsseiten in einer eindeutigen Beziehung zueinander logisch anzuordnen. Nahezu jeder Seitenbesucher kennt dieses Konzept und versteht daher sofort die Struktur der Website.

Ein Blick auf eine typische URL-Struktur verdeutlicht sowohl die hierarchische Anordnung als auch den zunehmenden Detailgrad:

  1. www.unternehmen.de
  2. www.unternehmen.de/produkte
  3. www.unternehmen.de/produkte/produktgruppe
  4. www.unternehmen.de/produkte/produktgruppe/produkt-xyz
  5. www.unternehmen.de/produkte/produktgruppe/produkt-xyz/zubehoer

Im Zusammenhang mit einer guten Findbarkeit durch Suchmaschinen (SEO) kann eine zu tiefe URL-Struktur nachteilig sein, da relevante Keywords nach hinten rutschen. In umfangreichen, tief verzweigten Websites wird daher häufig eine flache Informationsarchitektur gewählt. Die Navigation wird hierarchisch aufgebaut um die Übersichtlichkeit zu gewährleisten.

Navigationskonzepte für hierarchische Website-Strukturen

Fast immer werden ausklappbare/erweiterbare Navigationen eingesetzt. Mit diesen kann der Besucher die jeweilige Hierarchie visuell nachvollziehen, bevor er eine Unterseite anwählt. Gebräuchliche Muster dafür sind »Drop Down«-, »Dropline«- oder »Flyout«-Menüs.

Bei entsprechender Informationstiefe unterstützt oft eine »Breadcrumb«-Navigation die Orientierung des Besuchers, wo er sich gerade in der Website aufhält.

Netzstruktur

Bei der Netzstruktur werden die Unterseiten einer Website ohne eine klare Gliederung angeordnet. Der Benutzer hat hier die größtmögliche Freiheit, muss aber jederzeit darüber informiert werden, wo auf der Website er sich befindet. Diese Art der Informationsarchitektur kann sehr schnell unübersichtlich und unverständlich werden.

Netzstrukturen finden Sie unter anderem bei Blogs und Wikis. Das Ziel dieser Websites ist nicht, einen Besucher durch alle Unterseiten des Webauftritts zu schleusen und ihn umfassend zu informieren. In der Regel steigt der Besucher über eine Unterseite in die Website ein, die häufig direkt über die Ergebnisliste einer Suchmaschine erreicht wird. Die Startseite eines solchen Projekts wird selten zuerst besucht, oft sogar gar nicht.

In der URL einer typischen Unterseite ist entsprechend keine Struktur erkennbar, bestenfalls findet eine Sortierung nach Datum statt. Also zum Beispiel:

oder eben nur:

Navigationskonzepte für netzförmige Website-Strukturen

Eine leistungsfähige Suchfunktion, ggf. mit Autosuggest, Autocomplete oder einer Kombination aus beiden, bildet das Hauptelement der Navigation für eine netzförmige IA. Entsprechend ihrer Bedeutung für das Erschließen weiterer  Website-Inhalte wird die Suche oft hervorgehoben gestaltet.

Kategorien und/oder Schlagwörter sorgen für eine weitere Filterung der Unterseiten. Besonders die Mehrfacheigenschaften von Schlagwörtern ermöglichen ganz individuelle Zusammenstellungen von Inhalten.

Lineare Struktur

Eine lineare Informationsarchitektur verlinkt die einzelnen Unterseiten nacheinander. Der Besucher der Website kann die Unterseiten nur in der vorgegebenen Reihenfolge besuchen, bzw. sich vor- und zurückbewegen. Dieses Konzept ist ebenfalls oft anzutreffen, es ist allerdings für eher spezielle Zwecke geeignet.

Ein perfekter Einsatzort ist beispielsweise der Bestellvorgang in einem Onlineshop. Hier werden Informationen in einer vorgegebenen Reihenfolge abgefragt, damit wird der Besucher durch den Bezahlvorgang geleitet. Andere Beispiele sind Anmeldeprozesse oder lineare Präsentationen.

Im Rahmen des UX-Konzepts »Storytelling« findet diese Struktur immer mehr Einsatz auf sog. Onepagern. Die stark betonte lineare Abfolge eignet sich besonders gut zum Erzählen von »Geschichten«.

Ein großer Vorteil ist die leichte Bedienung dieses Konzepts. Der Besucher kennt auch diese Art der Informationsstrukturierung sehr gut und findet sich daher schnell zurecht. Allerdings wird er gleichzeitig in seiner Freiheit eingeschränkt, die Inhalte in einer abweichenden Herangehensweise zu erfassen.

Navigationskonzepte für lineare Website-Strukturen

Für eine Orientierung ist eine Darstellung der linearen Struktur in der Regel ausreichend, ergänzt durch die Information, an welcher Stelle der Besucher sich befindet.

Werden die Inhalte innerhalb eines Onepagers organisiert, führen die Menü-Punkte zu Sprungmarken innerhalb der Seite.

Im praktischen Einsatz

Inhalte lassen sich sehr selten ausschließlich in der einen oder anderen Informationsarchitektur organisieren.

Auf einer Zeitleiste verankerte Beiträge passen ebenso wenig wie Meinungsbeiträge oder Erlebnisberichte in eine streng hierarchische Schublade. Immer mehr Unternehmen integrieren einen Blog oder ein Magazin in ihre Corporate Website, um die humanen und sozialen Aspekte ihrer Marke angemessen(er) darzustellen. Ebenso wollen zunehmend mehr Shop-Betreiber aus ähnlichen Gründen ihre Produkte redaktionell begleiten.

Auf der anderen Seite wird die Zugänglichkeit von Blog- oder Wiki-Inhalten insbesondere bei sehr umfangreichen Inhalten durch eine fehlende Gliederung immer mehr beeinträchtigt. Eine bewertete Überschaubarkeit der Inhalte durch ein Navigationskonzept wird wichtiger, um dem Besucher die Orientierung zu erleichtern.

Die Kombination verschiedener Inhaltsstrukturen (IA) wird in der Regel auch eine Kombination der Navigationskonzepte mit sich bringen. Wir haben erläutert, welche Methoden sich zur Erschließung von unterschiedlichen Informationsarchitekturen am besten eignen. Jedes Navigationskonzept muss sich aber zuallererst nach den individuellen Zielen der Betreiber als auch der Besucher der Website richten.

Ein tiefgreifendes und umfassendes Verständnis für zumindest die wichtigsten Inhalte einer zu planenden Website-Architektur ist daher eine unbedingte Voraussetzung für die erfolgreiche Umsetzung.

Geschrieben von kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Anspruchsvolle Projekte mit kulturbanause

Wir lieben es gewachsene Strukturen aufzuräumen und perfekt im Content Management abzubilden. Strukturell komplexe Projekte realisieren wir regelmäßig und sehr gerne.

Konzeptionelles Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →