Patrón del Design Lab
Escenario guiado Bloque de elección
Un patrón de interacción ligero para momentos de aprendizaje basados en escenarios donde los aprendices eligen una respuesta, ven retroalimentación inmediata y entienden por qué una decisión funciona mejor que otra.
Cuándo usarlo
Usa esto cuando los aprendices necesiten practicar juicio, no memorizar hechos.
Las elecciones de escenario son útiles cuando los aprendices necesitan tomar decisiones en contexto. En lugar de pedirles que recuerden información, este patrón les pide que elijan qué harían a continuación.
La retroalimentación aparece inmediatamente debajo de la elección seleccionada, manteniendo la respuesta conectada a la decisión del aprendiz.
Esto funciona bien para momentos de servicio al cliente, decisiones de seguridad, conversaciones de coaching, juicio operativo y cualquier situación donde los aprendices necesiten comparar opciones.
Vista previa en vivo
Prueba la interacción.
Selecciona una respuesta para revelar la retroalimentación directamente debajo de la elección. Esto mantiene al aprendiz enfocado en la decisión que acaba de tomar.
Escenario
Un aprendiz está a punto de comenzar una tarea pero nota que algo no coincide con el proceso esperado. ¿Qué deberían hacer primero?
Mantiene la retroalimentación en contexto.
Los aprendices ven la respuesta directamente debajo de la elección que seleccionaron, lo que ayuda a conectar la retroalimentación con la decisión.
Apoya una mejor toma de decisiones.
La interacción ayuda a los aprendices a comparar opciones y entender por qué una respuesta es más fuerte que otra.
Se siente más ligero que un cuestionario.
El patrón puede guiar a los aprendices sin hacer que la experiencia se sienta como una evaluación formal o un momento de aprobar/reprobar.
Copia el código
Bloque inicial de HTML/CSS/JS amigable con Rise.
Pega esto en un bloque de código, página HTML externa o interacción alojada. Actualiza el escenario, las elecciones y el lenguaje de retroalimentación para que coincidan con tu momento de aprendizaje.
<div class="scenario-choice-block">
<div class="scenario-question">
<p class="scenario-label">Scenario</p>
<h3>
A learner notices something does not match the expected process. What should they do first?
</h3>
</div>
<div class="scenario-options">
<button class="scenario-option" data-feedback="choice-a">
<span>A</span>
Continue the task and fix the issue later.
</button>
<div class="scenario-feedback" id="choice-a">
<strong>Not the best first move.</strong>
<p>
Continuing may create more downstream work. The better first step is to pause and confirm what changed.
</p>
</div>
<button class="scenario-option active" data-feedback="choice-b">
<span>B</span>
Pause, confirm the issue, and follow the next available guidance.
</button>
<div class="scenario-feedback active" id="choice-b">
<strong>Strong choice.</strong>
<p>
This keeps the learner focused on the safest next action and reduces guessing.
</p>
</div>
<button class="scenario-option" data-feedback="choice-c">
<span>C</span>
Restart the entire process from the beginning.
</button>
<div class="scenario-feedback" id="choice-c">
<strong>Probably more effort than needed.</strong>
<p>
Restarting may work, but it can add unnecessary friction.
</p>
</div>
</div>
</div>
<style>
.scenario-choice-block {
max-width: 900px;
margin: 0 auto;
padding: 28px;
border-radius: 28px;
background: #ffffff;
box-shadow: 0 18px 48px rgba(15,23,42,.08);
font-family: inherit;
}
.scenario-label {
margin: 0 0 10px;
font-size: 12px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #777985;
}
.scenario-question h3 {
margin: 0 0 24px;
color: #111827;
font-size: 26px;
line-height: 1.15;
}
.scenario-options {
display: grid;
gap: 12px;
}
.scenario-option {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 16px;
border: 2px solid rgba(17,24,39,.08);
border-radius: 18px;
background: #ffffff;
color: #111827;
text-align: left;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.scenario-option span {
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 10px;
background: rgba(124,58,237,.08);
color: #7c3aed;
font-size: 12px;
font-weight: 900;
}
.scenario-option.active {
border-color: rgba(124,58,237,.42);
background: linear-gradient(135deg, rgba(37,99,235,.07), rgba(124,58,237,.07), rgba(20,184,166,.07));
}
.scenario-feedback {
display: none;
margin: -4px 0 10px;
padding: 18px 20px;
border-radius: 18px;
background: rgba(248,250,252,.9);
border: 1px solid rgba(15,23,42,.06);
}
.scenario-feedback.active {
display: block;
}
.scenario-feedback strong {
display: block;
margin-bottom: 6px;
color: #111827;
}
.scenario-feedback p {
margin: 0;
color: #5f6472;
line-height: 1.55;
}
</style>
<script>
(function () {
const options = document.querySelectorAll(".scenario-option");
const feedbackItems = document.querySelectorAll(".scenario-feedback");
options.forEach(function(option) {
option.addEventListener("click", function() {
const targetId = option.getAttribute("data-feedback");
options.forEach(function(item) {
item.classList.remove("active");
});
feedbackItems.forEach(function(item) {
item.classList.remove("active");
});
option.classList.add("active");
const targetFeedback = document.getElementById(targetId);
if (targetFeedback) {
targetFeedback.classList.add("active");
}
});
});
})();
</script>Personalízalo
Haz que el escenario sea específico para la decisión que los aprendices necesitan tomar.
Reemplaza el escenario de muestra con un momento realista del trabajo de tu aprendiz. Las mejores elecciones de escenario deberían sentirse plausibles, no obviamente ridículas.
Mantén la retroalimentación corta y útil. Explica por qué la elección funciona o por qué crea fricción.
También puedes cambiar el tono de coaching a cumplimiento, operaciones, seguridad, servicio al cliente o incorporación dependiendo del contexto.
¿Quieres más patrones de aprendizaje reutilizables?
Design Lab es una biblioteca práctica de patrones de interacción gratuitos, fragmentos de código y notas de construcción para diseñadores de aprendizaje.