Was ist die visuelle Hierarchie einer Lerneinheit und wie fördert sie das Verständnis?

Eine Lernseite kann eine korrekte Erklärung, ein nützliches Diagramm und eine gute Aufgabe enthalten – und dennoch wissen die Lernenden nicht, wo sie anfangen sollen. Manchmal sind alle Elemente gleich stark hervorgehoben, oder der entscheidende Schritt geht in dekorativen Elementen unter. Die visuelle Hierarchie macht die Struktur deutlich: Was gehört zur Haupterklärung? Wo befindet sich das Beispiel? Welche Bedingung ist wichtig? Was ist als Nächstes zu tun? Die Gestaltung sollte den Inhalt unterstützen, anstatt mit ihm um Aufmerksamkeit zu konkurrieren.

Im Folgenden wird ein Ansatz zur Überarbeitung einer Lernseite oder Präsentation vorgestellt. Es gibt keine Garantie, dass bestimmte Farben oder Schriftarten automatisch zu einer Verbesserung führen. Zuerst sollte die Logik der Lerneinheit festgelegt werden; die Gestaltung folgt dann dieser Struktur. Barrierefreiheit und Klarheit erfordern jeweils eine gesonderte Überprüfung. Ein ansprechendes Design beweist weder die inhaltliche Richtigkeit noch, ob das Material für Menschen mit unterschiedlichen Wahrnehmungsweisen zugänglich ist. Die Beispiele in diesem Artikel sind hypothetisch und dienen als Orientierungshilfe für die Erstellung von Lernmaterialien.

Den zentralen Pfad zur Lernaktivität festlegen

Legen Sie fest, was die Lernenden nach der Erklärung tun sollen – zum Beispiel eine Beobachtung von einer Schlussfolgerung unterscheiden oder eine geeignete Methode zur Datendarstellung wählen. Überprüfen Sie das Material im Hinblick auf diese Aktivität. Manche Informationen sind für die Entscheidungsfindung erforderlich, andere erläutern das Ergebnis, wieder andere dienen lediglich der thematischen Erweiterung. Ohne klar definierte Rollen wird die Gestaltung beliebig: Ersteller heben dann oft hervor, was ihnen selbst gefällt, anstatt das zu betonen, was den Lernenden bei der Erfüllung der Lernaufgabe tatsächlich hilft.

Erstellen Sie zunächst ein textliches Grundgerüst – ganz ohne Farben oder Bilder. Titel, eine kurze Zielbeschreibung, die Erklärung, ein Beispiel, die eigenständige Lernaktivität und die Methode zur Überprüfung sollten eine klare Abfolge bilden. Nicht jede Lerneinheit benötigt alle diese Elemente, aber jedes vorhandene Element muss eine klare Funktion erfüllen. Wenn sich der Inhalt nicht ohne gestalterische Mittel logisch anordnen lässt, ist zunächst eine didaktische Überarbeitung erforderlich. Ein dekorativer Pfeil kann eine fehlende Voraussetzung nicht ausgleichen, und ein auffälliger Rahmen macht eine widersprüchliche Regel nicht eindeutig.

Kennzeichnen Sie den Übergang vom Lesen zum Handeln. Platzieren Sie Anweisungen in unmittelbarer Nähe zu den erforderlichen Voraussetzungen und Materialien. Wenn Lernende ständig zurückscrollen müssen, um sich an ein Kriterium zu erinnern, sollten Sie die Struktur überprüfen. Oft genügt eine kurze Wiederholung der notwendigen Bedingung oder ein klarer Verweis. Wiederholen Sie nicht bei jedem Schritt die gesamte Theorie. Halten Sie den relevanten Kontext zugänglich, ohne den Lernpfad mit ständigen Wiederholungen zu überfrachten.

Wenige, aussagekräftige Gestaltungsebenen statt einer Vielzahl an Stilen

Unterscheiden Sie klar zwischen Lektionstitel, Abschnittsüberschriften, Fließtext, Beispielen und ergänzenden Hinweisen. Eine konsistente visuelle Gestaltung reicht aus, um diese Funktionen zu verdeutlichen. Wenn jeder Absatz einen eigenen Hintergrund, einen eigenen Rahmen oder ein eigenes Symbol erhält, verlieren diese Unterscheidungsmerkmale ihre Bedeutung. Die Lernenden müssen dann ihre Aufmerksamkeit darauf verwenden, das jeweilige Design zu entschlüsseln. Legen Sie ein begrenztes Set an Gestaltungsstilen fest und erläutern Sie dem Team, welche inhaltliche Funktion der jeweilige Stil innerhalb der Kursmaterialien erfüllt.

Verharmlosen Sie keine Voraussetzungen, nur weil sie für das Design unpraktisch sind. Einschränkungen bei der Anwendung einer Methode mögen zwar kurz sein, sind aber oft entscheidend. Weisen Sie darauf hin, bevor die Lernenden eine Entscheidung treffen. Nutzen Sie ergänzende Hinweise nur für Details, die tatsächlich optional sind und ohne die die Hauptaufgabe weiterhin sinnvoll bleibt. Die Schriftgröße sollte sich an der inhaltlichen Funktion orientieren – nicht am Wunsch, möglichst viele Informationen auf einer einzigen Folie unterzubringen. Wenn der Platz knapp ist, überdenken Sie die Strukturierung der Inhalte oder entfernen Sie überflüssige Details.

Halten Sie die Zuordnung in einem einfachen Referenzdokument fest. Verwenden Sie beispielsweise einen bestimmten Blocktyp für ein ausgearbeitetes Beispiel und einen anderen für eine Lernaufgabe. Die Überschrift und der Text sollten zudem die jeweilige Funktion verdeutlichen – ein farbiger Rahmen allein reicht dafür nicht aus. So können neue Ersteller die Logik nachvollziehen, ohne raten zu müssen. Halten Sie dieses Referenzdokument kompakter als ein vollständiges Markenhandbuch und fügen Sie Beispiele für die korrekte Anwendung hinzu – insbesondere für Fälle, in denen verschiedene Arten von Informationen zusammen auftreten.

Überschriften sollten den Inhalt des jeweiligen Abschnitts beschreiben

Überschriften erleichtern die Orientierung, noch bevor der gesamte Text gelesen wird. „Überprüfen, ob die Daten die Schlussfolgerung stützen“ ist aussagekräftiger als „Wichtiger Hinweis“. Präzise Abschnittsüberschriften helfen den Lernenden zudem, gezielt zu den Erklärungen zurückzukehren, die sie gerade benötigen. Vermeiden Sie es jedoch, Überschriften in lange Absätze zu verwandeln; sie sollten das Thema oder die Handlung lediglich so genau benennen, dass eine gute Orientierung möglich ist. Überprüfen Sie alle Überschriften gesammelt in einer Liste: Vermitteln sie die Logik der Lerneinheit auch ohne dekorative Elemente?

Die W3C WAI erläutert die Funktion von Überschriften als Struktur, die von Browsern und assistiven Technologien genutzt werden kann. Ein groß und fett gesetzter Text ist daher nicht zwangsläufig eine technische Überschrift. Verwenden Sie stattdessen den jeweils passenden Stil oder das entsprechende semantische Element im Editor. Ein Unterabschnitt sollte inhaltlich zu seinem übergeordneten Abschnitt gehören, und benachbarte Themen sollten auf derselben Hierarchieebene liegen. Wählen Sie eine Überschriftenebene niemals allein deshalb aus, weil Ihnen die Schriftgröße in einer bestimmten Vorlage gerade zusagt.

Gestalten Sie nicht jeden hervorgehobenen Satz als Überschrift. Für kurze Betonungen innerhalb einer Erklärung reicht eine entsprechende Textformatierung völlig aus. Zu viele Hierarchieebenen erschweren zudem den Überblick. Wenn eine kurze Lerneinheit immer wieder verschachtelte Unterabschnitte erfordert, prüfen Sie, ob sie möglicherweise verschiedene Lernaufgaben miteinander vermischt. Es ist oft besser, inhaltlich zusammengehörige Teile klar voneinander abzugrenzen. Die Struktur sollte den gedanklichen Aufbau widerspiegeln – und nicht einfach nur die im Erstellungstool verfügbaren Stile ausfüllen.

Zusammengehörige Elemente durch Abstände gruppieren

Die Platzierung verdeutlicht, welche Elemente zu einem Beispiel gehören. Eine Bildunterschrift, ein Bild und die dazugehörige Erklärung sollten als eine zusammengehörige Einheit wahrgenommen werden. Wenn ein inhaltlich nicht zugehöriger Block dazwischen platziert wird, könnten Lernende den Kommentar fälschlicherweise einem anderen Diagramm zuordnen. Überprüfen Sie die Abstände innerhalb und zwischen den Gruppen; sie sollten die bestehenden inhaltlichen Zusammenhänge verdeutlichen. Achten Sie darauf, Abstände nicht pauschal einheitlich zu gestalten, wenn dadurch der Unterschied zwischen einem neuen Abschnitt und der Fortsetzung einer bereits begonnenen Erläuterung verloren geht.

Wenn eine Folie zwei Beispiele enthält, versehen Sie jedes davon mit einer Überschrift und sorgen Sie für ausreichend Abstand. Verlassen Sie sich nicht allein auf die Anordnung (links/rechts): Auf Mobilgeräten oder bei einer linearen Leseweise können sich Spalten verschieben. Beziehen Sie sich stattdessen inhaltlich auf die Beispiele – etwa: „Im zweiten Beispiel mit unvollständigen Daten...“ statt „Schauen Sie nach rechts“. Wichtige inhaltliche Zusammenhänge müssen auch dann erkennbar bleiben, wenn sich die Bildschirmbreite ändert oder die Art und Weise, wie der Inhalt gelesen wird, variiert.

Verwenden Sie keine Leerzeilen oder Leerzeichen, um eine tabellarische Struktur in einfachem Text zu simulieren. Daten, die aus Zeilen, Spalten und Überschriften bestehen, erfordern eine entsprechende, semantisch korrekte Struktur. Bei zwei voneinander unabhängigen Erläuterungen sind untereinander angeordnete Blöcke oft die bessere Wahl. Es ist entscheidend, dass bei der Gestaltung klar ist, welche Elemente inhaltlich zusammengehören. Andernfalls könnte die Information zwar optisch ansprechend präsentiert werden, doch der Zusammenhang zwischen Bedingung, Beispiel und Schlussfolgerung – auf dem die Lernaufgabe basiert – geht möglicherweise verloren.

Eine sinnvolle Reihenfolge unabhängig vom Layout bewahren

In digitalen Lernmaterialien entspricht die visuelle Anordnung nicht immer der Reihenfolge, in der eine Software die Elemente erfasst und verarbeitet. Die Definition einer „sinnvollen Reihenfolge“ (meaningful sequence) gemäß den WCAG-Richtlinien bezieht sich auf Fälle, in denen die Reihenfolge für das Verständnis entscheidend ist. So sollte beispielsweise eine Bedingung stets vor der darauf basierenden Entscheidung stehen, und ein Kommentar darf nicht versehentlich einem anderen Beispiel zugeordnet werden. Überprüfen Sie dies immer im tatsächlichen Ausgabeformat – verlassen Sie sich nicht allein auf die Darstellung im Entwurfsmodus.

Lesen Sie die Seite linear, ohne sich Spalten vorzustellen. Ist klar, zu welchem ​​Bild eine Bildunterschrift gehört? Beginnt eine Übung mit einem Ergebnis, das eigentlich erst nach dem Lösungsversuch sichtbar werden sollte? Überprüfen Sie bei Präsentationen die Lesereihenfolge der Objekte. Prüfen Sie bei webbasierten Lerneinheiten die Struktur der Elemente sowie deren Verhalten bei der Nutzung durch assistierende Technologien. Falls technische Unterstützung erforderlich ist, geben Sie dem Entwickler einen konkreten Ausschnitt und die gewünschte Reihenfolge an – anstatt nur allgemein zu fordern, den Inhalt „barrierefrei zu gestalten“.

Nicht jede Änderung der Reihenfolge ist ein Fehler. Zwei voneinander unabhängige Beispiele können in beliebiger Reihenfolge stehen, ohne dass der Sinn verloren geht. Identifizieren Sie die Abhängigkeiten, die tatsächlich von Bedeutung sind. So vermeiden Sie unnötige Einschränkungen und stellen gleichzeitig sicher, dass der logische Hauptpfad gewahrt bleibt. Erklärungen zu zwei gleichwertigen Begriffen können beispielsweise ihre Plätze tauschen; Eingabedaten und die daraus abgeleitete Schlussfolgerung müssen hingegen zwingend zusammenbleiben. Die Überprüfung sollte inhaltlich erfolgen – nicht durch das bloße Übertragen von Koordinaten aus dem Layout.

Hervorhebungen gezielt einsetzen

Fettdruck ist sinnvoll, wenn er den Lesenden hilft, einen Begriff oder eine wichtige Unterscheidung schneller zu erfassen. Ist jedoch fast ein ganzer Absatz fett gedruckt, verliert die Hervorhebung ihre Funktion. Fragen Sie die erstellende Person, worauf genau die Lernenden aufmerksam werden sollen. Entscheiden Sie dann, ob eine Hervorhebung, eine Textkürzung oder eine separate Erläuterung die beste Lösung ist. Manchmal ist es am sinnvollsten, einen komplexen Satz umzuformulieren. Zahlreiche dekorative Elemente können darauf hindeuten, dass versucht wird, eine unklare logische Struktur der Seite durch visuelle Gestaltung auszugleichen.

Farbe sollte nicht das einzige Mittel sein, um Informationen zu vermitteln. WCAG-Vorgaben zur Verwendung von Farbe erläutern diese Anforderung. Wenn sich zwei Optionen lediglich durch die Farben Grün und Rot unterscheiden, sollten Sie Textbeschriftungen oder ein anderes geeignetes Unterscheidungsmerkmal ergänzen. Ein Diagramm benötigt eindeutige Bezeichnungen für die Datenreihen; bei einer Übungsaufgabe sollte das Ergebnis durch einen erklärenden Text ergänzt werden. Lernende sollten nicht gezwungen sein, sich einen Farbcode zu merken, um zu verstehen, ob ihre Antwort akzeptiert wurde.

Der von den WCAG geforderte Mindestkontrast für Text liegt bei 4,5:1 für normalen Text und bei 3:1 für als „groß“ definierten Text – unter Berücksichtigung der im Kriterium genannten Ausnahmen. Überprüfen Sie Farbkombinationen mithilfe eines Werkzeugs, anstatt sich allein auf Ihr Auge zu verlassen. Achten Sie besonders auf Bildunterschriften, Beschriftungen von Schaltflächen sowie Hinweise auf farbigen Hintergründen. Eine festgelegte Farbpalette der Marke garantiert noch lange keine gute Lesbarkeit von Informationstexten. Verwenden Sie bei Bedarf eine andere Farbkombination für die eigentlichen Lerninhalte.

Bilder in den Dienst der Erläuterung stellen

Bestimmen Sie zunächst die Funktion des Bildes: Soll es einen Prozess erklären, ein Objekt zeigen, Daten für eine Analyse liefern oder eine bestimmte Stimmung erzeugen? Erwarten Sie nicht, dass ein rein dekoratives Titelbild als instruktives Diagramm fungiert. Wenn Lernende verschiedene Phasen voneinander unterscheiden müssen, muss das Bild diese Phasen und deren Zusammenhänge präzise darstellen. Eine Bildunterschrift weist darauf hin, worauf zu achten ist – sie ersetzt jedoch nicht die eigenständige Arbeit, wenn die Aufgabe von den Lernenden verlangt, das Material selbst zu interpretieren.

Platzieren Sie Erläuterungen in der Nähe des jeweils relevanten Bereichs, sofern dies den Vergleich erleichtert. Bei komplexen Diagrammen kann es sinnvoll sein, einzelne Abschnitte nacheinander zu betrachten, bevor das Gesamtbild gezeigt wird. Verbergen Sie keine Zusammenhänge zwischen einzelnen Teilen, nur um einen Überraschungseffekt zu erzielen. Wenn Lernende zu einem früheren Punkt im Material zurückkehren, sollten sie direkt den benötigten Zustand sehen können, ohne eine lange Animation erneut abspielen zu müssen. Achten Sie bei statischen Dokumenten darauf, ausreichend Kontext zu erhalten, damit ein isolierter Ausschnitt nicht wie ein unvollständiges oder widersprüchliches Modell wirkt.

Vermeiden Sie es, aussagekräftigen Text unnötigerweise in ein Bild umzuwandeln. Dies erschwert spätere Änderungen, die Durchsuchbarkeit sowie die Anpassung an die Bedürfnisse der Lernenden. Ist ein Bild tatsächlich erforderlich, stellen Sie sicher, dass die wesentlichen Informationen auch in Textform zugänglich sind. Dies ist besonders wichtig bei Diagrammen oder Grafiken, die Teil einer Aufgabenstellung sind. Die textliche Alternative sollte den Lerncharakter der Aufgabe wahren: Sie darf weder notwendige Daten verbergen noch ein fertiges Ergebnis vorwegnehmen, das die Lernenden eigentlich selbst erarbeiten sollen.

Beispiel, eigener Lösungsversuch und Erläuterung der Lösung voneinander abgrenzen

In einer beispielhaften Lerneinheit lernen Studierende zu beurteilen, wie stark Daten eine Schlussfolgerung stützen. Zunächst präsentiert die Lehrkraft ein ausgearbeitetes Beispiel samt Erläuterung. Anschließend wird ein weiterer Datensatz bereitgestellt, bei dem die Studierenden eine eigene Entscheidung treffen sollen. Wenn beide Elemente identisch aussehen und nicht beschriftet sind, lesen die Teilnehmenden möglicherweise einfach weiter, anstatt selbst aktiv zu werden. Kennzeichnen Sie deutlich, wo die eigenständige Bearbeitung beginnt, was eingereicht werden soll und wann Feedback verfügbar ist. Die Funktion eines Elements sollte bereits aus seinem Text hervorgehen.

Gestalten Sie die richtige Antwortmöglichkeit vor der Auswahl nicht als das größte oder kontrastreichste Element. Andernfalls wird die Aufgabe zu einer bloßen Suche nach visuellen Hinweisen. Gleichwertige Optionen sollten einheitlich gestaltet sein – es sei denn, der stilistische Unterschied ist Teil des Lerninhalts. Zeigen Sie nach der Auswahl ein Ergebnis und eine Erläuterung an, anstatt lediglich die Farbe zu ändern. Die Teilnehmenden sollten nachvollziehen können, welcher Aspekt ihrer Entscheidung ausschlaggebend war und worauf sie beim nächsten Beispiel achten sollten.

Unterscheiden Sie zwischen einem unterstützenden Hinweis und einer vollständigen Musterlösung. Ein Hinweis kann die Aufmerksamkeit auf den relevanten Aspekt lenken, ohne die Schlussfolgerung direkt zu verraten. Eine Musterlösung hingegen legt die gesamte Logik dar. Wenn beide hinter Schaltflächen mit identischer Beschriftung verborgen sind, können die Studierenden den Grad der Unterstützung nicht selbst steuern. Verwenden Sie präzise Bezeichnungen und erläutern Sie, welche Hilfen verfügbar sind. Überprüfen Sie die technische Umsetzung in Ihrer Lernumgebung; gehen Sie nicht davon aus, dass jedes Element automatisch die erforderlichen Informationen an unterstützende Technologien (Assistenztechnologien) übermittelt.

Überprüfen Sie Lernmaterialien bei tatsächlichen Bildschirmbreiten

Ein Layout, das auf einem großen Monitor erstellt wurde, kann auf einem Smartphone seine Hierarchie verlieren. Spalten werden zu einer langen Abfolge, Bildunterschriften lösen sich von den zugehörigen Beispielen, und wichtige Schaltflächen erscheinen erst nach einem großen dekorativen Bild. Testen Sie den zentralen Lernpfad bei unterschiedlichen Bildschirmbreiten sowie bei vergrößerter Textdarstellung. Skalieren Sie Elemente nicht auf eine mikroskopisch kleine Größe, nur um das ursprüngliche Layout zu bewahren. Priorisieren Sie die inhaltliche Aussage und Lesbarkeit gegenüber der exakten pixelgenauen Darstellung.

Wenn für einen Vergleich zwei Elemente gleichzeitig sichtbar sein müssen, finden Sie eine barrierefreie Lösung für schmale Bildschirme. Nutzen Sie beispielsweise aufeinanderfolgende, klar beschriftete Abschnitte, eine kurze Zusammenfassung der Unterschiede oder eine andere für die jeweilige Aufgabe geeignete Struktur. Versprechen Sie nicht, dass jede Tabelle auf einem Smartphone automatisch übersichtlich und komfortabel nutzbar ist. Öffnen Sie das eigentliche Lernmaterial und versuchen Sie, die Aufgabe zu bearbeiten. Die Ansicht für Ersteller im Editor bildet nicht immer alle Bedingungen ab, auf die ein Kursteilnehmer tatsächlich stößt.

Das WeStudy LMS kann die Lektion hosten; prüfen Sie daher das Ergebnis so, wie es die Lernenden tatsächlich sehen. Das Zusammenspiel von Materialpräsentation, Kursnavigation und Anweisungen ist entscheidend. Wenn die Beschriftung einer Schaltfläche innerhalb der Lektion nicht zum nächsten Schritt im Programm passt, korrigieren Sie diesen Zusammenhang. Machen Sie nicht die Vorlage für jede inhaltliche oder gestalterische Entscheidung verantwortlich. Das Team sollte die fertig zusammengestellte Seite mit den tatsächlichen Texten, Beispielen und verfügbaren Interaktionsmöglichkeiten überprüfen.

Führen Sie einen kurzen Verständlichkeits-Check durch.

Zeigen Sie das Material einigen Personen aus der Zielgruppe und bitten Sie sie, den Beginn der Aufgabe, die erforderlichen Bedingungen sowie die Methode zur Überprüfung der Ergebnisse zu finden. Fragen Sie nicht nur, ob ihnen das Design gefällt. Beobachten Sie, was die Personen tun und wie sie den Zweck der einzelnen Elemente (Blöcke) erklären. Dies ist eher eine kleine diagnostische Überprüfung als ein Nachweis der Wirksamkeit für alle Lernenden. Sie hilft dabei, spezifische Hürden zu identifizieren, die den Erstellern – da sie mit dem Material bestens vertraut sind – bei der eigenen Durchsicht oft gar nicht mehr auffallen.

Stellen Sie gezielte Fragen zum Inhalt. Wenn jemand ein Element zwar leicht findet, die dazugehörige Regel aber missversteht, muss die Erklärung überarbeitet werden. Wenn die Regel zwar verstanden wurde, aber unklar ist, wo die Antwort eingegeben werden soll, liegt das Problem möglicherweise im Ablauf (der „Lernreise“). Wenn ein wichtiger Abschnitt aufgrund einer bestimmten Darstellungsweise nicht gelesen werden kann, ist eine Prüfung der Barrierefreiheit erforderlich. Fassen Sie diese unterschiedlichen Probleme nicht einfach unter dem pauschalen Urteil „schlechtes Design“ zusammen. Verschiedene Ursachen erfordern unterschiedliche Anpassungen und jeweils spezifische Formen der erneuten Überprüfung.

Halten Sie die Rahmenbedingungen und spezifischen Beobachtungen fest. Es könnte beispielsweise vorkommen, dass eine Bildunterschrift fälschlicherweise dem nachfolgenden Diagramm zugeordnet wird oder ein Hinweis-Button mit einer Schaltfläche zum Einreichen der Antwort verwechselt wird. Überarbeiten Sie den entsprechenden Abschnitt und testen Sie ihn erneut mit Personen, die mit der ursprünglichen Absicht des Erstellers nicht vertraut sind. Nehmen Sie nicht zu viele Änderungen gleichzeitig vor, wenn Sie die Ursache für die Verwirrung nachvollziehen möchten. Beseitigen Sie im ersten Schritt das Haupthindernis und stellen Sie sicher, dass durch die neue Lösung kein neues Problem entstanden ist.

Einen überladenen Abschnitt schrittweise überarbeiten

Stellen Sie sich eine Seite mit drei großen farbigen Blöcken, einem Diagramm und einer Schaltfläche für eine Aufgabe vor. Der erste Block enthält eine Regel, der zweite einen historischen Hintergrund und der dritte eine Anwendungsbedingung. Alle drei wirken gleichwertig, obwohl für die Entscheidungsfindung eigentlich nur die Regel und die Bedingung erforderlich sind. Zunächst erkennt der Ersteller diese Abhängigkeit. Der Hintergrund könnte hinter die Hauptübung verschoben oder als weiterführende Lektüre gestaltet werden. Nützliche Ergänzungen müssen nicht gelöscht werden, sollten aber den Lernfluss nicht unterbrechen.

Anschließend überprüft man den Bezug zum Diagramm. Wenn es die Einschränkungen einer Methode erläutert, sollte es direkt neben dem entsprechenden Text platziert und mit einer aussagekräftigen Bildunterschrift versehen werden. Die Schaltfläche für die Aufgabe sollte erst nach allen relevanten Bedingungen erscheinen. Benennen Sie die Aktion präzise: Vermeiden Sie Begriffe wie „Weiter“, wenn damit eigentlich ein neuer Versuch gestartet wird, der eine Antwort erfordert. Passen Sie nach dieser Umstrukturierung die Größen, Abstände und Hervorhebungen an. Diese sollten nun die zugrunde liegende Logik unterstützen, anstatt sie hinter einer rein dekorativen Gestaltung zu verbergen.

Entfernen Sie zudem überflüssige Signale, die Wichtigkeit suggerieren. Wenn eine Regel gleichzeitig in großer Schrift, Kapitälchen, mit einem Symbol und auf einem auffälligen Hintergrund dargestellt wird, prüfen Sie, welche dieser Elemente tatsächlich notwendig sind. Achten Sie darauf, dass die Inhalte weiterhin gut erkennbar und lesbar bleiben. Geben Sie der Bedingung eine klare Bezeichnung und platzieren Sie sie in unmittelbarer Nähe zur Entscheidung. Eine visuell ruhigere Gestaltung bedeutet nicht, dass die Elemente unsichtbar werden müssen. Eine durchdachte Hierarchie verdeutlicht Zusammenhänge, anstatt lediglich alle Elemente nach ihrer visuellen Auffälligkeit zu ordnen.

Überprüfen Sie den überarbeiteten Abschnitt, indem Sie ihn linear lesen und auf einem schmalen Bildschirm betrachten. Wenn sich die Spalten in eine lineare Abfolge umwandeln, sollten das Diagramm und die dazugehörige Erläuterung weiterhin zusammenbleiben. Bitten Sie eine andere Person, die Anwendungsbedingung zu ermitteln und den nächsten Schritt zu erläutern. Sollte die Person die Bedingung zwar sofort finden, aber die damit verbundene Einschränkung falsch interpretieren, kehren Sie zum ursprünglichen Wortlaut zurück. Erweitern Sie nicht einfach den Rahmen um einen Textabschnitt, der eigentlich eine inhaltliche Klärung oder ein anderes Lernbeispiel erfordert.

Halten Sie abschließend genau fest, was geändert wurde und warum. Beispielsweise könnte ein Hintergrundtext aus dem Hauptpfad entfernt und eine Anwendungsbedingung direkt vor die Übung gestellt worden sein. Dies hilft anderen Erstellenden, das zugrunde liegende Prinzip nachzuvollziehen, anstatt lediglich das Layout eins zu eins zu kopieren. Bei späteren Aktualisierungen lässt sich so überprüfen, ob der inhaltliche Zusammenhang weiterhin besteht. Eine solche Erläuterung der Entscheidung ist oft wertvoller als ein Screenshot einer optisch ansprechenden Seite, bei der die Lernstruktur und die erwartete Handlung der Teilnehmenden nicht erkennbar sind.

Konsistenz über alle Lektionen hinweg wahren

Erstellen Sie nach der Überprüfung einer Lektion einige Beispiele für den angewandten Stil, die dem gesamten Team als Referenz dienen können. Fügen Sie Muster für Standarderklärungen, ausgearbeitete Beispiele, Aufgabenstellungen, wichtige Anwendungsbedingungen sowie Quellenangaben hinzu. Es ist nicht erforderlich, dass jedes Thema exakt die gleiche Länge oder die gleiche Anzahl an Bausteinen aufweist. Konsistenz bedeutet hier, dass bestimmte Gestaltungselemente stets die gleiche Bedeutung haben – es geht nicht darum, ein Layout mechanisch zu kopieren. Sollte ein bestimmter Inhaltstyp eine andere Struktur erfordern, begründen Sie dies und stellen Sie sicher, dass für die Lernenden der Weg zum nächsten Handlungsschritt weiterhin klar erkennbar bleibt.

Innerhalb des gesamten Kurses sollte das LMS (z. B. WeStudy) in Abstimmung mit dem Autorentool funktionieren: Einheitliche Kennzeichnungen für Aufgaben und Beispiele erleichtern dem Team die Pflege der Lernmaterialien. Überprüfen Sie vor Beginn eines neuen Kursdurchlaufs die überarbeiteten Seiten – insbesondere bei Änderungen an Diagrammen, Lerneinheiten oder Anweisungen. Eine gute inhaltliche Hierarchie zeigt sich daran, dass Lernende sich orientieren, Texte lesen und Aufgaben bearbeiten können. Dies erfordert eine sorgfältige Prüfung der Inhalte und des Lernpfads, anstatt sich lediglich mit einer optisch ansprechenden Vorlage zufriedenzugeben.

Beginnen Sie die Bearbeitung bei der wichtigsten Entscheidung, die Lernende im Verlauf der Lektion treffen müssen. Wenn die Gestaltung dabei hilft, die notwendigen Voraussetzungen zu erkennen und die entsprechende Handlung auszuführen, können Sie sie auf Basis der konkreten Erfahrungen der Teilnehmenden testen und schrittweise verbessern.

Quellen

• W3C WAI – Überschriften.

• W3C WAI – Sinnvolle Abfolge verstehen.

• W3C WAI – Mindestkontrast verstehen.

• W3C WAI – Verwendung von Farbe verstehen.