Informationsarchitektur: So strukturierst du die Inhalte deiner Website

Sie sorgt dafür, dass die Besucher sich auf der Seite zurecht finden und überhaupt verschiedene Seiten besuchen. Dazu steigert sie die Conversion Rate, senkt die Absprung-Rate, sorgt für eine bessere Positionierung in Suchergebnissen und senkt langfristig Kosten: die Informationsarchitektur. Zumindest dann, wenn sie richtig erarbeitet wurde.
Erfahre in diesem Artikel, wie du die Website-Inhalte sinnvoll strukturieren kannst.
4.9
(87)

Eine gute Informationsarchitektur macht es den Nutzern leicht, die gewünschten Inhalte zu finden. Um dies zu erreichen, musst du wissen, wie Benutzer nach Informationen suchen und wie man Inhalte strukturieren und kennzeichnen kann.

Design und Technik können noch so toll umgesetzt sein, wenn die Informationsarchitektur nicht verständlich und nachvollziehbar ist, kannst du die Website eigentlich gleich in die Tonne treten.

Der konzeptionelle Part, einschließlich der Struktur der Inhalte, ist essentiell für den Erfolg der Website.

Typische Fragen bei der Erarbeitung der Informationsarchitektur sind:

  • Was ist Informationsarchitektur (kurz: IA) und warum ist sie wichtig?
  • Wie erstelle ich ein IA-Dokument? Welche Fragen müssen darin geklärt werden?
  • Welche Formen der Informationsarchitektur gibt es und welche ist die richtige für mich?
  • Wie bringe ich Struktur in meinen Content? Welche Tools sind nützlich?
  • Wie finde ich heraus, ob meine Informationsarchitektur gelungen ist?

Diese werden wir Schritt für Schritt im Artikel behandeln und du erfährst, wie du mit einer intuitiven Informationsarchitektur die Basis für eine erfolgreiche Website schaffst.

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 1
Der User braucht quasi einen Kompass, um auf der Website navigieren zu können.

Definition: Was ist Informationsarchitektur?

Informationsarchitektur (IA) beschäftigt sich mit der Organisation von Informationen innerhalb einer Website oder eines Webshops. Sie definiert die Struktur der Inhalte und stellt sicher, dass User schnell finden, wonach sie suchen.

Vereinfacht gesagt: Die Informationsarchitektur bildet das Skelett der Website. Sie ist der Entwurf einer Seitenstruktur und legt den Grundstein für eine gelungene Website. Informationsarchitektur kategorisiert Informationen, definiert Beschriftungen, Zusammenhänge und Hierarchien und erarbeitet Navigationsstrukturen. Gute Informationsarchitektur berücksichtigt User-Bedürfnisse, Anforderungen von Suchmaschinen und die Unternehmensziele.

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 2

Im Allgemeinen stützt sich die Informationsarchitektur auf drei Säulen:
Inhalt, Kontext und Benutzer

Ist Informationsarchitektur dasselbe wie UX-Design oder Informationsdesign?

Auch wenn diese Annahme weit verbreitet ist, ist sie falsch. Informationsarchitektur hat nur wenig mit visueller Gestaltung zu tun.

Der IA-Prozess steht ganz am Anfang; das Informationsdesign visualisiert später die festgelegte Informationsarchitektur. Außerdem bildet die Informationsarchitektur die Grundlage für das UX-Design.

Abgrenzung zur Navigation:

Informationsarchitektur und Navigationsdesign sind zwar zusammenhängende Konzepte, dennoch bildet die Navigation nur die Spitze der IA.

Die Navigation umfasst alle Elemente, die User durch die Website führen: die verschiedenen Menüs, Breadcrumbs, Textlinks, Footer-Links und vieles mehr.

Erst wenn die Informationsarchitektur festgelegt wurde, ist es sinnvoll, die Navigation zu designen. Andernfalls läufst du Gefahr, dass du viel Zeit und Geld in die Ausarbeitung einer Navigation steckst, die dem Umfang der Inhalte jedoch nicht gerecht wird.

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 3

Warum ist eine Informationsarchitektur so wichtig?

Eine klare Website-Architektur hilft Menschen dabei, mit der Fülle an Informationen im Web klarzukommen und sich darin zurechtzufinden. Doch nicht nur User profitieren von guter Informationsarchitektur: sie hilft außerdem Suchmaschinen dabei, relevante Inhalte schnell zu finden.

Die Ausarbeitung einer guten Informationsarchitektur bringt viele Vorteile:

IA hilft beim Zurechtfinden und Ans-Ziel-Gelangen

User, die finden, was sie suchen, sind glückliche User. Und glückliche User sind kauffreudige User. Durch eine gelungene Informationsarchitektur werden Nutzer an die Hand genommen und auf dem schnellsten Weg zum Ziel geführt – ganz egal, auf welcher Ebene der Website sie starten. In gewisser Weise übernimmt die IA das Denken für die User.

IA steigert die Conversion Rate

Die Conversion Rate ist ein prozentualer Wert, der angibt, wie viele Besuche zu einer definierten Conversion führen. Eine Conversion kann zum Beispiel ein Kaufabschluss, eine Newsletter-Anmeldung oder ein Download sein. Je intuitiver Inhalte organisiert und erreichbar sind, desto wahrscheinlicher ist es, dass Conversions erzielt werden.

IA senkt die Absprungrate

Wenn User schnell und einfach finden, wonach sie gesucht haben (und das Gefundene zusätzlich alle Fragen beantwortet und ihre Bedürfnisse abdeckt), werden sie nicht auf der Website der Konkurrenz weitersuchen. Ein abgesprungener User kommt selten wieder. Mit der richtigen Informationsarchitektur passiert das gar nicht erst.

IA senkt die Support- und Marketing-Kosten

Wer frühzeitig in eine gelungene Informationsarchitektur investiert, spart später bei Support und Marketing. Zum einen gibt es weniger Fragen zu gesuchten Produkten (weil diese direkt gefunden werden), zum anderen muss weniger Zeit in die Suchmaschinenoptimierung investiert werden.

IA liefert die perfekte Ausgangsposition für SEO

Alle vorangegangen Gründe für Informationsarchitektur münden in einem Top-Vorteil: Die Chancen für höhere Platzierungen in den Suchergebnissen steigen immens. Eine durchdachte Informationsarchitektur sorgt für eine suchmaschinenfreundliche Website. Hier finden Suchmaschinen-Crawler, was User suchen – rasch und unkompliziert. Und während die Konkurrenz aufholt, was du schon geschafft hast, kannst du in aller Ruhe zu weiteren SEO-Maßnahmen übergehen und deinen Vorsprung noch weiter ausbauen.

Lerne mehr dazu: Webdesign und SEO – ein offener Brief an alle Webdesigner und Webprogrammierer.

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 4

7 Fragen, die du dir stellen solltest, bevor du die Informationsarchitektur festlegst

Der erste Schritt in der Definition einer Informationsarchitektur ist, die Hintergründe zu beleuchten. Erstelle dir am besten ein IA-Dokument, in dem du folgende 7 Fragen beantwortest:

1. Was ist das Ziel des Unternehmens bzw. der Website?

Je nachdem, um welche Art es sich bei deiner Website handelt – z. B. einen Blog oder einen Onlineshop – kann die Onlinepräsenz unterschiedliche Ziele verfolgen:

  • Informationsvermittlung
  • Akquirierung von Personal
  • Anmeldungen oder Downloads
  • Bekanntheitssteigerung
  • Bestellungen und Online-Käufe
  • und vieles mehr

Selbstverständlich kann eine Website auch mehrere Absichten verfolgen. Benenne all deine Ziele und priorisiere sie – zum Beispiel in Form einer Pyramide. Denn auf dem Weg zum obersten Ziel warten zahlreiche Zwischenziele. Überlege dir, was nötig ist, um diese zu erreichen.
Hier helfen dir auch die Überlegungen eines Website-Konzeptes.

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 5
Jede Corporate Website braucht ihre eigene Informationsarchitektur.

2. Was ist das Ziel der User?

Was wollen deine potenziellen Besucher auf deiner Website sehen, durchführen, erleben oder lernen? In welcher Situation befinden sie sich? Welche Geräte nutzen sie? Was ist ihr Ziel? Und: Wer sind sie überhaupt? Je genauer du das weißt, desto gezielter kannst du ihre Bedürfnisse erfüllen.

Erstelle Personas, führe Interviews und erarbeite Best- und Worst-Case-Szenarien. Wie kannst du Letztere vermeiden? Hierbei hilft dir auch die Zielgruppenanalyse.

3. Wie steht es um den Wettbewerb?

Wer sind deine Marktbegleiter? Analysiere ihre Websites und finde heraus, was gut und schlecht daran ist. Das Gute schaust du dir ab, das Schlechte versuchst du zu vermeiden. Das Rad muss nicht neu erfunden werden.

4. Was ist der USP deines Unternehmens bzw. deiner Website?

Nachdem du die Websites deiner Mitbewerber analysiert hast, findest du heraus, was dich im positiven Sinne von ihnen abhebt. Erkenne deinen Unique Selling Point (USP) und überlege dir, wie du ihn auf deiner Website präsentieren kannst.

5. Welche Angebote oder Seiten sind besonders wichtig?

Nicht all deine Produkte oder Dienstleistungen sind gleich wichtig. Und nicht jeder geplante Content hat dieselbe Priorität. Manche Angebote sind gewinnbringender oder beliebter als andere. Erstelle eine Prioritätenliste.

Hier findest du einen Überblick über die wichtigsten Website-Typen und wie du sie am besten einsetzt.

6. Content-Audit: Welche Inhalte sollen auf die neue Website?

Es gibt bereits eine Website? Erstelle eine Liste aller Seiten, Blogartikel und Download-Dokumente. Kategorisiere sie thematisch und halte fest, was davon wiederverwendet werden soll. Berücksichtige dabei nicht nur dein persönliches Empfinden, sondern auch echte Daten: Eine Seite wurde besonders häufig aufgerufen, ein Blogartikel ist in den Suchergebnissen perfekt positioniert? Nimm diese Inhalte mit, denn die User mögen deinen Content!

Du erstellst eine neue Website und startest bei null? Erstelle eine erste Content-Liste. Welche Inhalte dürfen nicht fehlen? Welche Inhalte bietet die Konkurrenz – und was davon solltest du auch auf deine Website aufnehmen?

7. SEO-Audit: Welche Rankings gibt es, welche Keywords sind relevant?

Content- und SEO-Audit gehen Hand in Hand. Wie gut ist die bestehende Website in den Suchmaschinen positioniert? Welche Seiten ranken besonders hoch in den Suchergebnissen? Notiere die URLs und überlege dir, wie du diese Seiten in deine neue Website integrieren kannst. Denke später unbedingt daran, korrekte Weiterleitungen (301-Redirect) zu setzen.

Auch wichtig: Führe eine Keyword-Recherche durch und erarbeite ein Keyword-Set. Priorisiere deine Keywords, erstelle thematische Cluster und ordne sie künftigen Seiten zu. Zu welchen Keywords gibt es bestehende Inhalte? Welche Inhalte dürfen laut Keyword-Recherche nicht fehlen?

Gleiche die Ergebnisse mit deinem Content-Audit ab und finalisiere deinen Content-Plan.

Ziel der Analysen und Audits ist es, herauszufinden, welche Inhalte du auf deiner Website anbieten möchtest. Sobald du diese Ergebnisse in Händen hältst, kannst du zum nächsten Schritt übergehen: der Schaffung einer Struktur.

Baue deine Website rund um deinen Content auf,
nicht andersherum.

Welche Architekturstrukturen gibt es?

Es gibt drei Formen der Informationsarchitektur: die hierarchische Architektur, die Netzstruktur und die lineare Architektur. Hast du dein IA-Dokument detailliert ausgearbeitet, wird dir die Wahl der passenden Form nicht schwerfallen.

Hierarchische Informationsarchitektur

Die geläufigste Variante ist die hierarchische Website-Strukturierung – man nennt sie auch Baumstruktur. Du kannst dir diese Strukturierung wie das Inhaltsverzeichnis einer Enzyklopädie vorstellen. Je tiefer man klickt, desto detaillierter werden die Informationen.

Beispiel:
Startseite -> Hauptnavigationspunkt bzw. Kategorie -> Unterkategorie -> Produkt

Diese Form der Klassifizierung ist vorteilhaft, weil sie sehr intuitiv ist. Jeder kennt das Konzept der hierarchischen Ordnung und findet sich schnell zurecht.

Die hierarchische IA ist besonders geeignet für:
Online-Shops und Unternehmenswebsites bzw. umfangreichere Online-Auftritte

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 6
Beispiel einer hierarchischen Struktur

Netzstruktur:
Bei der Netzstruktur gibt es keine klare Gliederung – alle Seiten (außer der Startseite) befinden sich auf einer gleichberechtigten Ebene. Das bedeutet mehr Freiheit, aber auch weniger Orientierung. Es braucht zusätzliche Systeme, um User und Suchmaschinen über nächste Schritte zu informieren. Außerdem ist ein ausgeklügeltes Suchsystem unumgänglich.

Die Netzstruktur ist besonders geeignet für:
Blogs und Wikis

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 7
Beispiel einer Netzstruktur

Lineare Informationsarchitektur

Bei der linearen Informationsarchitektur wird der User nach einem strikten Schema durch die Website geführt. Die einzelnen Unterseiten werden nacheinander verlinkt. Der User hat wenig Einfluss auf die Navigation – er kann lediglich vor oder zurück navigieren. Man kennt dieses System beispielsweise von Bestellvorgängen. Ein großer Vorteil ist die einfache Bedienbarkeit.

Besonders geeignet für:
Onepager bzw. kleine Websites oder Online-Shops

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 8
Beispiel einer linearen Struktur

Darüber hinaus gibt es noch eine weitere Form zur Strukturierung der Inhalte, die herangezogen werden kann, um die Navigation möglichst intuitiv zu gestalten:

Website-Strukturierung nach Metaphern

Damit ist gemeint, dass sich die Strukturierung deiner Website am physischen Äquivalent orientiert. Nehmen wir als Beispiel ein Bekleidungsgeschäft: Du kommst zur Tür herein – und stehst auf der Startseite. Hier bekommst du einen Überblick. Anschließend hast du die Möglichkeit, verschiedene Räume zu betreten. In einem Raum gibt es Damenbekleidung, im nächsten Herrenbekleidung und im dritten Babybekleidung – damit betrittst du eine Kategorie-Seite. Du steuerst auf die Kleiderstange mit den Hosen zu. Das wäre dann die Unterkategorie „Hosen“. Schlussendlich gehst du noch zur Kasse, bevor du freundlich verabschiedet wirst.


Du weißt nun auch, welche Form der Strukturierung zu deiner geplanten Website passt. Jetzt wird es konkret: Im nächsten Schritt steht dein Content im Mittelpunkt. Ein wichtiger Teil der Websitearchitektur ist die Kategorisierung und aussagekräftige Benennung der Inhalte.

Strukturierung deiner Inhalte mittels Gruppierung und „Card Sorting“

Eine gute Informationsarchitektur basiert auf vier Systemen:

  • Klassifikationssystem
  • Beschriftungssystem
  • Navigationssystem
  • Suchsystem

Wir konzentrieren uns zuerst auf das Klassifikations- und Beschriftungssystem. Diese Systeme stellen sicher, dass du deinen Content sinnvoll gruppierst und zielführend benennst. Das schafft die Basis für eine nachvollziehbare Informationsarchitektur:

1. Erstelle eine Content-Liste

Bevor du dich in die Strukturierung deiner Website stürzt, solltest du eine vollständige Content-Liste erstellen. Nimm dafür auch ein IA-Dokument zur Hand. Halte jede (!) geplante Seite fest und notiere:

  • Art des Inhalts (z. B. Information, Produkt, …)
  • Umfang
  • Aktualität
  • ggf. Autor
  • ggf. Seitenname und aktuelle URL
Informationsarchitektur: So strukturierst du die Inhalte deiner Website 9
Beim Card Sorting werden die Inhalte mit Hilfe von Karten/Zetteln strukturiert und sortiert.

2. Gruppiere deinen Content mittels Card Sorting

Nun geht es daran, Ordnung und Struktur in deine Content-Liste zu bringen. Das funktioniert am besten mit der Card-Sorting-Technik, die nicht nur deine unternehmerische Sichtweise, sondern auch jene deiner Zielgruppe einbezieht.

Bei einem Card-Sorting-Test findest du heraus, wie User deinen Inhalt gruppieren und einordnen würden. So gehts:

  1. Kartenerstellung:
    Jede geplante Seite wird mit einer kurzen, aussagekräftigen Bezeichnung auf je eine Karte geschrieben.
  2. Testung:
    Für den darauffolgenden Test legst du alle Karten durchgemischt auf einen Tisch und bittest Personen deiner Zielgruppe einzeln, sie logisch zu gruppieren. Ein unabhängiger Moderator beobachtet die Situation und notiert Auffälligkeiten. Wird eine Karte häufig verschoben? Werden Gruppierungen wieder aufgelöst? Das Ergebnis wird festgehalten. Du kannst die Testpersonen auch bitten, Oberbegriffe für die gewählten Gruppierungen zu formulieren.
  3. Analyse:
    Schlussendlich werden die Ergebnisse aller Testpersonen analysiert und miteinander verglichen. Im Idealfall haben sie die Inhalte ähnlich gruppiert. Weichen manche Gruppierungen stark voneinander ab, können die Beobachtungen des Moderators hilfreich sein.

Du kannst den Card-Sorting-Test natürlich auch gemeinsam mit deinem Team durchführen – ohne externe Testpersonen. Die einhergehenden Gespräche und Diskussionen liefern oft gute Anhaltspunkte und kreative Lösungswege.

4. Erarbeite ein Beschriftungssystem

Nachdem du deine Inhalte gruppiert hast, brauchen sie einen Namen. Bediene dich dabei an gängigen Bezeichnungen. Wo würdest du zum Beispiel die Telefonnummer, E-Mail-Adresse und Anschrift auf einer Website suchen? Vermutlich unter der Seite „Kontakt“. 

Sieh dich bei den Big Playern um, orientiere dich an den Benennungen deiner Testgruppe und halte es so einfach wie möglich. Auch Keyword-Analysen können bei der Erarbeitung eines Beschriftungssystems hilfreich sein.

Dein Content wurde nun kategorisiert und beschriftet. Ein wichtiger Teil ist geschafft, sehr gut! Jetzt musst du ihn nur noch in Position bringen, Hierarchien definieren und die Navigationsstruktur erarbeiten. Um User gut durch die Website zu führen, solltest du auf altbekannte Navigationselemente zurückgreifen. Welche das sind, verrate ich dir jetzt im Anschluss. Und dann ist deine Informationsarchitektur auch schon fast fertig!

Navigationsstruktur und Sitemap erstellen

Wir kommen zum nächsten System, das ausschlaggebend für den Erfolg deiner Informationsarchitektur ist: das Navigationssystem. Das lässt sich am besten mithilfe einer Sitemap erarbeiten.

Eine Sitemap ermöglicht dir einen differenzierten Blick auf deine künftige Website, indem sie die Hierarchien und Strukturen darstellt. Im Folgenden geht es also nicht um die altbekannte XML-Sitemap, sondern um eine Sitemap als Organisations- und Planungs-Tool.

Es gibt verschiedene Wege und Formate, die Navigationsstruktur deiner Website in einer Sitemap darzustellen und damit die Navigation zu visualisieren. Listen und Diagramme sind am geläufigsten.

Ganz egal, für welche Darstellungsform du dich entscheidest: Behalte stets im Blick, was du in deinem IA-Dokument bereits festgehalten hast. Was sind die Ziele deiner Website? Was wollen deine User? Was wollen Suchmaschinen?

Sitemap als Liste

Der einfachste und schnellste Weg ist die Sitemap-Darstellung als Liste. Das sieht zum Beispiel so aus:

Startseite
– Leistungen
            Webdesign
            App-Entwicklung
– Über uns
– Kontakt

Die Hierarchien werden dabei gleich erkennbar. Aber es gibt Schwachstellen: Im Listen-Format lassen sich keine User-Pfade und weitere Vernetzungen darstellen (z. B., dass der Punkt „App-Entwicklung“ auch auf der Startseite verlinkt ist). Bei umfangreichen Websites kann das schnell unübersichtlich werden.  

Horizontales Diagramm

Das horizontale Diagramm ist die wohl bekannteste Form der Sitemap-Darstellung. Dabei werden nicht nur Hierarchien als Diagramm dargestellt, sondern auch Pfade zwischen den Seiten. Das ermöglicht eine umfangreiche Visualisierung, die auch Laien einen nachvollziehbaren Einblick in die Websitearchitektur ermöglicht.

Vertikales Diagramm

Das vertikale Diagramm ähnelt dem horizontalen Diagramm – es wird lediglich auf die Seite gekippt. Manche Menschen bevorzugen das vertikale Diagramm, weil es dem gewohnten Lesefluss besser gerecht wird.

Tipp: 7-Plus/Minus-2-Regel:
Reduziere die Anforderungen an deine User auf ein Minimum. Ihre Kapazitäten im digitalen Raum sind begrenzt.Das Millersche Gesetz besagt, dass ein Mensch nur 7 +/- 2 Elemente im Kurzzeitgedächtnis behalten kann.

Natürlich kommt es auf die Art der Information an, aber als Faustregel gilt: Biete maximal neun Elemente gleichzeitig an – also zum Beispiel neun Menüpunkte, neun Unterkategorien oder neun Links im Footer. Noch besser sind maximal fünf Elemente.

Erfahre mehr über die wichtigen UX-Gesetze und deren Bedeutung für eine gute Benutzerführung.

Nützliche Tools zur Erarbeitung der Sitemap

Willst du deine Sitemap mittels Diagramm aufbauen, ist ein simples Mindmapping-Tool ein geeignetes Werkzeug. Davon gibt es jede Menge:

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 10
Sitemaps lassen sich mit verschiedenen Tools erstellen.

Manche der Tools eignen sich gut für Teams, andere sind gratis und wieder andere erfüllen höchste ästhetische Ansprüche. Teste dich durch und finde das Tool, das deinen Ansprüchen am besten gerecht wird.
Professionalisiere deine Navigationsstruktur mit Wireframes!

Mit Wireframes kannst du einzelne Seiten deiner Websites grafisch darstellen. Farben, Typografie & Co. spielen in diesem Prozess noch keine Rolle. Stattdessen konzentrierst du dich darauf, wie du Buttons auffällig positionierst, wo du interne Links platzierst oder wie du Inhalte anordnest, um die Navigation möglichst einfach zu gestalten.

Im Blogbeitrag über Wireframes im Webdesign erfährst du mehr darüber.

Die wichtigsten Elemente der Website-Architektur

Wichtig bei der Erarbeitung einer Navigation ist, dass du dich an gängigen Elementen der Website-Architektur bedienst – Objekte und Standards, an die sich User gewöhnt haben.

Die folgenden Elemente bieten dir zahlreiche Möglichkeiten, deine User durch deine Website zu navigieren.

Hauptnavigation

Die Hauptnavigation – oder auch das horizontale Hauptmenü – ist sowohl für User als auch für Suchmaschinen bedeutend. Diese Hauptnavigationsleiste ist auf der gesamten Website verfügbar. Beschränke dich auf die wichtigsten Seiten und wähle aussagekräftige, knackige Bezeichnungen (im Idealfall spiegeln diese außerdem deine Keywords wieder).

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 11
Beispiele für Hauptnavigationen

Mega-Menü

Die Hauptnavigation kann durch ein Mega-Menü erweitert werden. Wie der Name schon erahnen lässt, handelt es sich dabei um ein umfangreiches Menü, das tiefer gehende Links zum jeweiligen Menüpunkt bietet. Selbst Unterkategorien oder Bilder finden in einem übersichtlichen Mega-Menü Platz, um Kontext zu schaffen.

Übrigens ist ein Mega-Menü userfreundlicher als ein Drop-Down-Menü. Letzteres ist schmäler (also weniger übersichtlich) und dadurch oft länger (was Scrollen und damit weniger Nutzerfreundlichkeit erfordert).

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 12
Beispiele für Mega-Menüs

Hamburger-Menü

Eine weitere Möglichkeit zur Hauptnavigation bietet das Hamburger-Menü, das vor allem für mobile Website-Versionen beliebt ist. Mit einem Klick auf die drei horizontalen Striche bietet es (mehr) Navigationsmöglichkeiten. Vor allem im mobilen Kontext wird das Hamburger-Menü häufig eingesetzt.

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 13
Beispiele für Hamburger Menüs

Metanavigation

Die Metanavigation ist ein Element, das alle unabhängigen Must-haves umfasst – zum Beispiel die Sprachauswahl, den Einkaufswagen oder die Suchfunktion. Sie ist typischerweise rechts oben verankert.

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 14
Beispiele für Metanavigationen

Suchsystem

Das vierte relevante System in der Informationsarchitektur ist das Suchsystem. Eine Suchfunktion bietet deinen Usern eine alternative Möglichkeit, schnell ans Ziel zu gelangen. Meist ist sie Teil der Metanavigation.

Suchfelder werden hauptsächlich für Produktsuchen genutzt. Optimiere deine Suchfunktion deshalb dahingehend und beziehe die Darstellung der Suchergebnisse in die Informationsarchitektur ein.

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 15
Beispiele für Suchsysteme

Subnavigation

Die Navigation in der Seitenleiste – oder auch das vertikale Menü – dient in der Regel der zusätzlichen Segmentierung von Inhalten einer gewählten Kategorie. Die Links können kategorisiert und mithilfe von Tabs oder Akkordeons angeboten werden.

Footer

Der Footer ist – gleich wie das Hauptmenü – auf der gesamten Website präsent und vermittelt deshalb Priorität. Das bedeutet, dass hier nur die wichtigsten Links platziert werden sollen.

Kontaktinformationen, Newsletter-Anmeldeformulare, FAQ-Links oder Social-Media-Icons sind im Footer ebenfalls gut aufgehoben. Oder aber Angaben wie Impressum oder Datenschutzerklärung, die somit weniger optisch auffallen und keinen Platz im Hauptmenü verschwenden.

Informationsarchitektur: So strukturierst du die Inhalte deiner Website 16
Beispiele für Footer(navigationen)

Breadcrumbs

Die Breadcrumbs bieten vor allem für Online-Shops ein hilfreiches Element für die Strukturierung: Hierbei zeigt eine Textzeile an, an welcher Verzweigung der betrachtete Inhalt eingebettet ist. So weiß der Nutzer immer genau, an welcher Stelle des Navigationspfades er sich aktuell befindet und kann so leichter eine Ebene höher zurückwechseln.

Neben den genannten Optionen gibt es noch weitere Elemente und Möglichkeiten zur Strukturierung wie beispielsweise:

  • Kategorien
  • Interne Links (z. B. „Das könnte dir auch gefallen“, „Andere Nutzer kauften auch“)
  • Call-to-Action-Buttons

Textlinks

Die User navigieren nicht immer nur mit Hilfe der Navigationen. Oft genug, wenn Sie Inhalte konsumieren, Texte lesen, sind Querverweise hilfreich. Das Paradebeispiel ist Wikipedia, wo in jedem Artikel viele Querverweise zu anderen Wikipedia-Einträgen enthalten sind. Dies funktioniert auch bei anderen Websites gut. Warum dem Leser im Text an passender Stelle nicht andere interessante, nützliche Seiten und Artikel präsentieren? Solange es ihm hilft, also den berühmten Mehrwert hat, ist dies auch jeden Fall sinnvoll und sollte bei der Texterstellung gleich mitbedacht werden.

User-Testing:
Überprüfe die Website-Architektur

Der Prototyp steht? Dann solltest du deine Informationsarchitektur noch einem letzten Test unterziehen Das gelingt beispielsweise mit dem sogenannten Tree Testing.

Beim Tree Testing wird evaluiert, ob und wie Informationen auf einer Website gefunden werden. Dabei wird der Testperson eine Information genannt, die sie finden muss. Sie navigiert dabei nur über Linktexte bzw. Beschriftungen durch die Website.

Dadurch wird klar: Sind Beschriftungen aussagekräftig? Sind die Kategorie-Benennungen verständlich? Wurden die Inhalte richtig kategorisiert? Dieser Test bietet dir die Chance, deine Informationsarchitektur auf den letzten Metern zu perfektionieren.

Denk dabei an die Fragen, die sich der Website-Besucher regelmäßig stellt:

  • Wo bin ich?
  • Wie finde ich etwas über … heraus?
  • Was ist auf dieser Website verfügbar?
  • Wie kann ich mit XYZ kommunizieren?
  • Wo gibt es weitere Informationen?
  • Wie komme ich zurück zur Hauptseite?
  • Wie suche ich nach…?
Informationsarchitektur, UX Design und Navigation
Informationsarchitektur, UX Design und Navigation

9 IA-Tipps für eine noch bessere Informationsarchitektur

Schauen wir uns abschließend noch ein paar Tipps an, mit denen du die Informationsarchitektur besonders smart gestalten kannst.

1. Je flacher die Hierarchie, desto besser

Entscheidest du dich für eine hierarchische Informationsarchitektur, gilt: Je flacher die Hierarchie, desto besser das Ergebnis. Eine allzu tiefe Struktur erschwert es Suchmaschinen, deine Inhalte zu crawlen. Auch User verlieren sich in den Tiefen.

2. 3-Klick-Regel

Denke daran, die Struktur möglichst flach zu halten. Das kommt nicht nur bei Usern, sondern auch bei Suchmaschinen gut an. Im Idealfall gilt: Jede Seite liegt nur drei Klicks von der Startseite entfernt. Weitere Verschachtelungen werden unübersichtlich und erfordern zu viel Zeit des Users.

Kritiker wenden allerdings ein, diese Regel sei willkürlich. Solange die Navigationsstruktur klar ist und deine User jederzeit wissen, wo sie sich gerade befinden und wie sie schnell ans Ziel kommen, ist die Klickzahl nebensächlich. Nichtsdestotrotz sollte der Aufwand für Besucher möglichst gering sein.

3. Beziehe alle Seiten in deine Architektur ein

Wenn du deine Informationsarchitektur erarbeitest, ist es wichtig, dass du ALLE Seiten in die Planung miteinbeziehst. Also wirklich alle! Selbst das Impressum oder die Datenschutzerklärung braucht einen Platz.

4. Orientiere dich an Best-Practice-Beispielen

Erfinde das Rad nicht neu. Analysiere relevante, erfolgreiche Websites und finde heraus, warum sie funktionieren. Es gibt Verhaltensmuster und Navigationswege, die wir im Web erlernt haben. Indem du dich an Standards orientierst, müssen Nutzer weniger kognitive Anstrengungen vornehmen, da sie die Funktionsweise bereits kennen. Darum ist es wichtig, gängige Website-Elemente und Strukturen zu nutzen. Wenn User wissen, was sie erwartet, finden sie sich schneller zurecht.

5. Bleib einheitlich

Es ist wichtig, dass du eine konsistente Struktur erarbeitest. Das gilt sowohl für die Navigation als auch für den Aufbau der Unterseiten. Wenn jede Unterseite anders aufgebaut ist, sorgt das für Verwirrung. Erarbeite mithilfe von Wireframes Strukturmuster, die sich wiederholen.

6. Nutze sprechende URLs

Sprechende URLs verraten dem User jederzeit, wo er sich gerade befindet. Sie sind aussagekräftig und machen die Hierarchien und Strukturen sichtbar. Sprechende URLs sehen zum Beispiel so aus:

www.beispielwebsite.com/
www.beispielwebsite.com/shop/
www.beispielwebsite.com/shop/accessoires/
www.beispielwebsite.com/shop/accessoires/muetzen/

Auch hier gilt: Die URL-Struktur sollte konsistent sein. Halte dich kurz und vermeide Sonderzeichen, Umlaute und Leerzeichen. Hier liegt auch ein weiterer Vorteil für die Suchmaschinenoptimierung, da sprechende URLs meist das Keyword enthalten.

7. Gehe nicht davon aus, dass alle User auf der Homepage starten

Deine Informationsarchitektur sollte berücksichtigen, dass die Startseite nicht immer die erste Seite ist, die User sehen. Durch Suchmaschinen, Social Media & Co. landen Besucher häufig auf einer Unterseite. Stelle sicher, dass die wichtigsten Antworten auf jeder Seite zu finden bzw. erreichbar sind:

  • Wo bin ich? Und worum geht es auf dieser Website?
  • Wer steckt dahinter und wie kann ich Kontakt aufnehmen?
  • Wie komme ich von hieraus weiter? Was kann ich als Nächstes tun? Wie kann ich einen Schritt (eine Hierarchie-Ebene) zurückgehen?

8. Arbeite so, dass das System jederzeit erweitert werden kann

Gestalte deine Informationsarchitektur vorausschauend. Was, wenn du irgendwann eine Kategorie hinzufügen möchtest? Weiterentwicklung soll nicht daran scheitern, dass sie auf der Website keinen Platz hat. Halte deine Strukturen flexibel und prüfe von Zeit zu Zeit, ob die Informationsarchitektur in der Form noch ihre Berechtigung hat.

9. Think mobile

Last, but not least: Think mobile! Das ist sicherlich kein Geheimnis mehr. Im Jahr 2021 wurden zum ersten Male mehr als die Hälfte aller Seitenaufrufe weltweit mit einem mobilen Endgerät getätigt. Je nach Branche liegt der Anteil sogar noch höher, Tendenz steigend. Mit dem Mobile First Index hat auch Google schon längst auf diese Entwicklung reagiert.

Das bedeutet für deine Informationsarchitektur: Konzentriere dich bei der Erarbeitung der IA nicht nur auf die Desktop-User. Dein Navigationssystem muss auch in der mobilen Version funktionieren.

Bewertungsergebnis: 4.9 / 5. | Anzahl der Bewertungen: 87

Über 8.250 sind schon dabei:

Exklusive Webdesign-Inhalte

Kostenfreie Templates + regelmäßig Webdesign-Links & -tipps

Deine Daten sind sicher. Mehr Infos: Beispiele, Datenschutz, Analyse und Widerruf

Optimiere Websites und
deinen Webdesign-Workflow:

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.
Mehr über diese Website und den Autor erfahren   →

Die Inhalte des Webdesign Journals wurden mit Sorgfalt, Engagement und Liebe erstellt – so auch dieser Artikel. Wenn du Ergänzungen oder Anmerkungen hast, kannst du dich gerne bei mir melden. Ebenso wenn du Ideen oder Wünsche für weitere Themen hast.

Wenn du Ausschnitte oder Zitate in wissenschaftlichen Arbeiten zitieren möchtest, kann du dies gerne machen. Was gar nicht geht: Inhalte klauen oder kopieren! Sollte aber selbstverständlich sein…

Nach oben scrollen

Über 8.250 sind schon dabei!

Exklusive Webdesign-Inhalte

Bleibe up to date mit den kostenlosen Templates und den wöchentlichen Links & Tipps: