Los gráficos en el contenido de aprendizaje deberían hacer más que decorar una pantalla.
Pueden mostrar progreso, riesgo, confianza, preparación, compensaciones, resultados de escenarios, salud del sistema y las consecuencias de las decisiones.
El problema es que muchos bloques de gráficos integrados se sienten estáticos y genéricos. Muestran datos, pero rara vez se sienten conectados al momento de aprendizaje.
El Kit de Movimiento de Gráficos es un paquete ligero de patrones para crear componentes de gráficos animados y responsivos que se sienten más intencionales dentro de Rise, Storyline o páginas de aprendizaje basadas en la web independientes.
Paquete de Patrones
Usa el movimiento para hacer que los datos de aprendizaje sean más fáciles de entender.
Este paquete incluye gráficos de barras animados, tarjetas métricas, anillos de progreso, gráficos de comparación y visuales de resultados de escenarios. El objetivo no es el teatro del tablero. El objetivo es una retroalimentación más clara, mejores debriefs y una explicación visual más útil.
Vista previa en vivo
Patrones de gráficos animados para pantallas de aprendizaje.
Toca los botones para reproducir la animación o cambiar los datos de muestra. Estos patrones se pueden adaptar para debriefs, tableros, retroalimentación de escenarios, verificaciones de preparación y visuales de soporte de rendimiento.
Gráfico de barras de métricas de aprendizaje animado
Usa esto cuando los aprendices necesiten comparar dimensiones de preparación, confianza, riesgo o rendimiento.
Tarjetas métricas animadas
Usa estas para estadísticas resumidas, señales de finalización o resultados de debrief.
Anillo de progreso
Usa esto para instantáneas de confianza, preparación, finalización o salud del sistema.
Gráfico de comparación antes / después
Usa esto para mostrar cómo un mejor diseño de aprendizaje cambia la fricción, la confianza, la preparación o la calidad del soporte.
Curso como evento
Aprendizaje como sistema
Informe de resultados del escenario
Usa esto después de una actividad basada en elecciones para mostrar cómo la decisión del aprendiz afectó múltiples dimensiones.
Debriefing de escenario
Reproduce la animación o cambia de escenario para ver cómo este patrón puede apoyar los informes de los aprendices.
Mejor para
Donde este paquete de patrones funciona bien.
Debriefings de escenarios
Muestra cómo la decisión de un aprendiz afectó la confianza, la velocidad, la calidad, el riesgo, la confianza, o otros compromisos realistas.
Chequeos de preparación
Visualiza la confianza, la preparación, la calidad del apoyo, o las brechas de conocimiento antes de que los aprendices pasen al trabajo real.
Tableros de aprendizaje
Crea tableros ligeros para la salud del sistema, el progreso de incorporación, el refuerzo, o el uso del soporte de rendimiento.
Infografías interactivas
Haz que los datos se sientan como parte de la explicación en lugar de una decoración estática pegada en medio de una lección.
Notas de diseño
El movimiento debe aclarar, no hacer gestos exagerados.
Los gráficos animados funcionan mejor cuando el movimiento ayuda a los aprendices a entender el cambio, la comparación, la consecuencia, o el progreso. La animación debe hacer que el momento de aprendizaje sea más fácil de leer, no convertir la pantalla en un pequeño casino.
Usa dimensiones significativas
Elige etiquetas conectadas a la tarea: riesgo, confianza, claridad, preparación, apoyo, confianza, velocidad, o calidad.
Anima el cambio
Usa el movimiento para mostrar cómo los valores crecen, disminuyen, comparan, o responden a las decisiones del aprendiz.
Mantén el gráfico legible
Etiquetas cortas, valores claros, y animación contenida superan la complejidad decorativa casi siempre.
Combina datos con coaching
El gráfico muestra lo que sucedió. La retroalimentación debe explicar por qué es importante y qué hacer a continuación.
Código inicial
Copia un inicio de gráfico de barras animado simple.
Esta versión inicial es intencionadamente pequeña. Úsala dentro de una página web, un embed externo de Rise, una página de S3/CloudFront, o como punto de partida para valores impulsados por JavaScript en 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>Notas de construcción
Cómo adaptar esto para Rise, Storyline, o páginas web independientes.
En Rise, esto funciona mejor como una página HTML alojada externamente incrustada o enlazada desde la lección. Puedes alojar la página en S3, CloudFront, GitHub Pages, Netlify, o alguna otra opción de alojamiento estático.
En Storyline, la misma idea puede conectarse a variables. Usa variables de Storyline para valores como confianza, riesgo, o puntuación, luego usa JavaScript para actualizar los anchos de los gráficos, los porcentajes de los anillos, o los valores métricos.
Para el aprendizaje web independiente, este patrón puede convertirse en parte de un tablero más grande, pantalla de informe, guía de campo, o infografía interactiva.
Mejores visuales de datos pueden hacer que el aprendizaje se sienta más vivo.
No porque cada lección necesite un panel de control. Sino porque a veces la mejor manera de explicar el progreso, el riesgo, la confianza o la consecuencia es dejar que los aprendices lo vean moverse.