Navi – Leitfaden für gute Navigation im Web
Bachelor-Thesis von Dennis Glöckner
Digitale Medien an der Hochschule für Künste Bremen
Wintersemester 2026/2027
Bei Prof. Peter von Maydell und Prof. Dennis Paul

Ausgangslage & Motivation

Navigation gehört zu den grundlegenden Bestandteilen einer Website. In bisherigen Webprojekten habe ich Navigationssysteme überwiegend intuitiv entwickelt und Entscheidungen über Struktur von Inhalten, deren Benennung oder die Gestaltung von Menüs eher aus Erfahrung und bekannten Konventionen getroffen, ohne dass ich mich systematisch mit den dahinterliegenden Prinzipien auseinandergesetzt hatte.

Daraus entstand die leitende Frage für diese Arbeit: Wie kann gute Navigation systematisch konzipiert und umgesetzt werden? Welche etablierten Prinzipien und Empfehlungen gibt es? Wie lassen sich diese zu einem verständlichen Leitfaden zusammenführen? Und wie können diese theoretischen Erkenntnisse mit der praktischen Gestaltung einer Website verbunden werden? Aufgebaut auf diese Fragen entwickelte sich die Idee für Navi:

Ein digitaler Leitfaden über Webnavigation, dessen Website die vermittelten Prinzipien selbst anwendet.

Die praktische Umsetzung wird dadurch gleichzeitig zum Anwendungsbeispiel der behandelten Inhalte. Informationsarchitektur, Labeling, Navigationssysteme, technische Umsetzung und Barrierefreiheit werden nicht nur beschrieben, sondern beeinflussen die Gestaltung des Leitfadens.

Neben der inhaltlichen Auseinandersetzung mit Navigation auf Websites verfolgte das Projekt ein weiteres persönliches Lernziel: Durch vorherige Projekte waren bereits Erfahrungen mit WordPress und der Entwicklung eigener Themes vorhanden. Große Teile der technischen Umsetzung entstanden dabei jedoch mithilfe von künstlicher Intelligenz. Navi sollte daher möglichst von Grund auf eigenständig entwickelt werden. Das WordPress-Theme bot die Möglichkeit, die theoretische Auseinandersetzung mit Navigation mit der Vertiefung von PHP und JavaScript zu verbinden. Die technische Umsetzung wurde somit nicht nur Mittel zum Zweck, sondern selbst zu einem Bestandteil des Lernprozesses.

Recherche & theoretische Grundlagen

Die inhaltliche Grundlage des Projekts entstand zunächst durch die Auseinandersetzung mit Information Architecture: For the Web and Beyond von Louis Rosenfeld, Peter Morville und Jorge Arango. Das Buch betrachtet Informationsarchitektur nicht ausschließlich als Gestaltung und Navigation, sondern behandelt unter anderem Organisation, Labeling und Erschließung von Informationen. Besonders relevant für Navi war die Erkenntnis, das eine funktionierende Navigation nicht erst mit der Gestaltung eines Menüs beginnt. Bevor eine Navigation entstehen kann, müssen Inhalte strukturiert, gruppiert und verständlich bezeichnet werden. Die wesentlichen Inhalte wurden auf einem Trello-Board sortiert, um daraus die Informationsarchitektur für dieses Projekt zu entwickeln, doch dazu später mehr. Diese Zusammenhänge bildeten die Grundlage für die spätere Gliederung des Leitfadens.

Für die technische Umsetzung und insbesondere die Barrierefreiheit wurden ergänzend aktuelle Webstandards und Empfehlungen des W3C und der Web Accessibility Initiative herangezogen. Dazu gehören unter anderem semantisches HTML, Anforderungen der WCAG sowie Empfehlungen zur Tastaturbedienung, Fokus-Reihenfolgen und Unterstützung assistiver Technologien.

Durch die Recherche sollten etablierte Prinzipien zusammengefasst, verständlich aufbereitet und anhand einer konkreten Website praktisch angewendet werden. Das Ziel der Arbeit war es nicht, neue Ansätze für Navigation im Web zu entwickeln oder diese gar neu zu erfinden.

Vom Inhalt zur Navigation

Im Verlauf der Recherche entstand eine umfangreiche Sammlung miteinander verbundener Themen. Damit diese nicht einfach als einzelne Artikel nebeneinander stehen, musste zunächst eine nachvollziehbare Informationsarchitektur für den Leitfaden entwickelt werden. Die Inhalte wurden dafür nach ihrer jeweiligen Funktion innerhalb der Konzeption und Umsetzung einer Navigation gruppiert. Daraus entstanden die fünf übergeordneten Bereiche: von der Strukturierung und Benennung der Inhalte über die Gestaltung von Navigationssystemen und deren technische Umsetzung bis zur Barrierefreiheit.

Die daraus entstandenen Bereiche Struktur, Benennung, Navigation, Umsetzung und Barrierefreiheit bauen grundsätzlich aufeinander auf, sind jedoch nicht strikt als linearer Prozess zu verstehen. Entscheidungen innerhalb eines Bereichs können sich auf andere Bereiche auswirken und dort Anpassungen notwendig machen. Jeder Hauptbereich wurde wiederum in mehrere Artikel unterteilt, die einzelne Aspekte des jeweiligen Themenfeldes behandeln. So entstand schrittweise die hierarchische Struktur des Leitfadens, die gleichzeitig die Grundlage für seine Navigation bildet.

Auch die Benennung der fünf Bereiche entwickelte sich erst im Verlauf des Projekts, denn die ursprünglichen Labels Organisation, Labeling, Design, Umsetzung und Barrierefreiheit erwiesen sich teilweise als mehrdeutig oder sehr allgemein. “Labeling” setzte zudem im Vergleich zu anderen Begriffen stärkeres Fachwissen voraus und hob sich von der ansonsten deutschsprachigen Benennung ab. Auf Grundlage der tatsächlichen Inhalte wurden deshalb Begriffe entwickelt und anschließend in einem qualitativen Verständlichkeitstest mit fünf Personen überprüft. Der Prozess der Neuentwicklung ist im Blog dokumentiert.

Daraus gingen Struktur, Benennung und Navigation als verständlichere Bezeichnungen für die ersten drei Bereiche hervor. Für den vierten Bereich wurde zunächst Entwicklung als Alternative getestet, doch löste dieser Begriff teilweise keine konkreten oder sehr unterschiedliche Erwartungen aus. “Umsetzung” ist isoliert betrachtet ebenfalls breit gefasst, wurde von den Befragten im Zusammenhang mit den übrigen Bereichen jedoch als passender empfunden und deshalb beibehalten. Für die Hauptnavigation wird damit bewusst eine möglichst allgemein verständliche Sprache verwendet. In den Untermenüs können hingegen auch Fachbegriffe eingesetzt werden, da kurze Beschreibungen zusätzlichen Kontext geben.

Die entwickelte Informationsarchitektur wurde anschließend unmittelbar in das Navigationssystem der Website übertragen. Die fünf Hauptbereiche bilden die erste Ebene der Hauptnavigation, während die zugehörigen Artikel über Untermenüs erreichbar sind. Neben der hierarchischen Navigation wurden noch weitere Zugänge zu den Inhalten geschaffen: Breadcrumbs vermitteln die aktuelle Position innerhalb der Struktur, Inhaltsverzeichnisse ermöglichen die Navigation innerhalb längerer Artikel und ein alphabetischer Index bietet einen alternativen Zugang über konkrete Begriffe. Kontextuelle Verweise verbinden zusätzlich thematisch zusammenhängende Inhalte.

Navi verwendet somit mehrere Navigationssysteme parallel, die unterschiedliche Aufgaben bei der Orientierung und Erschließung der Inhalte übernehmen. Die Website vermittelt die im Leitfaden beschriebenen Prinzipien somit nicht nur theoretisch, sondern wendet sie auf die eigene Informationsarchitektur und Navigation an.

Features & Interaktion

Mit der Informationsarchitektur und dem Navigationskonzept wurden die grundlegenden Wege durch Navi definiert. Bei der Entwicklung der Website stellte sich anschließend die Frage, wie sich diese Strukturen in ein funktionierendes und intuitiv bedienbares Interface übertragen lassen. Dafür entstanden verschiedene Funktionen, die insbesondere die Orientierung innerhalb der umfangreichen Inhalte unterstützen und sich an unterschiedliche Bildschirmgrößen anpassen.

Auf größeren Bildschirmen werden die fünf Hauptbereiche über ein Mega-Menü dargestellt, das neben den Titeln der einzelnen Artikel auch kurze Beschreibungen der jeweiligen Inhalte enthält. Dadurch können innerhalb der Untermenüs auch spezifische Fachbegriffe verwendet werden, ohne vorauszusetzen, dass deren Bedeutung bereits bekannt ist. Nutzer*innen erhalten bereits vor dem Aufruf einer Seite zusätzlichen Kontext und können besser einschätzen, welcher Artikel für ihr Anliegen relevant ist.

Für kleinere Bildschirmgrößen wurde die Navigation nicht einfach verkleinert, sondern an die veränderte Bedienung angepasst. Das mobile Menü reduziert gleichzeitig sichtbare Informationen und ermöglicht es, die einzelnen Bereiche schrittweise zu erschließen. Große Interatkionsflächen berücksichtigen dabei die Bedienung per Touch. Desktop- und Mobilnavigation greifen somit auf dieselbe Informationsarchitektur zurück, stellen diese jedoch entsprechend der verfügbaren Fläche unterschiedlich dar.

Eine weitere Herausforderung ergab sich aus dem Umfang der einzelnen Artikel. Während die Hauptnavigation Wege zwischen verschiedenen Seiten anbietet, wird innerhalb längerer Inhalte eine zusätzliche Orientierung benötigt. Jeder Artikel verfügt deshalb über ein Inhaltsverzeichnis mit Sprungmarken. Beim Scrollen wird automatisch der Abschnitt hervorgehoben, in dem sich die Nutzer*innen aktuell befinden. Dadurch dient das Inhaltsverzeichnis nicht nur als Einstiegspunkt in einzelne Kapitel, sondern vermittelt während des Lesens kontinuierlich die aktuelle Position innerhalb eines Artikels.

Auch diese Funktion wurde für kleinere Viewports angepasst und wechselt in eine kompakte Darstellung unterhalb der Kopfzeile, die das aktuelle Kapitel anzeigt. Bei Bedarf kann über diesen Bereich das komplette Inhaltsverzeichnis angezeigt werden, um zwischen den Kapiteln zu wechseln. Die Funktion bleibt damit erhalten, ohne einen großen Teil der begrenzten Bildschirmfläche einzunehmen.

Ergänzend zeigt eine Lesefortschrittsleiste am oberen Rand der Seite an, wie weit innerhalb eines Artikels bereits gescrollt wurde. Sie bietet eine zusätzliche visuelle Orientierung und macht insbesondere bei langen Inhalten unmittelbar erkennbar, welcher Anteil noch vor den Leser*innen liegt.

Neben den Navigationsfunktionen wurde auch ein Light- und Dark-Mode umgesetzt, mit dem das Farbschema an die individuellen Präferenzen oder Systemeinstellungen angepasst werden kann. Die Gestaltung musste dafür von Beginn an in beiden Varianten funktionieren und auch die verwendeten SVG-Illustrationen wurden dabei berücksichtigt und wechseln ihre Farben anhand des gewählten Modus. Die gewählte Akzentfarbe erreicht auf dunklen und hellen Hintergründen das angestrebte Kontrastverhältnis von AA.

Die Funktionen entstanden also nicht unabhängig voneinander, sondern aus konkreten Anforderungen an die Nutzung des Leitfadens. Während Mega- und Mobile-Menü die Navigation zwischen den Inhalten ermöglichen, unterstützen Inhaltsverzeichnis und Lesefortschritt die Orientierung innerhalb der Artikel. Der Light- und Dark-Mode erweitert das Interface um eine anpassbare Darstellung. Gemeinsam übertragen diese Funktionen die zuvor entwickelte Informationsarchitektur in ein interaktives Interface.

Vom Entwurf zum Design

Die visuelle Gestaltung von Navi entstand schrittweise parallel zur inhaltlichen und technischen Entwicklung der Website. Zu Beginn wurde zunächst ein grobes Gestaltungskonzept definiert, das die grundlegende Typografie, Farbgebung und ein einheitliches Spacing festlegte. Ziel war eine reduzierte Gestaltung, bei der die umfangreichen Inhalte im Vordergrund stehen und gleichzeitig eine eigenständige visuelle Identität entsteht. Eine besondere Rolle spielte dabei die Farbwahl: Da Navi sowohl einen hellen als auch einen dunklen Darstellungsmodus anbietet, musste die zentrale Akzentfarbe in beiden Varianten funktionieren. Sie wurde deshalb nicht ausschließlich nach ästhetischen Kriterien ausgewählt, sondern auch hinsichtlich ausreichender Kontraststufen zu hellen und dunklen Elementen geprüft. Diese Anforderung beeinflusste bereits früh die Entwicklung des Farbsystems und später auch die Gestaltung von Komponenten und Illustrationen.

Das anfängliche Konzept wurde anschließend direkt anhand der Artikelseiten erprobt. Diese standen bewusst am Anfang der Gestaltung, da sie den größten Teil des Leitfadens ausmachen und mit langen Fließtexten, Überschriften, Zitaten, Code-Beispielen und verschiedenen Navigationselementen besonders hohe Anforderungen an Lesbarkeit und Hierarchie stellen. Im Verlauf der Entwicklung wurden unter anderem Größenverhältnisse, Abstände und die Darstellung einzelner Elemente mehrfach angepasst. Aus einem ersten visuellen Konzept entwickelte sich dadurch schrittweise ein Gestaltungssystem, das aus der tatsächlichen Verwendung entstand.

Parallel wurde die visuelle Identität von Navi weiterentwickelt, wozu besonders die Gestaltung des Logos gehörte, das verschiedene Ansätze verfolgte. Auch der Name selbst besitzt neben der Abkürzung von “Navigation” eine spielerische persönliche Referenz. Navi aus “The Legend of Zelda: Ocarina of Time” begleitet den Protagonisten durch die Spielwelt und unterstützt ihn mit Hinweisen und Orientierung. Diese Verbindung passt inhaltlich zum Leitfaden, ohne dass sich die visuelle Gestaltung unmittelbar an der Ästhetik des Spiels orientiert.

Nachdem die Gestaltung anhand der eigentlichen Inhalte abgeschlossen war, wurde das System auf weitere Seiten übertragen. So entstand auch die Startseite erst zu einem späteren Zeitpunkt, da diese das fertige Projekt vorstellen, dessen Grundidee verständlich machen und den Einstieg in den Leitfaden schaffen sollte. Dadurch konnte sie gestalterisch freier umgesetzt werden, während Typografie, Farben und Komponenten weiterhin auf dem zuvor entwickelten System basierten. Anhand des Einstiegs in den Leitfaden, der auf der Startseite platziert wurde, wurden daraufhin die Portalseiten konzipiert, die zusätzlich einen besseren Überblick geben, wenn Nutzer*innen beispielsweise über eine Suchmaschine auf die Website gelangen. Durch eine Seite zur Veröffentlichung von Blogbeiträgen wurde die Website abgerundet, sodass sie zukünftig erweitert werden kann, ohne die bestehenden Strukturen des Leitfadens erweitern oder ändern zu müssen.

Der Gestaltungsprozess verlief also nicht von einer fertigen visuellen Vorgabe zur Umsetzung einzelner Seiten, sondern gemeinsam mit den Inhalten und ihren Anforderungen. Artikelseiten, Portalseiten und Startseite übernehmen unterschiedliche Aufgaben und erhalten entsprechend unterschiedliche Schwerpunkte, bleiben aber durch das gemeinsame Gestaltungssystem als Bestandteile derselben Website erkennbar.

Barrierefreiheit als Grundlage

Barrierefreiheit wurde bereits während der Gestaltung und Entwicklung berücksichtigt und nicht erst nachträglich ergänzt. Das war insbesondere deshalb relevant, weil der Leitfaden selbst Anforderungen an zugängliche Navigation vermittelt und diese auch auf der eigenen Website anwenden sollte.

Berücksichtigt wurden unter anderem ausreichende Farbkontraste in Light- und Dark-Mode, sichtbare Fokuszustände, geeignete Interaktionsflächen sowie eine vollständige Bedienbarkeit per Tastatur. Bei der technischen Umsetzung wurde auf semantisches HTML, nachvollziehbare Überschriftenstrukturen und verständlich bezeichnete Navigationsbereiche geachtet. Dynamische Komponenten wie das Mega-Menü oder die mobile Navigation vermitteln ihre Zustände an assistive Technologien. Barrierefreiheit wurde somit als grundlegende Anforderung an die Gestaltung und technische Umsetzung der gesamten Website verstanden.

Ergebnis & Ausblick

Mit Navi ist ein digitaler Leitfaden entstanden, der die unterschiedlichen Aspekte guter Navigation im Web zusammenführt und gleichzeitig versucht, die vermittelten Prinzipien selbst anzuwenden. Informationsarchitektur, verständliches Labeling und verschiedene Navigationssysteme bilden dabei einen ebenso wichtigen Teil des Projekts wie die visuelle Gestaltung, technische Umsetzung und Barrierefreiheit. Die Website ist somit ein praktisches Anwendungsbeispiel und die Plattform für die Inhalte des Leitfadens.

Eine zentrale Erkenntnis des Projekts war, dass Navigation deutlich früher beginnt als bei der Gestaltung des Menüs. Die Struktur und Benennung von Inhalten beeinflussen bereits, wie gut sich Nutzer*innen später auf einer Website orientieren können. Gleichzeitig zeigte sich, wie eng konzeptionelle, gestalterische und technische Entscheidungen miteinander verbunden sind. Änderungen an der Informationsarchitektur hatten Auswirkungen auf das Labeling und die Navigation, während neue technische oder gestalterische Anforderungen wiederum Anpassungen an anderer Stelle notwendig machten. Der Entwicklungsprozess verlief deshalb bewusst nicht linear, sondern war von wiederholtem Ausprobieren, Überprüfen und Überarbeiten geprägt.

Auch auf technischer Ebene stellte sich das Projekt einen wichtigen Lernprozess dar, denn ein persönliches Ziel bestand darin, das WordPress-Theme möglichst eigenständig von Grund auf zu entwickeln und dadurch vorhandene Kenntnisse in HTML, CSS, PHP und JavaScript praktisch zu vertiefen. Die Umsetzung der verschiedenen Komponenten hat dabei besonders geholfen, nicht nur bestehenden Code anzupassen, sondern die Zusammenhänge besser zu verstehen.

Mit dem aktuellen Stand ist die Entwicklung von Navi nicht zwangsläufig abgeschlossen. Als Website kann der Leitfaden auch nach der Website weiterentwickelt und an neue Erkenntnisse oder veränderte Webstandards angepasst werden. Weitere Tests mit Nutzer*innen könnten zeigen, wie sich die entwickelte Informationsarchitektur und Navigation im tatsächlichen Gebrauch bewähren und an welchen Stellen noch Verbesserungspotenzial besteht. Der Blog bietet außerdem die Möglichkeit, zukünftige Erkenntnisse und Entwicklungsprozesse zu dokumentieren, ohne die eigentlichen Inhalte des Leitfadens unnötig zu erweitern.

Navi bildet also weiterhin den aktuellen Stand einer intensiven Auseinandersetzung mit Navigation im Web ab, bleibt aber gleichzeitig ein Projekt, das mit seinen Inhalten und den Anforderungen des Webs wachsen kann.