Padrão do Design Lab
Cenário Guiado Bloco de Escolha
Um padrão de interação leve para momentos de aprendizado baseados em cenários, onde os aprendizes escolhem uma resposta, veem feedback imediato e entendem por que uma decisão funciona melhor que outra.
Quando usá-lo
Use isso quando os aprendizes precisam praticar julgamento, não memorizar fatos.
As escolhas de cenário são úteis quando os aprendizes precisam tomar decisões em contexto. Em vez de pedir que eles recordem informações, esse padrão pede que escolham o que fariam a seguir.
O feedback aparece imediatamente abaixo da escolha selecionada, mantendo a resposta conectada à decisão do aprendiz.
Isso funciona bem para momentos de atendimento ao cliente, decisões de segurança, conversas de coaching, julgamento operacional e qualquer situação em que os aprendizes precisem comparar opções.
Visualização ao vivo
Experimente a interação.
Selecione uma resposta para revelar o feedback diretamente abaixo da escolha. Isso mantém o aprendiz focado na decisão que acabou de tomar.
Cenário
Um aprendiz está prestes a começar uma tarefa, mas percebe que algo não corresponde ao processo esperado. O que eles devem fazer primeiro?
Isso mantém o feedback em contexto.
Os aprendizes veem a resposta diretamente abaixo da escolha que selecionaram, o que ajuda a conectar o feedback à decisão.
Isso apoia uma melhor tomada de decisão.
A interação ajuda os aprendizes a comparar opções e entender por que uma resposta é mais forte que outra.
Parece mais leve do que um questionário.
O padrão pode guiar os aprendizes sem fazer a experiência parecer uma avaliação formal ou um momento de passar/falhar.
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, as escolhas e a linguagem do feedback para corresponder ao seu momento de aprendizado.
<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>Personalize isso
Torne o cenário específico para a decisão que os aprendizes precisam tomar.
Substitua o cenário de exemplo por um momento realista do trabalho do seu aprendiz. As melhores escolhas de cenário devem parecer plausíveis, não obviamente ridículas.
Mantenha o feedback curto e útil. Explique por que a escolha funciona ou por que cria fricção.
Você também pode mudar o tom de coaching para conformidade, operações, segurança, atendimento ao cliente ou integração, dependendo do contexto.
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.