Mit einem Designsystem für Lerninhalte sollte nicht jede Lektionsgrafik neu gezeichnet werden müssen

Ein Rebranding der Akademie legt versteckte Abhängigkeiten offen

Diese Woche ging es bei einer Aufwandsschätzung für eine visuelle Überarbeitung um mehrere bestehende Module und hunderte Lernseiten. Der größte Aufwand lag nicht darin, das Grundgerüst der Anwendung anzupassen. Er entstand beim Überarbeiten oder Neuerstellen der SVG-Grafiken für die einzelnen Lektionen.

Das ist ein Warnsignal für die Architektur, nicht bloß eine Liste offener Designaufgaben. Wenn jede Grafik ihre eigenen Markenvorgaben enthält, wird jede Grafik zur Wartungsaufgabe. Für das Produktteam eines Fintechs konkurriert die Überarbeitung dann mit Aufgaben rund um Onboarding und die Vermittlung von Produktfunktionen.

Lerninhalt und visuelle Gestaltung gehören getrennt

Ein Designsystem für Lerninhalte sollte unterscheiden, was eine Grafik vermittelt und wie sie aussieht. Bei einem Vergleich von Verwahrungsmodellen lassen sich Kategorien, Zusammenhänge, Beschriftungen und Erklärungen getrennt von Schriftarten, Farben und der Gestaltung der Karten speichern. Ein Theme sollte die Darstellung ändern, ohne diese Zusammenhänge neu zu definieren.

Diese Trennung braucht klare Regeln. Die Vorgaben zum Einsatz von Farbe in den WCAG besagen, dass Farbe nicht das einzige visuelle Mittel sein darf, um Informationen zu vermitteln. Ein Warnhinweis braucht deshalb eine feste Beschriftung oder ein festes Symbol, nicht bloß die Akzentfarbe des neuen Markendesigns.

Design-Tokens übertragen Markenvorgaben auf die gesamte Akademie

Ein LMS-Designsystem sollte Farben, Typografie, Abstände, Flächen, Rahmen und Interaktionszustände zentral definieren. Die Design Tokens Community Group hat eine Formatspezifikation, die Aliasse unterstützt. Damit können Tokens auf gemeinsame Werte verweisen, statt sie zu duplizieren.

Bezeichnungen sollten den Zweck beschreiben. Das GOV.UK Design System weist Farben je nach Funktion und Kontext zu, statt das Kopieren von Hexadezimalwerten zu verlangen. Bei Lerninhalten, deren Darstellung sich über Themes anpassen lässt, sind Rollen wie Warnung, Hervorhebung und Fläche hilfreicher als Namen, die an einen bestimmten Farbton gebunden sind.

Wiederverwendbare Komponenten erhalten die didaktische Struktur

Tokens allein definieren noch kein Prozessdiagramm. Wiederverwendbare Kurskomponenten brauchen klar definierte Strukturen für Zeitleisten, Vergleiche, Prozessabläufe, Hinweiskästen und Diagramme. Jede Komponente sollte Inhalte und Zusammenhänge als Eingaben annehmen. Das Theme steuert die Darstellung.

SVG unterstützt visuelle Eigenschaften, die sich per CSS steuern lassen. Doch eine Dateiendung ist noch keine Strategie für Wiederverwendung. Die Schnittstelle für die Darstellung muss Zugriff auf die vorgesehenen Gestaltungseigenschaften bieten. App-Learning kann diese Schnittstelle als Teil der Inhaltsarchitektur behandeln und gemeinsame Symbole, Verbindungselemente und Container kombinieren, ohne alle Ansichten gleich zu gestalten.

Individuelle Illustrationen brauchen einen didaktischen Grund

Eine eigens erstellte Grafik ist dann gerechtfertigt, wenn sie etwas erklärt, das eine Standardkomponente verzerren oder unklar machen würde. Entscheidend ist der didaktische Nutzen, nicht die Neuartigkeit. Auch individuelle Grafiken sollten nach Möglichkeit gemeinsame Grundelemente nutzen, mit bearbeitbaren Beschriftungen und dokumentierten Ausnahmen. Ein visuelles System für Lerninhalte muss Ausnahmen zulassen, ohne sie zum Standard zu machen.

Bestehende Grafiken brauchen einen Migrationspfad

Es ist nicht nötig, die gesamte Bibliothek auf einmal zu ersetzen. Eine praktikable Migration setzt zuerst bei wiederkehrenden Mustern an und sieht für wirklich einzigartige Grafiken eine Einzelprüfung vor.

1. Erfasse alle Grafiken und ordne ihnen die Lektionen zu, die von ihnen abhängen.
2. Gruppiere wiederkehrende Diagramme und prüfe, welche sich als Komponenten eignen.
3. Ordne fest hinterlegte Gestaltungswerte den passenden Tokens zu, wenn ihre Bedeutung eindeutig ist.
4. Hinterlege Beschriftungen in bearbeitbaren, übersetzbaren Inhaltsfeldern.
5. Prüfe repräsentative Ansichten in verschiedenen Themes und Sprachen sowie bei unterschiedlichen Displaybreiten auf Mobilgeräten.

Werkzeuge für die Migration sollten Unklarheiten markieren, statt zu raten, ob eine Farbe eine Warnung kennzeichnet oder nur der Dekoration dient. Versionierte Komponenten und visuelle Regressionstests sollten dafür sorgen, dass sich zentrale Änderungen vor der Veröffentlichung prüfen lassen.

Bei der nächsten Änderung zeigt sich der Reifegrad

Aussagekräftige Kennzahlen sind etwa die Anzahl manuell bearbeiteter Grafiken, die Zahl der zu prüfenden Ausnahmen und der Gesamtaufwand für die Überarbeitung. Das Ziel ist nicht, gar nichts mehr zu prüfen. Entscheidend ist, dass weniger Änderungen unmittelbar an die Zahl der Lektionen gekoppelt sind.

Eine Akademie mit wiederverwendbaren Komponenten sollte ein neues visuelles Erscheinungsbild über zentrale Gestaltungsvorgaben übernehmen können – mit bewusst gewählten Ausnahmen. Wenn sich weiterhin ein Designer um jede Lernseite kümmern muss, hat sich zwar die Marke verändert, nicht aber das Wartungsmodell.