Gráficos em conteúdo de aprendizado devem fazer mais do que decorar uma tela.
Eles podem mostrar progresso, risco, confiança, prontidão, compensações, resultados de cenários, saúde do sistema e as consequências das decisões.
O problema é que muitos blocos de gráficos embutidos parecem estáticos e genéricos. Eles mostram dados, mas raramente parecem conectados ao momento de aprendizado.
O Kit de Movimento de Gráficos é um pacote leve de padrões para criar componentes de gráficos animados e responsivos que parecem mais intencionais dentro do Rise, Storyline ou páginas de aprendizado baseadas na web autônomas.
Pacote de Padrões
Use movimento para tornar os dados de aprendizado mais fáceis de entender.
Este pacote inclui gráficos de barras animados, cartões de métricas, anéis de progresso, gráficos de comparação e visuais de resultados de cenários. O objetivo não é teatro de painel. O objetivo é feedback mais claro, melhores debriefs e explicações visuais mais úteis.
Visualização ao vivo
Padrões de gráficos animados para telas de aprendizado.
Toque os botões para reproduzir a animação ou trocar os dados de exemplo. Esses padrões podem ser adaptados para debriefs, painéis, feedback de cenários, verificações de prontidão e visuais de suporte ao desempenho.
Gráfico de barras de métricas de aprendizado animado
Use isso quando os aprendizes precisarem comparar prontidão, confiança, risco ou dimensões de desempenho.
Cartões de métricas animados
Use esses para estatísticas resumidas, sinais de conclusão ou resultados de debrief.
Anel de progresso
Use isso para instantâneas de confiança, prontidão, conclusão ou saúde do sistema.
Gráfico de comparação antes/depois
Use isso para mostrar como um melhor design de aprendizado muda a fricção, confiança, prontidão ou qualidade do suporte.
Curso como evento
Aprendizagem como sistema
Debriefing de resultado de cenário
Use isso após uma atividade baseada em escolhas para mostrar como a decisão do aprendiz afetou múltiplas dimensões.
Debrief de cenário
Reproduza a animação ou troque de cenários para ver como este padrão pode apoiar os debriefings dos aprendizes.
Melhor Para
Onde este pacote de padrões funciona bem.
Debrief de cenário
Mostre como a decisão de um aprendiz afetou confiança, velocidade, qualidade, risco, confiança ou outras trocas realistas.
Verificações de prontidão
Visualize confiança, preparação, qualidade do suporte ou lacunas de conhecimento antes que os aprendizes entrem no trabalho real.
Painéis de aprendizagem
Crie painéis leves para saúde do sistema, progresso de integração, reforço ou uso de suporte ao desempenho.
Infográficos interativos
Faça os dados parecerem parte da explicação em vez de uma decoração estática colada no meio de uma lição.
Notas de Design
O movimento deve esclarecer, não fazer gestos exagerados.
Gráficos animados funcionam melhor quando o movimento ajuda os aprendizes a entender mudança, comparação, consequência ou progresso. A animação deve tornar o momento de aprendizagem mais fácil de ler, não transformar a tela em um pequeno cassino.
Use dimensões significativas
Escolha rótulos conectados à tarefa: risco, confiança, clareza, prontidão, suporte, confiança, velocidade ou qualidade.
Anime a mudança
Use movimento para mostrar como os valores crescem, diminuem, comparam ou respondem às decisões dos aprendizes.
Mantenha o gráfico legível
Rótulos curtos, valores claros e animação contida superam a complexidade decorativa quase sempre.
Combine dados com coaching
O gráfico mostra o que aconteceu. O feedback deve explicar por que isso é importante e o que fazer a seguir.
Código Inicial
Copie um modelo simples de gráfico de barras animado.
Esta versão inicial é intencionalmente pequena. Use-a dentro de uma página da web, incorporação externa do Rise, página S3/CloudFront ou como ponto de partida para valores impulsionados por JavaScript do 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 Construção
Como adaptar isso para Rise, Storyline ou páginas da web independentes.
No Rise, isso funciona melhor como uma página HTML hospedada externamente incorporada ou vinculada à lição. Você pode hospedar a página no S3, CloudFront, GitHub Pages, Netlify ou outra opção de hospedagem estática.
No Storyline, a mesma ideia pode ser conectada a variáveis. Use variáveis do Storyline para valores como confiança, risco ou pontuação, e depois use JavaScript para atualizar as larguras dos gráficos, porcentagens de anéis ou valores métricos.
Para aprendizagem baseada na web independente, este padrão pode se tornar parte de um painel maior, tela de debriefing, guia de campo ou infográfico interativo.
Melhores visuais de dados podem fazer a aprendizagem parecer mais viva.
Não porque toda lição precisa de um painel. Mas porque, às vezes, a melhor maneira de explicar progresso, risco, confiança ou consequência é deixar os aprendizes verem isso se mover.