Elecciones con mucho juicio
Usar cuando varias opciones son defendibles, pero cada una crea una consecuencia operativa diferente.
Patrón del Design Lab
Compensación de decisiones Visualizador
Un patrón de interacción reutilizable que ayuda a los aprendices a comparar decisiones plausibles mostrando cómo cada elección afecta la velocidad, claridad, riesgo, confianza y esfuerzo.
Consecuencias visibles
Los aprendices ven compensaciones en lugar de recibir una simple respuesta correcta o incorrecta.
HTML/CSS/JS
Funciona como una interacción web independiente, recurso incrustado, bloque de Rise o objeto web de Storyline.
Por qué existe este patrón
La mayoría de las decisiones en el lugar de trabajo no son momentos limpios de opción múltiple.
En el trabajo real, las personas a menudo eligen entre opciones que son todas algo razonables. Una elección puede ser rápida pero arriesgada. Otra puede generar confianza pero requerir más esfuerzo. Otra puede reducir la incertidumbre pero ralentizar el flujo de trabajo.
El Decision Tradeoff Visualizer convierte esa tensión en el momento de aprendizaje. En lugar de decirles a los aprendices si estaban en lo correcto o incorrecto, les ayuda a ver qué cambia con su decisión.
Vista previa en vivo
Elige una respuesta y compara las compensaciones.
Escenario: Un socio de entrega informa que las instrucciones de la aplicación no son claras antes de comenzar una ruta sensible al tiempo. Necesitas decidir qué camino de apoyo recomendar.
Escenario
Decisión de apoyo
¿Qué recomendarías primero?
La persona está lista para comenzar, pero no está segura de qué instrucción de la aplicación se aplica. La ruta es sensible al tiempo, y adivinar podría crear confusión posterior.
Elección equilibrada
Aclara antes de actuar
Esta elección añade una pequeña pausa, pero mejora la claridad y reduce el riesgo de dar orientación basada en la suposición incorrecta.
Velocidad
68
Claridad
92
Control de riesgos
86
Confianza
88
Ajuste de esfuerzo
74
Nota de coaching
El apoyo útil a menudo comienza reduciendo la ambigüedad. Una pregunta aclaratoria puede evitar que una respuesta rápida se convierta en una costosa.
Notas de diseño
Usa esto cuando el objetivo de aprendizaje sea un mejor juicio, no la recuperación de respuestas.
Haz que las compensaciones sean reales.
Usa dimensiones que importen en el trabajo real, como riesgo, confianza, calidad, velocidad, esfuerzo, confianza o impacto en el cliente.
Evita el equilibrio falso.
No todas las elecciones necesitan ser igualmente válidas. Algunas opciones pueden ser más débiles, pero la retroalimentación debe explicar por qué.
Entrena la lógica de decisión.
El objetivo no es recompensar al aprendiz con una puntuación. El objetivo es mostrar qué cambios trae su decisión.
Cómo personalizarlo
Cambia el escenario, las opciones, las métricas y las notas de coaching.
Adapta este patrón para decisiones de liderazgo, soporte al cliente, seguridad, incorporación, resolución de problemas, aplicación de políticas, conversaciones de coaching o triaje operativo.
Escribe el escenario
Crea un momento donde más de una opción se sienta plausible.
Elige las dimensiones
Selecciona de 4 a 6 dimensiones de compensación que importen en el flujo de trabajo.
Puntúa cada decisión
Da a cada elección un perfil distinto para que las consecuencias se vuelvan visibles.
Entrena la lógica
Explica la lógica de decisión, no solo el resultado.
Bloque inicial
HTML, CSS y JavaScript copiables.
Usa este bloque inicial como un patrón ligero para tu propia interacción de decisión basada en escenarios.
<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>Laboratorio de diseño
Crea interacciones que faciliten la comprensión de las decisiones.
Usa este patrón cuando los aprendices necesiten comparar consecuencias, no memorizar una respuesta perfecta.
Volver al Design Lab