Escolhas pesadas em julgamento
Use quando várias opções são defensáveis, mas cada uma cria uma consequência operacional diferente.
Padrão do Design Lab
Tradeoff de Decisão Visualizador
Um padrão de interação reutilizável que ajuda os aprendizes a comparar decisões plausíveis mostrando como cada escolha afeta velocidade, clareza, risco, confiança e esforço.
Consequências visíveis
Os aprendizes veem os tradeoffs em vez de receber uma resposta simples de correta ou incorreta.
HTML/CSS/JS
Funciona como uma interação web autônoma, recurso incorporado, bloco do Rise ou objeto web do Storyline.
Por que esse padrão existe
A maioria das decisões no local de trabalho não são momentos limpos de múltipla escolha.
No trabalho real, as pessoas costumam escolher entre opções que são todas razoáveis. Uma escolha pode ser rápida, mas arriscada. Outra pode construir confiança, mas exigir mais esforço. Outra pode reduzir a incerteza, mas desacelerar o fluxo de trabalho.
O Decision Tradeoff Visualizer transforma essa tensão em um momento de aprendizado. Em vez de dizer aos aprendizes se estavam certos ou errados, ajuda-os a ver o que suas decisões mudam.
Pré-visualização ao vivo
Escolha uma resposta e compare os tradeoffs.
Cenário: Um parceiro de entrega relata que as instruções do aplicativo estão pouco claras antes de iniciar uma rota sensível ao tempo. Você precisa decidir qual caminho de suporte recomendar.
Cenário
Decisão de suporte
O que você recomendaria primeiro?
A pessoa está pronta para começar, mas não tem certeza de qual instrução do aplicativo se aplica. O caminho é sensível ao tempo, e adivinhar pode criar confusão a montante.
Escolha equilibrada
Esclareça antes de agir
Esta escolha adiciona uma pequena pausa, mas melhora a clareza e reduz o risco de dar orientação com base na suposição errada.
Velocidade
68
Clareza
92
Controle de risco
86
Confiança
88
Ajuste de esforço
74
Nota de coaching
Um suporte útil muitas vezes começa reduzindo a ambiguidade. Uma pergunta de esclarecimento pode evitar que uma resposta rápida se torne uma cara.
Notas de design
Use isso quando o objetivo de aprendizado for um melhor julgamento, não a recordação de respostas.
Torne as trocas reais.
Use dimensões que importam no trabalho real, como risco, confiança, qualidade, velocidade, esforço, confiança ou impacto no cliente.
Evite equilíbrio falso.
Nem toda escolha precisa ser igualmente válida. Algumas opções podem ser mais fracas, mas o feedback deve explicar o porquê.
Treine a lógica da decisão.
O ponto não é recompensar o aprendiz com uma pontuação. O ponto é mostrar o que a decisão deles muda.
Como personalizá-lo
Troque o cenário, opções, métricas e notas de coaching.
Adapte este padrão para decisões de liderança, suporte ao cliente, segurança, integração, solução de problemas, aplicação de políticas, conversas de coaching ou triagem operacional.
Escreva o cenário
Crie um momento em que mais de uma opção pareça plausível.
Escolha as dimensões
Selecione de 4 a 6 dimensões de troca que importam no fluxo de trabalho.
Avalie cada decisão
Dê a cada escolha um perfil distinto para que as consequências se tornem visíveis.
Treine a lógica
Explique a lógica da decisão, não apenas o resultado.
Bloco inicial
HTML, CSS e JavaScript copiáveis.
Use este bloco inicial como um padrão leve para sua própria interação de decisão baseada em cenário.
<div class="tradeoff-widget" data-tradeoff-widget>
<div class="tradeoff-question">
<p>Scenario</p>
<h3>What would you recommend first?</h3>
</div>
<div class="tradeoff-options">
<button type="button" data-choice="quick">Give a quick answer so they can keep moving.</button>
<button type="button" data-choice="verify">Ask one clarifying question first.</button>
<button type="button" data-choice="escalate">Escalate immediately.</button>
</div>
<div class="tradeoff-feedback">
<h4 data-title>Clarify before acting</h4>
<p data-body>This choice adds a small pause, but improves clarity and reduces risk.</p>
<div class="tradeoff-bars">
<div class="bar" data-metric="speed"><span>Speed</span><strong>68</strong><div><i style="width:68%"></i></div></div>
<div class="bar" data-metric="clarity"><span>Clarity</span><strong>92</strong><div><i style="width:92%"></i></div></div>
<div class="bar" data-metric="risk"><span>Risk control</span><strong>86</strong><div><i style="width:86%"></i></div></div>
</div>
</div>
</div>Design Lab
Crie interações que tornem as decisões mais fáceis de entender.
Use este padrão quando os aprendizes precisarem comparar consequências, não memorizar uma resposta perfeita.
Voltar ao Design Lab