O que este padrão faz
Os pedidos de aprendizagem geralmente começam com um entregável: um curso, um módulo, um vídeo, um auxílio de trabalho ou uma atualização rápida. Mas o verdadeiro problema de desempenho geralmente reside em um sistema maior.
Este mapa interativo ajuda os designers de aprendizagem a desacelerar e inspecionar o sistema antes de decidir o que construir. Ele torna visíveis as partes invisíveis do desempenho: necessidades dos aprendizes, momentos de fluxo de trabalho, pontos de decisão, atrito das ferramentas, recursos de apoio, reforço do gestor, riscos e sinais de sucesso.
O objetivo não é tornar o mapa complicado. O objetivo é ajudar as equipes a fazerem melhores perguntas antes de construírem a coisa errada de forma bonita.
Melhor utilizado para
Use isso quando o pedido de aprendizagem for maior que o entregável.
Análise de necessidades de aprendizagem
Use o mapa para esclarecer o que realmente está moldando a lacuna de desempenho antes de nomear uma solução.
Conversas com partes interessadas
Dê às partes interessadas uma maneira estruturada de discutir o sistema em torno do problema, não apenas o ativo solicitado.
Consultoria de desempenho
Identifique se a questão é conhecimento, confiança, atrito no fluxo de trabalho, ferramentas, reforço ou algo mais.
Arquitetura de aprendizagem
Mapeie como cursos, auxílios de trabalho, ferramentas de gestão, momentos de prática e suporte ao fluxo de trabalho se encaixam.
Por que isso funciona
Muitas aprendizagens no local de trabalho falham porque tratam o desempenho como um problema de conteúdo. Alguém pede um curso, o curso é construído e todos esperam que o trabalho mude.
Mas o verdadeiro desempenho é moldado por mais do que conteúdo. As pessoas precisam de expectativas claras, ferramentas úteis, apoio oportuno, tomada de decisão confiante, reforço do gestor e um fluxo de trabalho que não as combata a cada passo.
Este padrão ajuda os designers de aprendizagem a passarem de “O que devemos ensinar?” para “Que sistema estamos projetando?”. Essa mudança importa porque a melhor solução de aprendizagem pode ser um cenário, uma lista de verificação, um caminho de decisão, uma ferramenta de coaching do gestor, um seletor de recursos, um auxílio ao fluxo de trabalho ou, às vezes, sim, um curso.
Pré-visualização ao vivo
Explore o sistema em torno de um problema de aprendizagem.
Selecione cada parte do mapa para ver o que procurar, o que perguntar e que tipo de movimento de design pode apoiar o desempenho.
Comece aqui
O que realmente está moldando o desempenho?
A maioria dos pedidos de aprendizagem começa com um entregável. Este mapa ajuda você a inspecionar o sistema maior antes de decidir o que construir.
Código inicial
Copie a estrutura e adapte os nós.
Esta versão inicial mostra a estrutura mínima: botões de nó, um painel ao vivo e um pequeno script que atualiza o conteúdo quando um aprendiz seleciona uma parte do sistema.
<section class="learning-systems-map">
<div class="map">
<button data-node="learner">Learner Need</button>
<button data-node="workflow">Workflow Moment</button>
<button data-node="decision">Decision Point</button>
<button data-node="support">Support Resource</button>
</div>
<aside class="panel" aria-live="polite">
<p id="mapKicker">01 / Learner Need</p>
<h3 id="mapTitle">What does the learner need to do?</h3>
<p id="mapDescription">
Start with the learner’s real task, not the requested content.
</p>
</aside>
</section>
<script>
const systemsData = {
learner: {
kicker: "01 / Learner Need",
title: "What does the learner need to do?",
description: "Start with the learner’s real task, not the requested content."
},
workflow: {
kicker: "02 / Workflow Moment",
title: "Where does this show up in the work?",
description: "Find the moment where confusion, risk, or hesitation appears."
},
decision: {
kicker: "03 / Decision Point",
title: "What choice does the learner need to make?",
description: "Make judgment visible by showing tradeoffs and consequences."
},
support: {
kicker: "04 / Support Resource",
title: "What support exists after training?",
description: "Design for the moment when memory fades and real work gets messy."
}
};
document.querySelectorAll("[data-node]").forEach((button) => {
button.addEventListener("click", () => {
const item = systemsData[button.dataset.node];
document.querySelector("#mapKicker").textContent = item.kicker;
document.querySelector("#mapTitle").textContent = item.title;
document.querySelector("#mapDescription").textContent = item.description;
});
});
</script>Como personalizá-lo
Renomeie os rótulos dos nós, atualize o objeto de dados e estilize o mapa para corresponder à sua marca ou fluxo de trabalho. O padrão central é simples: os aprendizes escolhem um elemento do sistema, e o painel explica o que inspecionar a seguir.
Notas de implantação do S3
Como hospedar isso como um infográfico interativo leve.
Salve o arquivo como index.html
Mantenha o HTML, CSS e JavaScript em um único arquivo se você quiser a implantação mais simples possível.
Faça o upload para o seu bucket S3
Use seu caminho de hospedagem aprovado e siga o processo de segurança, acesso e revisão da sua organização.
Defina o tipo de conteúdo
Certifique-se de que o arquivo seja servido como text/html. Se o tipo de conteúdo estiver errado, o navegador pode baixar o arquivo em vez de renderizá-lo.
Sirva através da sua URL aprovada
Use seu caminho de entrega público ou interno aprovado. Em muitas organizações, isso pode envolver CloudFront, um CDN interno ou outra camada de hospedagem governada.
Teste a página em desktop e mobile
Abra a URL hospedada diretamente e teste cada interação antes de incorporá-la ou vinculá-la dentro de uma experiência de aprendizado.
Como usar isso com Rise, Storyline ou páginas internas
Articulate Rise
Use a URL hospedada como um link de botão, conteúdo da web incorporado ou recurso externo quando o mapa precisar de mais espaço do que um bloco padrão do Rise.
Articulate Storyline
Use a página hospedada como um objeto da web ou reconstrua a lógica dentro do Storyline com camadas, estados, variáveis e JavaScript.
Páginas internas da wiki
Vincule à página hospedada a partir de SOPs, páginas de lançamento, hubs de equipe ou recursos de capacitação.
Portais de aprendizado
Use o mapa como um recurso autônomo para designers de aprendizado, gerentes, equipes de programa ou parceiros de capacitação.
Notas de personalização
A maneira mais fácil de personalizar este padrão é atualizar os oito nós do mapa e o conteúdo vinculado a cada nó.
Renomeie os nós para corresponder ao seu processo, público, linguagem da equipe ou modelo de design de aprendizado.
Atualize cada painel com seus próprios prompts, perguntas de design, movimentos de suporte ou exemplos.
Altere os gradientes, bordas, raio dos cartões, tipografia e espaçamento para se adequar à sua marca.
Reframe o mapa em torno de um fluxo de trabalho específico, lançamento de produto, modelo de suporte ou problema operacional.
Notas de acessibilidade
Este padrão inicial usa botões reais para cada nó interativo, o que é melhor do que tornar formas não semânticas clicáveis. O painel de conteúdo usa uma região aria-live para que as atualizações possam ser anunciadas por tecnologia assistiva.
Antes de usar isso em produção, teste a navegação por teclado, a visibilidade do foco, o contraste de cores, o comportamento do leitor de tela e a usabilidade em dispositivos móveis. Se você adicionar animação, respeite as preferências de movimento reduzido.
Design Lab
Use isso como uma ferramenta de reflexão, não apenas como um visual.
O objetivo do Mapa de Sistemas de Aprendizagem não é fazer a estratégia de aprendizagem parecer sofisticada. É ajudar as equipes a pausar o suficiente para fazer perguntas melhores sobre o que as pessoas realmente precisam, onde o trabalho falha e que tipo de suporte tornaria o desempenho mais claro, consistente e útil.