Les graphiques dans le contenu d'apprentissage devraient faire plus que décorer un écran.
Ils peuvent montrer des progrès, des risques, de la confiance, de la préparation, des compromis, des résultats de scénarios, la santé du système et les conséquences des décisions.
Le problème est qu'un grand nombre de blocs de graphiques intégrés semblent statiques et génériques. Ils montrent des données, mais ils semblent rarement connectés au moment d'apprentissage.
Le Kit de mouvement de graphique est un pack léger de modèles pour créer des composants de graphiques animés et réactifs qui semblent plus intentionnels à l'intérieur de Rise, Storyline ou des pages d'apprentissage basées sur le web autonomes.
Pack de modèles
Utilisez le mouvement pour rendre les données d'apprentissage plus faciles à comprendre.
Ce pack comprend des graphiques à barres animés, des cartes de métriques, des anneaux de progression, des graphiques de comparaison et des visuels de résultats de scénarios. L'objectif n'est pas le théâtre de tableau de bord. L'objectif est un retour d'information plus clair, de meilleures débriefings et une explication visuelle plus utile.
Aperçu en direct
Modèles de graphiques animés pour les écrans d'apprentissage.
Appuyez sur les boutons pour rejouer l'animation ou changer les données d'exemple. Ces modèles peuvent être adaptés pour des débriefings, des tableaux de bord, des retours de scénarios, des vérifications de préparation et des visuels de soutien à la performance.
Graphique à barres de métriques d'apprentissage animé
Utilisez ceci lorsque les apprenants doivent comparer la préparation, la confiance, le risque ou les dimensions de performance.
Cartes de métriques animées
Utilisez-les pour des statistiques récapitulatives, des signaux d'achèvement ou des résultats de débriefing.
Anneau de progression
Utilisez ceci pour des instantanés de confiance, de préparation, d'achèvement ou de santé du système.
Graphique de comparaison avant / après
Utilisez ceci pour montrer comment une meilleure conception d'apprentissage change la friction, la confiance, la préparation ou la qualité du soutien.
Cours en tant qu'événement
Apprentissage en tant que système
Débriefing des résultats du scénario
Utilisez ceci après une activité basée sur des choix pour montrer comment la décision de l'apprenant a affecté plusieurs dimensions.
Débriefing de scénario
Rejouez l'animation ou changez de scénario pour voir comment ce modèle peut soutenir les débriefings des apprenants.
Meilleur pour
Où ce pack de modèles fonctionne bien.
Débriefings de scénario
Montrez comment la décision d'un apprenant a affecté la confiance, la vitesse, la qualité, le risque, la confiance en soi ou d'autres compromis réalistes.
Vérifications de préparation
Visualisez la confiance, la préparation, la qualité du soutien ou les lacunes de connaissances avant que les apprenants ne passent au travail réel.
Tableaux de bord d'apprentissage
Créez des tableaux de bord légers pour la santé du système, la progression de l'intégration, le renforcement ou l'utilisation du soutien à la performance.
Infographies interactives
Faites en sorte que les données fassent partie de l'explication au lieu d'une décoration statique collée au milieu d'une leçon.
Notes de conception
Le mouvement doit clarifier, pas faire des gestes exagérés.
Les graphiques animés fonctionnent mieux lorsque le mouvement aide les apprenants à comprendre le changement, la comparaison, la conséquence ou le progrès. L'animation doit rendre le moment d'apprentissage plus facile à lire, pas transformer l'écran en un petit casino.
Utilisez des dimensions significatives
Choisissez des étiquettes liées à la tâche : risque, confiance, clarté, préparation, soutien, confiance, vitesse ou qualité.
Animez le changement
Utilisez le mouvement pour montrer comment les valeurs augmentent, diminuent, se comparent ou réagissent aux décisions des apprenants.
Gardez le graphique lisible
Des étiquettes courtes, des valeurs claires et une animation mesurée surpassent presque toujours la complexité décorative.
Associez les données au coaching
Le graphique montre ce qui s'est passé. Les retours devraient expliquer pourquoi cela compte et quoi faire ensuite.
Code de démarrage
Copiez un modèle simple de graphique à barres animé.
Cette version de démarrage est intentionnellement petite. Utilisez-la à l'intérieur d'une page web, d'un embed externe Rise, d'une page S3/CloudFront, ou comme point de départ pour des valeurs pilotées par JavaScript dans Storyline.
<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>Notes de construction
Comment adapter cela pour Rise, Storyline ou des pages web autonomes.
Dans Rise, cela fonctionne mieux en tant que page HTML hébergée extérieurement intégrée ou liée à la leçon. Vous pouvez héberger la page sur S3, CloudFront, GitHub Pages, Netlify ou une autre option d'hébergement statique.
Dans Storyline, la même idée peut être connectée à des variables. Utilisez des variables Storyline pour des valeurs comme la confiance, le risque ou le score, puis utilisez JavaScript pour mettre à jour les largeurs de graphique, les pourcentages d'anneau ou les valeurs métriques.
Pour un apprentissage web autonome, ce modèle peut faire partie d'un tableau de bord plus large, d'un écran de débriefing, d'un guide de terrain ou d'une infographie interactive.
De meilleures visualisations de données peuvent rendre l'apprentissage plus vivant.
Ce n'est pas parce que chaque leçon a besoin d'un tableau de bord. C'est parce que parfois, la meilleure façon d'expliquer le progrès, le risque, la confiance ou la conséquence est de laisser les apprenants le voir évoluer.