Mantiene la retroalimentación cerca de la decisión.
Los aprendices no tienen que esperar hasta el final de la experiencia para entender por qué una elección funciona o no funciona.
Patrón del Design Lab
Exactamente / No exactamente Tarjetas de retroalimentación
Un patrón de interacción ligero para momentos de aprendizaje donde deseas guiar el juicio, reforzar decisiones útiles y redirigir a los aprendices sin que la experiencia se sienta como un cuestionario rígido.
Mejor para
Retroalimentación
Funciona en
Aumentar
Tipo de construcción
HTML/CSS/JS
Complejidad
Ligero
Cuándo usarlo
Usa esto cuando el objetivo sea la orientación, no una evaluación al estilo "te atrapé".
La retroalimentación tradicional de correcto/incorrecto puede sentirse demasiado brusca cuando el objetivo de aprendizaje es el juicio, la reflexión o el cambio de comportamiento.
Este patrón brinda a los aprendices una respuesta clara sin convertir cada elección en un momento de aprobación/reprobación. "Exactamente" refuerza la decisión útil. "No exactamente" redirige al aprendiz con un tono más suave y un siguiente paso más claro.
Funciona especialmente bien para escenarios, interpretación de políticas, decisiones de servicio, juicio operativo y momentos de aprendizaje al estilo de coaching.
Vista previa en vivo
Prueba la interacción.
Selecciona una opción para revelar retroalimentación. El patrón es intencionalmente simple para que pueda adaptarse dentro de Rise, Storyline o un bloque web personalizado.
Escenario
Un aprendiz no está seguro de qué siguiente paso tomar. ¿Qué debería hacer la experiencia?
Exactamente
Refuerza la decisión útil.
Esta respuesta apoya al aprendiz en el momento de necesidad. Reduce la fricción, da un siguiente paso claro y mantiene la experiencia enfocada en la acción.
No exactamente
Redirige sin cerrar a las personas.
Esta opción puede proporcionar información, pero añade esfuerzo en el momento equivocado. Un mejor patrón guía al aprendiz hacia la siguiente acción útil.
Evita castigar en exceso al aprendiz.
"No exactamente" te da espacio para redirigir sin hacer que la interacción se sienta como un fracaso en la prueba.
Apoya el aprendizaje basado en el juicio.
El patrón es útil cuando el objetivo es moldear la toma de decisiones, la interpretación o el comportamiento en lugar de verificar la memoria.
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, opciones, lenguaje de retroalimentación y colores para que coincidan con tu proyecto.
<div class="feedback-card-interaction">
<div class="feedback-question">
<p class="feedback-label">Scenario</p>
<h3>
A learner is unsure which next step to take. What should the experience do?
</h3>
<button class="feedback-choice" data-feedback="notexactly">
Give them the full policy document and let them search.
</button>
<button class="feedback-choice active" data-feedback="exactly">
Guide them to one clear next action.
</button>
<button class="feedback-choice" data-feedback="notexactly">
Ask them to restart the full course.
</button>
</div>
<div class="feedback-response exactly active" id="feedback-exactly">
<span>Exactly</span>
<h3>Reinforce the useful decision.</h3>
<p>
This response supports the learner at the moment of need.
</p>
</div>
<div class="feedback-response notexactly" id="feedback-notexactly">
<span>Not exactly</span>
<h3>Redirect without shutting people down.</h3>
<p>
This option may provide information, but it adds effort at the wrong moment.
</p>
</div>
</div>
<style>
.feedback-card-interaction {
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;
}
.feedback-label {
margin: 0 0 10px;
font-size: 12px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #777985;
}
.feedback-question h3,
.feedback-response h3 {
margin: 0 0 20px;
color: #111827;
}
.feedback-choice {
display: block;
width: 100%;
margin-bottom: 12px;
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;
}
.feedback-choice.active {
border-color: rgba(94,234,212,.9);
background: rgba(94,234,212,.16);
}
.feedback-response {
display: none;
margin-top: 24px;
padding: 24px;
border-radius: 24px;
}
.feedback-response.active {
display: block;
}
.feedback-response span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
.feedback-response.exactly {
background: rgba(220,252,231,.9);
border: 1px solid rgba(34,197,94,.22);
}
.feedback-response.exactly span {
background: rgba(22,163,74,.12);
color: #166534;
}
.feedback-response.notexactly {
background: rgba(255,248,236,.9);
border: 1px solid rgba(245,215,166,.9);
}
.feedback-response.notexactly span {
background: rgba(217,119,6,.12);
color: #92400e;
}
</style>
<script>
(function () {
const choices = document.querySelectorAll(".feedback-choice");
const exactly = document.getElementById("feedback-exactly");
const notExactly = document.getElementById("feedback-notexactly");
choices.forEach(function(choice) {
choice.addEventListener("click", function() {
choices.forEach(function(item) {
item.classList.remove("active");
});
choice.classList.add("active");
if (choice.getAttribute("data-feedback") === "exactly") {
exactly.classList.add("active");
notExactly.classList.remove("active");
} else {
notExactly.classList.add("active");
exactly.classList.remove("active");
}
});
});
})();
</script>Personalízalo
Haz que el patrón se ajuste al momento de aprendizaje.
Reemplaza el escenario de muestra con tu propio punto de decisión. Mantén las opciones cortas y orientadas a la acción.
Usa "Exactamente" cuando quieras reforzar una decisión sólida. Usa "No exactamente" cuando la elección sea comprensible pero necesite una redirección.
También puedes renombrar las etiquetas. Por ejemplo: "Movimiento fuerte / Prueba esto en su lugar", "Buena decisión / Considera esto", o "Sí / No del todo."
¿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.