Navigation, in der sich niemand verirrt: Informationsarchitektur Schritt für Schritt

Ein Beispiel: Eine Mutter steht abends in der Küche, das Smartphone in der Hand. Ihre Tochter möchte Cello lernen, und die Musikschule im Ort verleiht angeblich Instrumente. Sie öffnet die Website und sieht im Menü fünf Punkte: „Angebot“, „Service“, „Über uns“, „Aktuelles“ und „Kontakt“. Unter „Angebot“ stehen Kurse. Unter „Service“ stehen Downloads, Ferientermine und ein Formular. Die Leihinstrumente finden sich schließlich als PDF unter „Über uns“, im Abschnitt „Förderverein“. Bis dahin hat sie dreimal geraten und einmal fast aufgegeben.

Niemand im Team der Musikschule wollte das so. Der Förderverein bezahlt die Instrumente, also landete die Info dort. Aus Sicht der Schule ist das logisch. Aus Sicht der Mutter ist es ein Versteck.

Genau darum geht es in der Informationsarchitektur: Inhalte so zu ordnen und zu benennen, dass Menschen sie dort finden, wo sie sie erwarten. In diesem Artikel baust du Schritt für Schritt eine Navigation für ein solches Beispielprojekt auf. Du lernst zwei einfache Methoden kennen, mit denen du nicht raten musst: Card Sorting, um herauszufinden, wie Menschen Inhalte gruppieren, und Tree Testing, um zu prüfen, ob deine Struktur funktioniert. Vorwissen brauchst du keins.

Was Informationsarchitektur mit deiner Navigation zu tun hat

Informationsarchitektur (kurz IA) beschreibt, wie die Inhalte einer Website oder App geordnet, gruppiert und benannt sind. Sie ist das unsichtbare Gerüst. Die Navigation ist der sichtbare Teil davon: das Menü, die Unterpunkte, die Links im Footer, die Brotkrümel-Pfade oben auf einer Seite.

Ein Vergleich hilft: Die IA ist der Grundriss eines Supermarkts, also welche Produkte in welchem Gang stehen. Die Navigation sind die Schilder über den Gängen. Wenn der Grundriss unlogisch ist, helfen auch schöne Schilder wenig. Und wenn der Grundriss stimmt, die Schilder aber „Sortiment B“ heißen, findet trotzdem niemand die Nudeln.

Drei Begriffe tauchen dabei immer wieder auf:

• Struktur: welche Inhalte zusammengehören und was über- oder untergeordnet ist. Wie tief diese Struktur sein sollte, erklärt der Artikel Flat vs Deep Hierarchy.
• Labels: die Wörter, mit denen Bereiche und Menüpunkte beschriftet sind.
• Navigationsbaum: die Struktur als Liste mit Ebenen, ohne Gestaltung. Auf Englisch heißt das „Tree“, daher auch der Name Tree Testing.

Wenn du die Grundlagen und die Geschichte der Disziplin genauer kennenlernen möchtest, lies die Einführung in die Informationsarchitektur. Hier geht es ab jetzt um die Praxis.

Warum Navigation so oft danebengeht

Die meisten verwirrenden Menüs entstehen nicht aus Nachlässigkeit. Sie entstehen, weil das Team die eigene Organisation zu gut kennt. Drei Muster begegnen dir dabei besonders häufig.

Die Innensicht wird zum Menü

Viele Navigationen spiegeln das Organigramm: Abteilungen, Zuständigkeiten, interne Projektnamen. Im Beispiel der Musikschule gehört der Instrumentenverleih organisatorisch zum Förderverein. Für Eltern ist das völlig egal. Sie haben eine Aufgabe („Ich brauche ein Cello“) und suchen nach einem Wort, das zu dieser Aufgabe passt.

Fachleute sprechen hier vom mentalen Modell: die Vorstellung, die Menschen im Kopf davon haben, wie etwas funktioniert und wo etwas zu finden ist. Eine gute Navigation passt zum mentalen Modell der Besuchenden, nicht zu dem des Teams.

Vage Labels ohne Spur

„Service“, „Lösungen“, „Angebot“, „Wissenswertes“: Solche Wörter klingen ordentlich, sagen aber wenig darüber, was sich dahinter verbirgt. Menschen entscheiden bei jedem Klick, welcher Link am ehesten zu ihrem Ziel führt. Sie folgen dabei einer Art Fährte, die in der UX als Information Scent bezeichnet wird. Ein konkretes Label wie „Instrumente leihen“ hat eine starke Fährte. Ein Label wie „Service“ hat fast keine.

Die Sammelschublade

Fast jede gewachsene Website hat einen Menüpunkt, in dem alles landet, was nirgends sonst passt. Oft heißt er „Service“, „Mehr“ oder „Sonstiges“. Jeder neue Inhalt macht diese Schublade voller und unübersichtlicher, bis niemand mehr hineinschaut. Wenn du so einen Bereich entdeckst, ist das ein deutliches Signal: Hier fehlt eine Struktur, die zu den Aufgaben der Menschen passt.

Schritt 1: Inhalte sammeln, bevor du sortierst

Bevor du über Menüpunkte nachdenkst, brauchst du eine Liste aller Inhalte. Das klingt banal, wird aber oft übersprungen. Ohne diese Liste sortierst du Annahmen statt Inhalte.

Für eine kleine Website reicht eine einfache Tabelle. Geh jede Seite durch und notiere, was dort steht. Bei der Musikschule könnte die Liste so beginnen: Instrumentalunterricht Klavier, Instrumentalunterricht Streicher, Musikalische Früherziehung, Bandkurse für Jugendliche, Gebühren und Ermäßigungen, Anmeldung, Kündigung, Ferientermine, Lehrkräfte, Instrumentenverleih, Konzerte, Förderverein, Raumvermietung, Stellenangebote.

Schreib dabei auf, was ein Inhalt ist, nicht wo er heute steht. „Ferientermine“ ist ein Inhalt. „Service“ ist nur ein Ort. Achte außerdem auf Dinge, die Menschen häufig fragen, die aber noch gar keine eigene Seite haben. Ein kurzer Blick in die E-Mails an das Sekretariat oder in die Suchbegriffe der Website zeigt oft, was wirklich gesucht wird.

Am Ende hast du typischerweise 30 bis 60 Einträge für eine kleinere Website. Das ist eine gute Größe für den nächsten Schritt.

Schritt 2: Mit Card Sorting herausfinden, wie Menschen denken

Beim Card Sorting schreibst du jeden Inhalt auf eine Karte, ganz klassisch auf Papier oder digital in einem Tool. Teilnehmende aus deiner Zielgruppe sortieren diese Karten dann in Gruppen, die für sie zusammengehören.

Es gibt zwei Varianten. Beim offenen Card Sorting bilden die Teilnehmenden eigene Gruppen und geben ihnen eigene Namen. Das ist ideal, wenn du noch keine Struktur hast oder deine bisherige grundsätzlich infrage stellst. Beim geschlossenen Card Sorting gibst du die Gruppen vor, und die Teilnehmenden ordnen die Karten nur zu. Das passt, wenn du eine Struktur schon hast und prüfen willst, ob die Inhalte richtig verteilt sind.

Für die Musikschule startest du mit einem offenen Card Sorting. Wie viele Teilnehmende brauchst du? Eine häufig zitierte Untersuchung von Tullis und Wood hat gezeigt, dass sich die Gruppierungen ab etwa 20 bis 30 Teilnehmenden kaum noch verändern. Für einen ersten Eindruck reichen auch weniger, solange du die Ergebnisse vorsichtig liest.

Beim Auswerten interessieren dich drei Dinge:

• Welche Karten landen fast immer zusammen? Wenn „Gebühren“, „Anmeldung“ und „Kündigung“ bei den meisten in einer Gruppe stehen, hast du einen klaren Kandidaten für einen gemeinsamen Bereich.
• Welche Karten wandern hin und her? Wenn „Instrumentenverleih“ mal bei den Kursen, mal bei den Kosten und mal bei „Sonstiges“ landet, ist das ein Hinweis, dass dieser Inhalt später mehrere Zugänge braucht.
• Welche Namen geben die Teilnehmenden ihren Gruppen? Das ist Gold wert. Wenn mehrere Menschen eine Gruppe „Unterricht“ nennen und niemand „Angebot“, hast du dein Label gefunden.

Viele Online-Tools zeigen diese Muster als Matrix, in der du sofort siehst, wie oft zwei Karten gemeinsam gruppiert wurden. Eine ausführliche Anleitung zur Durchführung findest du im Artikel Card Sorting Basics.

Schritt 3: Einen ersten Navigationsbaum bauen

Aus den Ergebnissen des Card Sortings entsteht jetzt dein erster Entwurf. Schreib ihn als einfache, eingerückte Liste. Keine Farben, kein Layout, nur Ebenen und Wörter. Für die Musikschule könnte er so aussehen:

• Unterricht: Instrumente und Gesang, Musikalische Früherziehung, Bands und Ensembles, Lehrkräfte
• Anmelden und Kosten: Gebühren und Ermäßigungen, Anmeldung, Kündigung, Instrumente leihen
• Termine: Konzerte, Ferien und schulfreie Tage
• Über die Musikschule: Team, Förderverein, Räume mieten, Jobs
• Kontakt

Beim Formulieren der Labels helfen dir ein paar Faustregeln:

Benenne Aufgaben und Dinge, nicht Abteilungen. „Instrumente leihen“ statt „Förderverein“. Der Förderverein bekommt trotzdem seine Seite, nur eben nicht als Versteck für den Verleih.

Nutze die Wörter deiner Zielgruppe. Die Gruppennamen aus dem Card Sorting sind dafür die beste Quelle. Wenn Eltern „Kosten“ sagen und das Team „Entgeltordnung“, gewinnt „Kosten“.

Mach Labels unterscheidbar. Wenn zwei Menüpunkte ähnlich klingen, etwa „Angebot“ und „Leistungen“, müssen Menschen raten. Jeder Punkt sollte klar etwas anderes versprechen.

Lass die Sammelschublade weg. Wenn ein Inhalt nirgends passt, ist das eine Frage an die Struktur, keine Einladung für „Sonstiges“.

Ein kurzer Vorher-nachher-Vergleich zeigt den Unterschied. Vorher: „Angebot“, „Service“, „Über uns“, „Aktuelles“, „Kontakt“. Nachher: „Unterricht“, „Anmelden und Kosten“, „Termine“, „Über die Musikschule“, „Kontakt“. Die neue Fassung ist nicht kreativer. Sie ist konkreter, und genau das macht sie leichter zu benutzen.

Schritt 4: Den Baum mit Tree Testing prüfen

Dein Entwurf basiert jetzt auf echten Daten, aber er ist immer noch eine Annahme. Ob Menschen sich darin zurechtfinden, zeigt erst ein Test. Hier kommt Tree Testing ins Spiel. Die Methode wird manchmal auch „umgekehrtes Card Sorting“ genannt: Statt Karten zu sortieren, suchen die Teilnehmenden Inhalte in einer fertigen Struktur.

So funktioniert es: Die Teilnehmenden sehen deinen Navigationsbaum als reine Textliste. Sie bekommen eine Aufgabe, zum Beispiel „Du möchtest wissen, ob deine Tochter ein Cello ausleihen kann. Wo würdest du nachsehen?“ Dann klicken sie sich durch die Ebenen, bis sie die Stelle gefunden haben, an der sie die Antwort vermuten.

Der Clou liegt im Weglassen. Es gibt kein Design, keine Bilder, keine Suche, keine Teaser auf der Startseite. Getestet wird nur, ob Struktur und Labels allein tragen. Das macht Tree Testing schnell und günstig, weil du nichts gestalten oder programmieren musst. Und du kannst es sehr früh einsetzen, lange bevor die erste Seite existiert.

Gute Aufgaben formulieren

Die Qualität eines Tree Tests steht und fällt mit den Aufgaben. Drei Regeln helfen:

Verrate nicht die Lösung. Wenn die Aufgabe „Finde die Gebühren“ lautet und im Baum ein Punkt „Gebühren“ steht, testest du nur, ob Menschen Wörter wiedererkennen. Beschreib stattdessen die Situation: „Du überlegst, ob du dir den Unterricht leisten kannst. Wo findest du heraus, was er kostet?“

Nutze realistische Szenarien. Gute Aufgaben entstehen aus echten Anliegen: aus Fragen an das Sekretariat, aus Suchbegriffen, aus Gesprächen mit der Zielgruppe. Eine leicht verständliche Aufgabe mit klarem Anlass bringt dir mehr als eine konstruierte.

Halte die Zahl klein. Mit jeder Aufgabe lernen die Teilnehmenden den Baum besser kennen, und die späteren Ergebnisse werden dadurch geschönt. Der Web-Leitfaden der EU-Kommission empfiehlt höchstens zehn Aufgaben, das UX-Framework der Universität Glasgow nennt fünf bis acht. Konzentrier dich also auf die Inhalte, bei denen du unsicher bist, und auf die, die für die meisten Menschen am wichtigsten sind.

Lege außerdem für jede Aufgabe vorher fest, welche Stelle im Baum als richtig gilt. Manchmal sind es auch zwei Stellen, wenn ein Inhalt bewusst an mehreren Orten verlinkt ist.

Teilnehmende und Tools

Tree Tests laufen meist online und ohne Moderation: Die Teilnehmenden bekommen einen Link und arbeiten die Aufgaben selbstständig ab. Die Universität Glasgow rechnet mit etwa 10 bis 15 Minuten pro Person und empfiehlt 15 bis 50 Teilnehmende, mindestens aber 10. Die EU-Kommission nennt für unmoderierte Tests bis zu 50 Teilnehmende. Wichtiger als die exakte Zahl ist, dass die Menschen zu deiner Zielgruppe passen. Fünfzig Studierende helfen der Musikschule wenig, wenn vor allem Eltern die Website nutzen.

Wenn du mehr über das Warum erfahren möchtest, kannst du einzelne Sitzungen auch moderiert durchführen und die Teilnehmenden bitten, laut zu denken. Dann siehst du nicht nur, wo sie falsch abbiegen, sondern hörst auch, warum.

Für die Durchführung gibt es spezialisierte Tools, etwa Optimal Workshop mit seinem Tree-Testing-Modul Treejack oder Maze. Sie übernehmen die Auswertung und zeigen dir die Klickpfade grafisch an.

Ergebnisse lesen, ohne Statistikkurs

Nach dem Test bekommst du pro Aufgabe einige Kennzahlen. Für den Einstieg reichen vier davon.

Erfolgsquote: Wie viele Teilnehmende sind an der richtigen Stelle gelandet? Das ist die wichtigste Zahl. Eine niedrige Erfolgsquote zeigt dir, dass ein Inhalt in deiner Struktur schwer zu finden ist.

Direktheit: Wie viele sind ohne Umweg ans Ziel gekommen, also ohne zurückzuklicken? Eine hohe Erfolgsquote bei niedriger Direktheit bedeutet: Die Menschen finden es irgendwann, aber erst nach Suchen und Probieren. Das ist ein Warnzeichen, denn auf einer echten Website brechen viele vorher ab.

Erster Klick: Wohin klicken die Teilnehmenden zuerst? Diese Zahl ist überraschend aussagekräftig. Jeff Sauro von MeasuringU hat acht Tree-Testing-Studien mit über 1.000 Teilnehmenden ausgewertet: War der erste Klick richtig, lag die Erfolgsquote bei rund 80 Prozent. War er falsch, lag sie nur bei rund 14 Prozent. Wer oben falsch abbiegt, findet also selten noch zurück.

Zeit: Wie lange hat eine Aufgabe gedauert? Lange Zeiten deuten auf Zögern hin, etwa weil zwei Labels ähnlich klingen.

Ein Beispiel, wie das konkret aussehen könnte: Bei der Aufgabe zum Cello landen die meisten Teilnehmenden richtig bei „Anmelden und Kosten“ und dann bei „Instrumente leihen“. Ein Teil klickt aber zuerst auf „Unterricht“, weil es um ein Instrument geht. Die Erfolgsquote ist ordentlich, der erste Klick ist geteilt. Das ist kein Grund, alles umzubauen. Es ist ein Hinweis, dass „Instrumente leihen“ zusätzlich unter „Unterricht“ verlinkt werden sollte.

Schau dir außerdem die konkreten Klickpfade an. Wenn viele Menschen an derselben falschen Stelle landen, ist das keine Zufallsstreuung. Dann ergibt diese Stelle für sie Sinn, und du solltest überlegen, ob der Inhalt dort nicht tatsächlich hingehört.

Schritt 5: Verbessern und noch einmal testen

Ein Tree Test liefert selten ein Ergebnis wie „alles falsch“. Meist sind es drei oder vier Stellen, die hängen. Typische Korrekturen sind:

• ein Label umbenennen, das falsche Erwartungen weckt
• einen Inhalt verschieben, wenn viele Teilnehmende ihn woanders gesucht haben
• einen Inhalt an zwei Stellen erreichbar machen, wenn die Erwartungen geteilt sind
• zwei Bereiche zusammenlegen, die von außen nicht unterscheidbar sind

Danach testest du die geänderte Fassung erneut, gern mit neuen Teilnehmenden. Weil du nichts gestalten musst, ist so eine zweite Runde schnell gemacht. Zwei oder drei kurze Runden bringen oft mehr als ein einziger großer Test. Und wenn du später ein klickbares Design hast, prüfst du es zusätzlich mit einem klassischen Usability-Test, denn dann spielen auch Layout, Texte und Bilder mit.

Vom Baum zur echten Navigation

Dein getesteter Baum ist das Fundament. Auf der fertigen Website verteilt er sich auf mehrere Navigationselemente, die zusammenarbeiten:

Die Hauptnavigation zeigt die oberste Ebene, auf jeder Seite an derselben Stelle. Auf dem Smartphone verschwindet sie oft hinter einem Hamburger-Menü. Das spart Platz, macht die Punkte aber weniger sichtbar. Für besonders wichtige Aufgaben lohnt es sich daher, sie zusätzlich direkt auf der Startseite zu verlinken.

Die lokale Navigation zeigt innerhalb eines Bereichs die Unterpunkte, etwa als Liste am Rand oder unter der Überschrift. Wer unter „Unterricht“ ist, sieht sofort alle Unterrichtsangebote.

Brotkrümel (englisch Breadcrumbs) zeigen den Pfad zur aktuellen Seite, zum Beispiel „Start › Anmelden und Kosten › Instrumente leihen“. Sie helfen besonders Menschen, die über eine Suchmaschine direkt auf einer Unterseite landen und sich erst einmal orientieren müssen.

Kontextlinks verbinden Inhalte quer zur Struktur. Auf der Seite zum Cellounterricht ein Link „Du hast noch kein Instrument? So funktioniert der Verleih“: Das ist oft die Stelle, an der die Mutter aus dem Einstiegsbeispiel tatsächlich ankommt.

Die Suche ist eine Ergänzung, kein Ersatz. Wenn die Navigation nicht funktioniert, wird die Suche zur Notlösung, und sie findet nur, was die Menschen richtig benennen können.

Typische Fehler beim Einstieg

Zuerst gestalten, dann strukturieren. Wer mit dem Layout beginnt, verliebt sich schnell in ein Menü mit genau fünf schönen Punkten und presst die Inhalte hinein. Besser: erst die Struktur testen, dann gestalten.

Nur im Team sortieren. Ein Card Sorting mit Kolleginnen und Kollegen ist ein guter Warm-up, ersetzt aber nicht die Zielgruppe. Das Team kennt die Interna, und genau das verzerrt das Ergebnis.

Aufgaben mit Lösungswörtern. Wenn die Aufgabe das Label schon enthält, sieht dein Test besser aus als die Wirklichkeit.

Jedes Ergebnis wörtlich umsetzen. Card Sorting und Tree Testing liefern Hinweise, keine fertigen Antworten. Wenn einzelne Teilnehmende etwas Ungewöhnliches tun, ist das interessant, aber kein Auftrag. Achte auf Muster.

Einmal testen und nie wieder. Websites wachsen. Neue Inhalte brauchen einen Platz, und mit jedem neuen Punkt kann die Struktur kippen. Ein kurzer Tree Test vor größeren Umbauten hält die Navigation gesund.

Fazit

Eine gute Navigation entsteht nicht durch Geschmack oder Bauchgefühl, sondern durch einen einfachen Ablauf: Inhalte sammeln, mit Card Sorting herausfinden, wie die Zielgruppe denkt, daraus einen Baum mit klaren Labels bauen und diesen Baum mit Tree Testing prüfen. Keine der Methoden braucht ein großes Budget oder eine fertige Website.

Der wichtigste Perspektivwechsel dabei: Die Navigation gehört den Menschen, die etwas suchen, nicht der Organisation, die etwas anbietet. Wenn du deine Labels nach ihren Aufgaben benennst und deine Struktur mit ihnen testest, findet auch die Mutter aus dem Beispiel das Cello beim ersten Versuch.

Checkliste

• Alle Inhalte als Liste erfasst, auch häufige Fragen ohne eigene Seite
• Offenes Card Sorting mit Menschen aus der Zielgruppe durchgeführt
• Gruppennamen der Teilnehmenden als Quelle für Labels genutzt
• Navigationsbaum als reine Textliste geschrieben
• Labels konkret, unterscheidbar und ohne Sammelschublade
• Höchstens zehn Tree-Testing-Aufgaben, ohne Lösungswörter
• Für jede Aufgabe die richtige Stelle im Baum festgelegt
• Erfolgsquote, Direktheit und ersten Klick ausgewertet
• Schwachstellen korrigiert und erneut getestet
• Wichtige Inhalte zusätzlich über Kontextlinks erreichbar

Quellen

• Europäische Kommission, Europa Web Guide: Tree testing method (auf Englisch)
• University of Glasgow, UX Framework: Tree testing (auf Englisch)
• Jeff Sauro, MeasuringU: How important is the first choice users make when navigating a website? (auf Englisch)
• MeasuringU: 10 Things to Know about Card Sorting (auf Englisch)
• Maze: Tree Testing (auf Englisch)