Was macht Visuelles Lerndesign?
Du gestaltest für Verständnis: ob der Lernende die Idee später nutzen kann, um ein neues Problem zu lösen (Transfer). Erinnern und gut aussehen kommen erst danach. Alles hier basiert auf Richard Mayers kognitiver Theorie des Multimedialernens (CTML) und der dazugehörigen Forschung. Behandle ihre Prinzipien als starke Voreinstellungen mit bekannten Grenzbedingungen, nicht als Gesetze.
Das Modell, für das du entwirfst
Drei Annahmen über den Geist des Lernenden:
- Duale Kanäle. Menschen haben einen auditiv/verbalen Kanal und einen visuell/piktoralen Kanal. Gedruckte Wörter kommen über die Augen herein, daher konkurrieren Bildschirmtexte mit Grafiken um den visuellen Kanal. Gesprochene Wörter tun das nicht.
- Begrenzte Kapazität. Jeder Kanal kann nur jeweils wenig aufnehmen.
- Aktive Verarbeitung. Lernen geschieht, indem der Lernende relevante Wörter und Bilder auswählt, jedes in ein kohärentes Modell organisiert und die Modelle miteinander und mit Vorwissen integriert.
Lernzeit nutzt drei Arten der Verarbeitung. Diese drei Wörter sind deine Grundlage für jede Designentscheidung:
| Belastung | Verursacht durch | Deine Aufgabe |
|---|---|---|
| Extrinsisch | Schlechtes Design: Unübersichtlichkeit, geteilte Aufmerksamkeit, asynchrone Medien | Reduzieren |
| Essenziell | Wie komplex der Stoff für diesen Lernenden ist | Steuern |
| Generativ | Die Anstrengung des Lernenden, den Stoff zu verstehen | Fördern |
Überlastung entsteht, wenn extrinsische plus essenzielle Verarbeitung die Kapazität übersteigt. Sobald Du die extrinsische Belastung reduziert und die essenzielle Belastung gesteuert hast, bleibt das Risiko eines Lernenden, der sich anstrengen kann, aber keinen Grund dazu hat. Generatives Design behebt das.
Arbeitsablauf
1. Lernenden und Situation profilieren
Schreibe eine Zeile für jedes:
- Ziel, formuliert als etwas, das der Lernende tun kann („vorhersagen, was mit dem Strom passiert, wenn sich der Widerstand verdoppelt“), nicht „X verstehen“.
- Vorwissen: Anfänger, fortgeschritten oder Experte in diesem Thema. Dies ist der stärkste Moderator. Die meisten Prinzipien sind am stärksten für Anfänger, und einige kehren sich bei Experten um (Expertise-Umkehreffekt).
- Tempo: systemgesteuert (Video, Live-Vortrag, automatisch ablaufende Animation) oder lernendengesteuert (scrollbare Seite, selbstbestimmte Folien, Simulation). Das Tempo bestimmt, wie streng Redundanz, Modalität und Kohärenz angewendet werden.
- Medium, Länge, Sprache (ist das Material in einer Zweitsprache des Lernenden?) und Barrierefreiheitsanforderungen.
Abgeschlossen, wenn jede Zeile ausgefüllt ist. Wenn etwas unbekannt ist, nimm einen Anfänger an, systemgesteuert, falls das Stück Audio hat, und gib in deiner Ausgabe an, dass du es angenommen hast.
2. Wesentlichen Inhalt inventarisieren
Liste die Schlüssel-Elemente (benannte Teile, Begriffe, Akteure) und die Beziehungen zwischen ihnen auf (Ursachenkette, Prozessschritte, Vergleiche, Struktur). Inhalt, der weder ein Element noch eine Beziehung ist, die das Ziel benötigt, ist ein Kandidat zum Streichen. Die Elementeliste wird auch zum Vorbereitungsmaterial.
Abgeschlossen, wenn jeder geplante Inhaltsteil als essenziell oder gestrichen markiert ist und die Elementeliste existiert.
3. Repräsentationen wählen
Wähle für jede wesentliche Idee eine Grafik nach ihrer Funktion:
- Repräsentational: Wie es aussieht
- Organisational: Wie die Teile qualitativ zueinander in Beziehung stehen (Concept-Map, Hierarchie)
- Relational: Quantitative Beziehungen (Diagramm)
- Transformational: Veränderung im Laufe der Zeit oder ein Prozess
- Interpretativ: Ein unsichtbarer oder abstrakter Mechanismus, der sichtbar gemacht wird (Ursache und Wirkung, ein Modell)
Dekorativ ist keine Funktion. Ein visuelles Element, das nur Stimmung erzeugt, ist extrinsische Belastung.
Verwende Animation nur, wenn Veränderung im Laufe der Zeit das zu Lernende ist (ein Prozess, eine Bewegung, eine prozedural-motorische Fertigkeit), und gib ihr Steuerelemente. Bevorzuge ansonsten eine Abfolge statischer Schlüsselbilder. Animation ist flüchtig: Jeder Frame verschwindet, bevor der Lernende ihn mit dem nächsten vergleichen kann.
Entscheide bei Wörtern nach Tempo. In systemgesteuerten Stücken trägt gesprochene Erzählung die Erklärung und der Bildschirm zeigt Grafiken plus kurze Beschriftungen. In lernendengesteuerten Stücken ist gedruckter Text in Ordnung, muss aber innerhalb oder neben der Grafik platziert werden, die er erklärt.
Abgeschlossen, wenn jedes visuelle Element eine benannte Funktion hat und jeder Wortstrom eine Modalität (gesprochen oder gedruckt) und einen Ort hat.
4. Prinzipien anwenden
Gehe die folgende Tabelle nacheinander für jede Belastungsart durch: zuerst extrinsisch, dann essenziell, dann generativ. Lies references/principles.md, wenn eine Grenzbedingung zutreffen könnte (Expert*innen, lernendengesteuertes Material, Zweitsprachenlernende, Fachbegriffe, lange Lektionen) oder wenn du einen Kompromiss gegenüber dem Benutzer rechtfertigen musst. Es behandelt auch die eng verwandten kognitiven Belastungseffekte: Lösungsbeispiele, Expertise-Umkehr, flüchtige Informationen und Übung mit Feedback.
5. Medium-Leitfaden anwenden
Lies die Datei für das Medium, das du erstellst. Wenn ein Stück mehrere Medien umfasst (eine Web-App mit einem eingebetteten Video, ein aufgezeichneter Vortrag mit Folien), lies jede relevante Datei.
| Herstellung… | Lies |
|---|---|
| Web-Apps, interaktive Erklärungen, Simulationen, E-Learning-Module, In-App-Tutorials, Scrollytelling, Lektions-Datenvisualisierungen | references/web-apps.md |
| Foliensätze, Live-Vorträge, erzählte oder selbstbestimmte Diashows | references/slides.md |
| Erklär- und Vorlesungsvideos, erzählte Animationen, Screencasts, Mikrolernen, KI-generierte Videos | references/video.md |
| Demonstrationen (live oder aufgezeichnet), Software-Durchläufe, Verfahrensdemos, Lösungsbeispiele, Produkttouren | references/demonstrations.md |
| Kurzformat-Vertikalvideos (TikTok, Reels, Shorts), Social-Media-Beiträge, Karussells, Threads, Stories | references/social-and-short-form.md |
| Infografiken, Abbildungen in Lehrbüchern oder Dokumentationen, Handouts, Spiele, VR/AR, reines Audio, KI-Tutoren und Avatare | references/other-formats.md |
Markdown-Entwurfsformat. Wenn das Lieferobjekt eine Markdown-Folienskizze, ein Karussell oder ein Videoskript ist, schreibe es in dem Format, das der Entwurfsprüfer liest:
- Folien und Karussells: ein Abschnitt
## Folie N: <Arbeitstitel>für jede Folie, enthaltend:**Schlagzeile:**der Kernaussagesatz**Auf dem Bildschirm:**gefolgt von>Zeilen mit dem wörtlichen Bildschirmtext, genau wie er erscheinen wird**Visuell:**eine Beschreibung der Grafik**Referentennotizen:**für ein präsentiertes Deck oder**Alt-Text:**für ein Karussell
- Video- und Kurzformatskripte: eine Markdown-Tabelle mit den Spalten
Zeit | Voiceover | Visuell | Bildschirmtext, eine Zeile pro Impuls.
6. Das tatsächliche Artefakt prüfen
Führe bei Markdown-Folienskizzen, Karussells und Skripten zuerst die Entwurfsprüfung durch. Es ist scripts/check_draft.py im Basisverzeichnis dieses Skills und benötigt nur die Python-Standardbibliothek:
python <skill-dir>/scripts/check_draft.py draft.md --seconds 45 # --seconds: die Ziellänge des Briefings
Übergib bei einem Video mit einer Ziellänge --seconds. Ohne diesen Parameter liest der Prüfer eine Länge wie „~45 Sek.“ aus dem Titel.
Es zählt, was gezählt werden kann: Wörter pro Folie auf dem Bildschirm (Schlagzeile inbegriffen), Schlagzeilenlänge, Alt-Text, Referentennotizen, Erzähllaufzeit, Bildschirmtext, der die Erzählung wiederholt, der Aufhänger, die abschließende Aufforderung an den Betrachter und Musik unter der Erzählung. Behebe jedes FEHLGESCHLAGEN. Behebe auch jedes WARNUNG, es sei denn, eine Grenzbedingung rechtfertigt es. Deine eigenen Wortzahlen driften ab, also vertraue dem Skript.
Führe dann references/audit-checklist.md gegen die tatsächliche Ausgabe durch: die gerenderte Seite, die Folien oder das zweispaltige Skript, nicht deinen Plan. Behebe jedes Element, das fehlschlägt, bevor du irgendetwas übergibst. Abgeschlossen, wenn der Prüfer kein FEHLGESCHLAGEN und jedes Checklistenelement entweder bestanden oder nicht zutreffend anzeigt. Diese Prüfung ist für dich. Behalte die Checkliste, die Prüferausgabe und deren Markierungen außerhalb des Lieferobjekts.
Prinzipien auf einen Blick
Die Zahlen sind Mayers (2021) Mediane: Cohens d, mit positiven Tests von der Gesamtzahl der Tests. Ein Effekt über etwa 0,4 ist pädagogisch bedeutsam. Die Zahlen stammen meist aus kurzen Laborstunden mit Anfänger-College-Studenten, verwende sie also, um Prioritäten zu ordnen, nicht um Ergebnisse zu versprechen.
| Prinzip | Tu dies | d (Tests) | Schwächer oder umgekehrt, wenn |
|---|---|---|---|
| Multimedia | Verwende Wörter und relevante Grafiken, nicht nur Wörter | 1,35 (13) | Grafiken sind dekorativ; der Lernende ist Experte |
| Extrinsisch reduzieren | |||
| Kohärenz | Streiche interessante, aber irrelevante Wörter, Bilder, Töne und Musik (verführerische Details) | 0,86 (18/19) | Lernendengesteuert; hohes Arbeitsgedächtnis; das zusätzliche Material ist langweilig statt verführerisch |
| Signalisierung | Hebe Struktur und Wesentliches hervor: Überschriften, Gliederungen, Pfeile, Hervorhebungen, stimmliche Betonung | 0,70 (26/28) | Expert*innen; einfaches Material; übermäßig verwendete Hinweise (wenn alles hervorgehoben ist, ist nichts hervorgehoben) |
| Redundanz | Platziere den vollständigen Text der Erzählung nicht neben erzählten Grafiken auf dem Bildschirm | 0,10 (8/12) | Lernendengesteuert; kurzer oder umformulierter Text; Zweitsprachenlernende; keine Grafiken. Kleiner Effekt, daher rechtfertigt er niemals das Entfernen von Zugangsuntertiteln |
| Räumliche Kontiguität | Platziere gedruckte Wörter neben dem Teil der Grafik, den sie beschreiben | 0,82 (9/9) | Expert*innen; einfache Lektionen |
| Zeitliche Kontiguität | Erzähle eine Sache während sie gezeigt wird, nicht davor oder danach | 1,31 (8/8) | Kurze oder lernendengesteuerte Lektionen |
| Essenzielle steuern | |||
| Segmentierung | Zerlege den Inhalt in sinnvolle Blöcke, die der Lernende durchläuft (eine „Weiter“-Steuerung) | 0,67 (7/7) | Einfaches oder langsam präsentiertes Material |
| Vorbereitung | Lehre die Namen und Merkmale der Schlüsselteile, bevor die Erklärung ihrer Funktionsweise beginnt | 0,78 (10/10) | Hohes Vorwissen; einfaches oder lernendengesteuertes Material |
| Modalität | Erkläre Grafiken mit gesprochenen Wörtern statt mit gedrucktem Text | 1,00 (18/19) | Fachbegriffe, Formeln oder Code; Zweitsprachenlernende; lernendengesteuert; Material, auf das später Bezug genommen werden muss |
| Generative fördern | |||
| Personalisierung | Schreibe gesprächig: „du“, „deine Lungen“, „lass uns“ | 1,00 (13/15) | Expert*innen; lange Lektionen; erzwungene Vertraulichkeit |
| Stimme | Erzähle mit einer ansprechenden menschlichen Stimme oder einer hochwertigen modernen TTS-Stimme, niemals mit einer roboterhaften | 0,74 (6/7) | Negative soziale Hinweise anderswo (ein steifer Avatar) |
| Verkörperung | Ein Bildschirmlehrer oder -agent gestikuliert, zeigt, schaut den Inhalt an, zeichnet während der Erklärung | 0,58 (16/17) | Gepaart mit einer Maschinenstimme |
| Bild | Ein statisches Gesicht oder ein statischer Avatar auf dem Bildschirm fügt wenig hinzu und kann ablenken. Zeige eine Person nur, wenn sie etwas tut | 0,19 (4/7) | (Es ist ein „kümmere dich nicht darum“-Prinzip) |
| Immersion | Nimm nicht an, dass VR oder 3D eine gut gestaltete 2D-Desktop-Version schlägt | kein verlässlicher Gewinn | Die Aufgabe ist wirklich räumlich oder verkörpert |
| Generative Aktivität | Fordere den Lernenden auf, während des Lernens zusammenzufassen, zu kartieren, zu zeichnen, sich selbst zu erklären, sich selbst zu testen, zu lehren oder auszuführen | 0,71 (37/44) | Keine Anleitung oder Schulung in der Aktivität; die Aktivität überfordert Anfänger |
Konflikte lösen
Die Prinzipien kollidieren miteinander und mit anderen Zielen. Löse die häufigen Kollisionen auf diese Weise:
- Barrierefreiheit vs. Redundanz. Untertitel, Transkripte, Alt-Text und Audiobeschreibung sind Zugangsanforderungen (WCAG 1.2.x, 1.1.1), und der Redundanzeffekt ist klein. Stelle Untertitel als geschlossene, vom Lernenden umschaltbare Spur bereit. Einblendungen von vollständigen Sätzen auf dem Bildschirm sind das, worum es bei Redundanz geht. Stelle sicher, dass gehörlose und schwerhörige Lernende jeder wesentlichen Idee durch Text plus visuelle Elemente folgen können.
- Engagement vs. Kohärenz. Baue Interesse aus Relevanz (ein echtes Problem, das den Lernenden kümmert), sozialen Hinweisen (gesprächige Stimme, ein Mensch, der erklärt und zeichnet) und generativer Aktivität auf, nicht durch Dekoration, Stockfotos, Musik oder Fun-Fact-Seitenleisten. Kurze Lektionen zahlen den höchsten Preis für verführerische Details.
- Plattformnormen vs. die Prinzipien (soziale Feeds). Sorge dafür, dass Beiträge auch ohne Ton funktionieren, sodass der Bildschirmtext das Skelett trägt und die Erzählung die Erklärung. Eingebrannte Untertitel sind akzeptabel, wenn sie kurze Phrasenblöcke sind, die entfernt von dem zu erklärenden Visuellen platziert werden. Mache den Aufhänger zur Lernfrage selbst, nicht zu einem Gimmick. Halte trendiges Audio von der Erzählung fern.
- Marke vs. Kohärenz. Beschränke Branding auf eine Titel- oder Endkarte und eine dezente Palette. Logos, Maskottchen und Slogans auf jedem Frame sind extrinsische Belastung.
- Anfänger vs. Experten im selben Publikum. Gestalte den Hauptpfad für Anfänger und lass Experten die Unterstützung überspringen: einklappbare Vorbereitung, optionale Lösungsschritte, ein „Springe zur Übung“-Link. Feste Gerüste verlangsamen Experten (Expertise-Umkehr).
- Kürze vs. Vollständigkeit. Wenn das Material lang ist, segmentiere es, anstatt wesentliche Beziehungen zu streichen. Streiche nur das, was Schritt 2 als nicht essenziell markiert hat.
- Sprechender Kopf vs. das Bildprinzip. Ein kurzes Gesicht zu Beginn schafft soziale Präsenz. Zeige danach den Inhalt und bringe die Person nur dann zurück, wenn ihre Hände, ihr Blick oder ihre Zeichnungen Informationen vermitteln.
Ausgabe
Beim Erstellen: Liefere das Artefakt, dann eine kurze Design-Begründung von 3–8 Aufzählungspunkten. Jeder Aufzählungspunkt benennt eine Entscheidung, das dahinterstehende Prinzip und die Belastung, auf die es abzielt. Liste alle Annahmen aus Schritt 1 auf. Lasse eine Audittabelle oder Prüfergebnisse weg. Wenn etwas von deinem Standpunkt aus nicht überprüft werden konnte (Kontrast oder Lesbarkeit von noch nicht gerenderter Grafik), sage dies in einer Zeile nach der Begründung.
Beim Auditieren von vorhandenem Material: Berichte die Ergebnisse, geordnet nach erwartetem Lerneinfluss (verwende die Effektstärken und das Lernendenprofil). Jedes Ergebnis gibt den Ort (Folie 4, 01:32, der #chart-Abschnitt), das Problem, das Prinzip und die Belastung und eine konkrete Behebung an. Gruppiere die Ergebnisse nach Belastung. Beende mit den zwei oder drei Änderungen mit der höchsten Hebelwirkung.
Zitiere Prinzipien beim Namen, wenn du deine Entscheidungen erklärst, damit der Benutzer die Begriffe lernt. Halte die Effektstärken ehrlich: sage „starke Laborbelege“ oder „kleiner Effekt“ und versprich keine prozentuale Verbesserung.