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.

Die Hauptnavigation von Navi bestand zunächst aus den fünf Bereichen Organisation, Labeling, Design, Umsetzung und Barrierefreiheit. Die inhaltliche Aufteilung des Guides stand somit bereits weitgehend fest. Offen war aber, ob die verwendeten Begriffe verständlich genug vermitteln, welche sich hinter ihnen befinden. Das ist bei einem Leitfaden über Navigation eine durchaus relevante Frage. Wenn Navi selbst verständliche Labels behandelt, sollte die eigene Navigation diesen Anspruch ebenfalls erfüllen.

Deshalb haben wir die fünf Hauptbereiche noch einmal genauer betrachtet, alternative Begriffe entwickelt und diese anschließend in einem qualitativen Test mit fünf Personen geprüft.

Was waren die Hürden der Labels?

Die ursprünglichen Begriffe waren nicht grundsätzlich falsch, aber bei genauerer Beobachtung zeigten sich Schwächen.

Organisation beschreibt zwar das Ordnen und Strukturieren von Inhalten, könnte aber ohne weiteren Kontext ebenso eine Institution oder einen organisatorischen Prozess bezeichnen. Das ist besonders als erster Menüpunkt sehr anfällig für Missverständnisse.

Labeling ist der fachlich passende Begriff für die Bezeichnung von Inhalten und Navigationsmöglichkeiten. Im Vergleich zu den anderen Menüpunkten setzt er allerdings mehr Vorwissen voraus und fällt zudem durch die englische Bezeichnung aus dem Raster der ansonsten deutschsprachigen Navigation.

Design erwies sich als besonders weit gefasst, denn der Begriff kann praktisch die gesamte visuelle Gestaltung einer Website umfassen, von Farben und Typografie bis zu Abständen und Layout. Der entsprechende Bereich des Guides behandelt dagegen gezielt Navigationssysteme und Orientierung.

Auch Umsetzung ist zunächst nicht spezifisch: Ohne den Kontext der übrigen Bereiche könnte damit nahezu jeder Schritt bei der Entwicklung der Website gemeint sein.

Lediglich Barrierefreiheit erschien bereits ausreichend konkret und verständlich.

Wer soll die Labels verstehen können?

Navi richtet sich nicht ausschließlich an Personen, die bereits mit Informationsarchitektur oder Navigationsdesign vertraut sind. Zur Zielgruppe gehören Menschen mit wenig bis mittlerem Vorwissen im gleichen Maße wie Webdesigner*innen, Webentwickler*innen, Studierende und Personen, die beispielsweise im Rahmen eines Unternehmens oder Start-ups an einer Website arbeiten. Daraus ergab sich eine wichtige Anforderung für die Hauptnavigation:

Die fünf Begriffe sollten mit möglichst wenig Vorwissen verständlich sein.

Innerhalb der Untermenüs kann hingegen stärker mit Fachsprache gearbeitet werden, da die zusätzlichen Beschreibungen genügend Kontext geben, um Begriffe wie Informationsarchitektur oder Labeling-Konventionen einzuordnen.

Was beschreiben die Bereiche?

Bevor neue Begriffe gesucht werden konnten, musste zunächst möglichst eindeutig definiert werden, wofür diese fünf Bereiche eigentlich stehen.

1. Die Inhalte organisieren
   Am Anfang steht die strukturelle Grundlage einer Website, noch bevor die eigentliche Navigation gestaltet wird. Inhalte müssen geordnet, gruppiert und miteinander in Beziehung gesetzt werden. Dazu gehören die Grundlagen der Informationsarchitektur, unterschiedliche Organisationssysteme und der Aufbau von Hierarchien. Ziel ist eine nachvollziehbare Struktur, auf der die spätere Navigation aufbauen kann.
2. Die Inhalte benennen
   Anschließend stellt sich die Frage, wie Inhalte, Kategorien und Navigationsmöglichkeiten bezeichnet werden. Links, Menüpunkte, Überschriften oder Icons sollen möglichst zuverlässig vermitteln, was Nutzer*innen dahinter erwartet. Dabei spielen unter anderem Konventionen, Verständlichkeit, Konsistenz und das Vokabular der Zielgruppe eine Rolle.
3. Wege durch die Struktur schaffen
   Aus Informationsarchitektur und Labeling-System entsteht schließlich ein konkretes Navigationssystem. Globale, lokale, kontextuelle und ergänzende Navigation sowie Breadcrumbs bieten unterschiedliche Wege durch die Inhalte. Sie sollen Nutzer*innen dabei unterstützen, ihre eigene Position zu ermitteln und zu verstehen, welche Möglichkeiten ihnen zur Verfügung stehen und wie sie ihr Ziel erreichen.
4. Das Konzept technisch umsetzen
   Das entwickelte Navigationskonzept muss anschließend zu einem funktionierenden Webinterface werden. Dieser Bereich behandelt unter anderem den semantischen Aufbau, Zustände und Interaktionen sowie Darstellungsformen wie Mega- und Flyout-Menüs oder die Anpassung der Navigation an unterschiedliche Bildschirmgrößen.
5. Die Navigation zugänglich machen
   Navigation sollte von möglichst vielen Menschen unabhängig von ihren Fähigkeiten, Hilfsmitteln oder Eingabemethoden genutzt werden können. Dazu gehören beispielsweise die Bedienung mit der Tastatur, sichtbare Fokuszustände, eine sinnvolle Fokusreihenfolge, die Nutzung mit Screenreadern sowie ausreichende Kontraste und geeignete Zielgrößen.

Von den Definitionen zu Begriffen

Aus diesen fünf Definitionen ließen sich unterschiedliche mögliche Labels ableiten:

Organisation: Struktur, Architektur

Labeling: Benennung, Bezeichnung, Sprache, Begriffe

Design: Navigation, Gestaltung, Orientierung

Umsetzung: Entwicklung, Implementierung, Funktion, Frontend

Barrierefreiheit

Für die ersten drei Bereiche zeichneten sich mit Struktur, Benennung und Navigation relativ schnell verständliche Alternativen ab. Beim vierten Bereich war die Entscheidung schwieriger. Entwicklung erschien zunächst als mögliche Alternative zu Umsetzung in Frage zu kommen, denn der Begriff beschreibt schließlich den Schritt vom Konzept zum funktionierenden Webinterface. Ob diese Bedeutung auch ohne weitere Erklärung verstanden wird, sollte der anschließende Test zeigen.

Sind die Labels verständlich?

Um einen ersten Eindruck davon zu bekommen, welche Erwartungen die Begriffe auslösen, haben wir fünf Personen mit unterschiedlichen Kenntnisständen gefragt, welche Inhalte sie hinter den einzelnen Menüpunkten vermuten würden. Dabei ging es nicht darum, die Qualität der Labels statistisch zu untersuchen, sondern lediglich einen qualitativen Verständlichkeitstest durchzuführen. Interessant war vor allem, welche spontanen Assoziationen die Begriffe hervorrufen. Zusätzlich zu den fünf Labels kannten die fünf Personen außerdem den Namen und Untertitel des Leitfadens.

Bei Struktur gingen die Antworten bereits deutlich in die gewünschte Richtung. Genannt wurden beispielsweise:

Auch Benennung wurde sehr nah an der Bedeutung interpretiert:

Bei Navigation wurde erwartungsgemäß das Navigieren durch eine Website erkannt. Die konkreten Vorstellungen unterschieden sich aber etwas: Eine Person dachte beispielsweise an sinnvolle Navigationspunkte wie Impressum oder Kontakt, eine andere beschrieb die verschiedenen Wege durch eine Website.

Barrierefreiheit wurde ebenfalls grundsätzlich in der vorgesehenen Richtung verstanden. Genannt wurden unter anderem verständliche Sprache, Screenreader und die Frage, welche Barrieren bei der Nutzung einer Website auftreten können.

Entwicklung oder Umsetzung?

Am auffälligsten waren die Reaktionen auf Entwicklung: Eine Person konnte mit dem Begriff im Zusammenhang mit den anderen Menüpunkten nichts Konkretes verbinden. Andere Antworten gingen zwar in Richtung der praktischen Realisierung, bleiben aber ebenfalls sehr weit gefasst. Somit löste “Entwicklung” genau das Problem nicht, das durch das Relabeling eigentlich reduziert werden sollte.

Wir fragten alle fünf Personen, ob sie die Bezeichnung “Umsetzung” in dem Kontext treffender fänden und diese Frage wurde einstimmig bejaht. Letztendlich sind wir dann wieder zum Label Umsetzung zurückgekehrt.

Auch dieser Begriff ist isoliert betrachtet nicht eindeutig, denn er könnte sich theoretisch auf nahezu alle Bereiche des Projekts beziehungsweise sogar auf den gesamten Leitfaden beziehen. Im Kontext der anderen Menüpunkte erhält er jedoch eine konkretere Bedeutung: Nachdem Inhalte strukturiert und benannt wurden und daraus eine Navigation entstanden ist, folgt deren Umsetzung als funktionierendes Webinterface.

Die Entscheidung zeigt gleichzeitig eine Grenze des Labelings: Ein einzelnes Label muss nicht jede Bedeutung vollständig erklären können. Es steht innerhalb eines Systems und wird auch durch die Begriffe um sich herum verständlich.

Das Ergebnis

Aus der ursprünglichen Navigation

Organisation · Labeling · Design · Umsetzung · Barrierefreiheit

wurde schließlich:

Struktur · Benennung · Navigation · Umsetzung · Barrierefreiheit

Struktur beschreibt die Organisation und Hierarchie der Inhalte konkreter als “Organisation”. Benennung ersetzt den Fachbegriff “Labeling” durch einen Begriff, der auch ohne entsprechendes Vorwissen verständlich ist. Navigation grenzt den Inhalt des Bereichs wesentlich stärker ein als der allgemeine Begriff “Design”. Umsetzung bleibt zwar ein relativ breiter Begriff, funktioniert aber innerhalb der Abfolge besser als die getestete “Entwicklung”. Barrierefreiheit wurde beibehalten, da der Begriff bereits verständlich und inhaltlich passend war.

Die Labels sind nicht zwangsläufig die einzig möglichen Bezeichnungen, bilden aber einen Kompromiss aus fachlicher Präzision, Verständlichkeit und ihrem jeweiligen Kontext innerhalb des Leitfadens.

Grundriss und zugängliche Wege

Vereinfacht lässt sich die neue Struktur mit einem Haus vergleichen:

Struktur ist der Grundriss: Sie legt fest, welche Räume vorhanden sind und wie sie miteinander zusammenhängen.

Benennung sind die Türschilder: Sie vermitteln, was sich hinter den einzelnen Türen verbirgt.

Navigation sind die Türen: Sie ermöglichen es, sich zwischen den Räumen zu bewegen und das gewünschte Ziel zu erreichen.

Umsetzung ist der Bau: Aus dem zuvor entwickelten Plan entsteht etwas, das tatsächlich funktioniert und benutzt werden kann.

Barrierefreiheit sorgt für zugängliche Wege: Das Haus sollte nicht nur theoretisch erreichbar sein, sondern von möglichst vielen Menschen genutzt werden können.

Die Analogie ist natürlich eine starke Vereinfachung, zeigt aber gut, warum die fünf Bereiche aufeinander aufbauen und weshalb ihre Bezeichnungen nicht unabhängig voneinander betrachtet werden können.

Fazit des Relabelings

Der Prozess hat vor allem gezeigt, dass ein fachlich korrekter Begriff nicht automatisch ein gutes Label ist. Entscheidend ist, welche Vorstellung er bei den Menschen hervorruft, die ihn benutzen sollen. Gleichzeitig muss ein Label nicht für sich allein sämtliche Inhalte eines Bereichs erklären. Seine Position innerhalb der Informationsarchitektur, benachbarte Begriffe und zusätzliche Beschreibungen tragen ebenfalls zu seiner Bedeutung bei.

Die Entwicklung des Labeling-Systems endet nicht mit der Suche nach passenden: Die Begriffe müssen im Zusammenhang betrachtet und mit Menschen überprüft werden, für die sie später Orientierung schaffen sollen. Für Navi kommt noch eine weitere Ebene hinzu: Ein Leitfaden über verständliche Navigation sollte seinen eigenen Empfehlungen auch auf sich selbst anwenden.