Diagramme in Lerninhalten sollten mehr tun, als nur einen Bildschirm zu dekorieren.
Sie können Fortschritt, Risiko, Vertrauen, Bereitschaft, Kompromisse, Szenarioergebnisse, Systemgesundheit und die Konsequenzen von Entscheidungen zeigen.
Das Problem ist, dass viele integrierte Diagrammblöcke statisch und generisch wirken. Sie zeigen Daten, aber sie fühlen sich selten mit dem Lernmoment verbunden.
Chart Motion Kit ist ein leichtgewichtiges Musterpaket zur Erstellung animierter, reaktionsschneller Diagrammkomponenten, die in Rise, Storyline oder eigenständigen webbasierten Lernseiten absichtsvoller wirken.
Musterpaket
Verwenden Sie Bewegung, um Lerninformationen leichter verständlich zu machen.
Dieses Paket enthält animierte Balkendiagramme, Metrik-Karten, Fortschrittsringe, Vergleichsdiagramme und visuelle Szenarioergebnisse. Das Ziel ist nicht Dashboard-Theater. Das Ziel ist klareres Feedback, bessere Nachbesprechungen und nützlichere visuelle Erklärungen.
Live-Vorschau
Animierte Diagrammmuster für Lernbildschirme.
Tippen Sie auf die Schaltflächen, um die Animation erneut abzuspielen oder die Beispieldaten zu wechseln. Diese Muster können für Nachbesprechungen, Dashboards, Szenario-Feedback, Bereitschaftsprüfungen und Leistungsunterstützungsvisualisierungen angepasst werden.
Animiertes Lernmetriken-Balkendiagramm
Verwenden Sie dies, wenn Lernende Bereitschaft, Vertrauen, Risiko oder Leistungsdimensionen vergleichen müssen.
Animierte Metrik-Karten
Verwenden Sie diese für Zusammenfassungsstatistiken, Abschluss-Signale oder Nachbesprechungsergebnisse.
Fortschrittsring
Verwenden Sie dies für Schnappschüsse von Vertrauen, Bereitschaft, Abschluss oder Systemgesundheit.
Vorher/Nachher-Vergleichsdiagramm
Verwenden Sie dies, um zu zeigen, wie ein besseres Lern-Design Reibung, Vertrauen, Bereitschaft oder Unterstützungsqualität verändert.
Kurs als Ereignis
Lernen als System
Szenarioergebnis-Debriefing
Verwenden Sie dies nach einer entscheidungsbasierten Aktivität, um zu zeigen, wie die Entscheidung des Lernenden mehrere Dimensionen beeinflusst hat.
Szenario-Nachbesprechung
Spielen Sie die Animation erneut ab oder wechseln Sie die Szenarien, um zu sehen, wie dieses Muster die Debriefings der Lernenden unterstützen kann.
Am besten geeignet für
Wo dieses Musterpaket gut funktioniert.
Szenario-Nachbesprechungen
Zeigen Sie, wie die Entscheidung eines Lernenden Vertrauen, Geschwindigkeit, Qualität, Risiko, Selbstbewusstsein oder andere realistische Abwägungen beeinflusst hat.
Bereitschaftsprüfungen
Visualisieren Sie Vertrauen, Vorbereitung, Unterstützungsqualität oder Wissenslücken, bevor die Lernenden in die echte Arbeit einsteigen.
Lern-Dashboards
Erstellen Sie leichte Dashboards für Systemgesundheit, Onboarding-Fortschritt, Verstärkung oder Nutzung von Leistungsunterstützung.
Interaktive Infografiken
Lassen Sie Daten wie Teil der Erklärung erscheinen, anstatt wie eine statische Dekoration, die mitten in einer Lektion eingefügt wurde.
Entwurfshinweise
Bewegung sollte klären, nicht Jazzhände aufführen.
Animierte Diagramme funktionieren am besten, wenn die Bewegung den Lernenden hilft, Veränderung, Vergleich, Konsequenz oder Fortschritt zu verstehen. Die Animation sollte den Lernmoment leichter lesbar machen, nicht den Bildschirm in ein kleines Casino verwandeln.
Verwenden Sie bedeutungsvolle Dimensionen
Wählen Sie Beschriftungen, die mit der Aufgabe verbunden sind: Risiko, Vertrauen, Klarheit, Bereitschaft, Unterstützung, Geschwindigkeit oder Qualität.
Animieren Sie die Veränderung
Verwenden Sie Bewegung, um zu zeigen, wie Werte wachsen, schrumpfen, vergleichen oder auf Entscheidungen der Lernenden reagieren.
Halten Sie das Diagramm lesbar
Kurze Beschriftungen, klare Werte und zurückhaltende Animationen schlagen dekorative Komplexität fast immer.
Kombinieren Sie Daten mit Coaching
Das Diagramm zeigt, was passiert ist. Das Feedback sollte erklären, warum es wichtig ist und was als Nächstes zu tun ist.
Starter-Code
Kopieren Sie einen einfachen animierten Balkendiagramm-Start.
Diese Starterversion ist absichtlich klein. Verwenden Sie sie innerhalb einer Webseite, eines externen Rise-Embeds, einer S3/CloudFront-Seite oder als Ausgangspunkt für Storyline-JavaScript-gesteuerte Werte.
<div class="learning-chart">
<div class="chart-row">
<span>Clarity</span>
<div class="track"><div class="fill" data-value="82"></div></div>
</div>
<div class="chart-row">
<span>Confidence</span>
<div class="track"><div class="fill" data-value="68"></div></div>
</div>
</div>
<style>
.learning-chart {
display: grid;
gap: 18px;
padding: 24px;
border-radius: 24px;
background: #ffffff;
border: 1px solid rgba(15,23,42,.08);
}
.chart-row {
display: grid;
gap: 8px;
}
.chart-row span {
font: 800 13px/1.2 system-ui, sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
color: #111827;
}
.track {
height: 14px;
overflow: hidden;
border-radius: 999px;
background: rgba(15,23,42,.08);
}
.fill {
width: 0%;
height: 100%;
border-radius: 999px;
background: linear-gradient(135deg, #2563eb, #7c3aed, #14b8a6);
transition: width .8s ease;
}
</style>
<script>
document.querySelectorAll(".fill").forEach(function(bar) {
const value = bar.getAttribute("data-value");
requestAnimationFrame(function() {
bar.style.width = value + "%";
});
});
</script>Build-Notizen
So passen Sie dies für Rise, Storyline oder eigenständige Webseiten an.
In Rise funktioniert dies am besten als extern gehostete HTML-Seite, die in die Lektion eingebettet oder verlinkt ist. Sie können die Seite auf S3, CloudFront, GitHub Pages, Netlify oder einer anderen statischen Hosting-Option hosten.
In Storyline kann dieselbe Idee mit Variablen verbunden werden. Verwenden Sie Storyline-Variablen für Werte wie Vertrauen, Risiko oder Punktzahl und verwenden Sie dann JavaScript, um die Breiten der Diagramme, Ringprozentsätze oder Metrikwerte zu aktualisieren.
Für eigenständiges webbasiertes Lernen kann dieses Muster Teil eines größeren Dashboards, Debrief-Bildschirms, Feldführers oder interaktiver Infografik werden.
Bessere Datenvisualisierungen können das Lernen lebendiger erscheinen lassen.
Nicht, weil jede Lektion ein Dashboard braucht. Sondern weil manchmal der beste Weg, Fortschritt, Risiko, Vertrauen oder Konsequenz zu erklären, darin besteht, den Lernenden zu zeigen, wie es sich bewegt.