Mantém o feedback próximo à decisão.
Os aprendizes não precisam esperar até o final da experiência para entender por que uma escolha funciona ou não funciona.
Padrão do Design Lab
Exatamente / Não Exatamente Cartões de Feedback
Um padrão de interação leve para momentos de aprendizado onde você deseja guiar o julgamento, reforçar decisões úteis e redirecionar os aprendizes sem fazer a experiência parecer um questionário rígido.
Melhor para
Feedback
Funciona em
Rise
Tipo de construção
HTML/CSS/JS
Complexidade
Leve
Quando usá-lo
Use isso quando o objetivo for orientação, não avaliação do tipo pegadinha.
O feedback tradicional de correto/incorreto pode parecer muito brusco quando o objetivo de aprendizado é julgamento, reflexão ou mudança de comportamento.
Este padrão dá aos aprendizes uma resposta clara sem transformar cada escolha em um momento de aprovação/reprovação. “Exatamente” reforça a decisão útil. “Não exatamente” redireciona o aprendiz com um tom mais suave e um próximo passo mais claro.
Funciona especialmente bem para cenários, interpretação de políticas, decisões de serviço, julgamento operacional e momentos de aprendizado no estilo coaching.
Visualização ao vivo
Experimente a interação.
Selecione uma escolha para revelar o feedback. O padrão é intencionalmente simples para que possa ser adaptado dentro do Rise, Storyline ou um bloco web personalizado.
Cenário
Um aprendiz não tem certeza de qual próximo passo tomar. O que a experiência deve fazer?
Exatamente
Reforce a decisão útil.
Esta resposta apoia o aprendiz no momento de necessidade. Reduz a fricção, dá um próximo passo claro e mantém a experiência focada na ação.
Não exatamente
Redirecione sem desestimular as pessoas.
Esta opção pode fornecer informações, mas adiciona esforço no momento errado. Um padrão melhor guia o aprendiz em direção à próxima ação útil.
Evita punir excessivamente o aprendiz.
“Não exatamente” dá espaço para redirecionar sem fazer a interação parecer uma falha no teste.
Apoia o aprendizado baseado em julgamento.
O padrão é útil quando o objetivo é moldar a tomada de decisão, interpretação ou comportamento em vez de verificar a memória.
Copie o código
Bloco inicial HTML/CSS/JS amigável ao Rise.
Cole isso em um Bloco de Código, página HTML externa ou interação hospedada. Atualize o cenário, opções, linguagem de feedback e cores para corresponder ao seu projeto.
<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>Personalize isso
Faça o padrão se adequar ao momento de aprendizado.
Substitua o cenário de exemplo pelo seu próprio ponto de decisão. Mantenha as opções curtas e orientadas para a ação.
Use “Exatamente” quando quiser reforçar uma decisão forte. Use “Não exatamente” quando a escolha for compreensível, mas precisar de um redirecionamento.
Você também pode renomear os rótulos. Por exemplo: “Movimento forte / Tente isso em vez disso,” “Boa escolha / Considere isso,” ou “Sim / Não exatamente.”
Quer mais padrões de aprendizado reutilizáveis?
O Design Lab é uma biblioteca prática de padrões de interação gratuitos, trechos de código e notas de construção para designers de aprendizado.