kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Informationsarchitektur und Navigationsstruktur auf Websites

Stilisierte Sitemap

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.

Workshops und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

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:

  • www.blog.de/jahr-monat/einzigartiger-artikel

oder eben nur:

  • www.blog.de/einzigartiger-artikel

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei konzeptionell anspruchsvollen Projekten

Unsere Agentur in Berlin hat viel Erfahrung in der Konzeption inhaltlich sowie strukturell komplexer Projekte. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
Konzeptionelles Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.