Suporte ao fluxo de trabalho
Use quando os aprendizes precisarem de ajuda para diagnosticar um problema e escolher a próxima ação útil.
Recuperação guiada
Transforme a confusão em um caminho estruturado em vez de despejar os aprendizes em uma página de políticas ou fila de suporte.
HTML/CSS/JS
Funciona como um protótipo web autônomo, embed do Rise, objeto web do Storyline ou componente de página de suporte.
Por que esse padrão existe
A resolução de problemas é geralmente onde o aprendizado se torna real.
As pessoas raramente precisam de suporte quando tudo vai perfeitamente. Elas precisam de suporte quando o processo quebra, as instruções não correspondem à realidade, a ferramenta se comporta de maneira estranha ou o próximo passo não está claro.
Este protótipo oferece aos aprendizes um caminho guiado por esse momento confuso. Em vez de forçá-los a procurar em um longo documento, ajuda-os a identificar o problema, verificar a causa provável e escolher uma ação prática a seguir.
O objetivo não é substituir o suporte humano. O objetivo é reduzir a confusão evitável e ajudar as pessoas a avançar com mais confiança.
Protótipo ao vivo
Siga o fluxo de resolução de problemas.
Escolha o problema, verifique a causa provável e revise o próximo passo recomendado. Este mesmo modelo pode ser adaptado para integração, suporte a aplicativos, orientação de fluxo de trabalho, verificações de segurança ou triagem operacional.
Passo 01 · Identifique o problema
Que problema o aprendiz está vendo?
Comece nomeando o sinal. Um fluxo de resolução de problemas útil começa com o problema que o aprendiz pode realmente observar.
Passo 02 · Verifique a causa provável
O que eles devem verificar primeiro?
O melhor fluxo de resolução de problemas descarta causas simples antes de enviar as pessoas para caminhos de suporte mais pesados.
Passo 03 · Escolha a próxima ação útil
O que deve acontecer a seguir?
O passo final deve ajudar o aprendiz a agir, se recuperar ou escalar com contexto útil.
Notas de design
O suporte para resolução de problemas deve parecer ajuda, não tarefa de casa.
Comece com o sinal
Use uma linguagem que o aprendiz realmente reconheceria: “Eu vejo um erro”, “a tela não corresponde” ou “não tenho certeza do que fazer a seguir.”
Mantenha as verificações leves
Peça a verificação mais simples e útil antes de escalar, reiniciar ou enviar os aprendizes para uma parede de documentação.
Escale com contexto
Se os aprendizes precisarem de ajuda, certifique-se de que o fluxo capture o que aconteceu, o que eles verificaram e onde o processo quebrou.
Melhor utilizado para
Onde este protótipo se encaixa.
Suporte de aplicativo ou ferramenta
Guie os aprendizes através de telas comuns, incompatibilidades, estados de erro e próximos passos.
Prontidão operacional
Ajude as pessoas a se recuperarem quando o fluxo de trabalho real não corresponder perfeitamente à versão de treinamento.
Suporte de desempenho
Transforme um auxílio de trabalho estático em um caminho de decisão que aponte os aprendizes para uma ação útil.
Suporte ao gerente
Dê aos gerentes um caminho simples para diagnosticar barreiras de coaching, confiança ou fluxo de trabalho.
Código inicial
Copie a estrutura básica do fluxo de resolução de problemas.
Este início é intencionalmente pequeno. Use-o como base para uma página HTML hospedada, incorporação do Rise, objeto da web do Storyline ou página de suporte interno.
<div class="troubleshooting-flow">
<h3>What issue are you seeing?</h3>
<button data-next="instructions">
Instructions do not match the situation
</button>
<button data-next="tool">
The tool is not behaving as expected
</button>
<button data-next="confidence">
I am unsure what to do next
</button>
<div class="troubleshooting-result" aria-live="polite">
<h4>Next step</h4>
<p>Choose an issue to see guidance.</p>
</div>
</div>
<script>
const guidance = {
instructions: "Compare the current situation to the expected flow and identify where it diverges.",
tool: "Refresh, verify the tool state, and capture the exact error or screen.",
confidence: "Use a short example or decision guide before restarting the full learning experience."
};
document.querySelectorAll("[data-next]").forEach(function(button) {
button.addEventListener("click", function() {
const key = button.getAttribute("data-next");
document.querySelector(".troubleshooting-result p").textContent = guidance[key];
});
});
</script>Design Lab
A resolução de problemas é aprendizado no momento da necessidade.
Use este padrão quando o aprendiz não precisar de outro módulo. Eles precisam de um caminho claro através de um momento confuso.