Es hält das Feedback nahe an der Entscheidung.
Lernende müssen nicht bis zum Ende der Erfahrung warten, um zu verstehen, warum eine Wahl funktioniert oder nicht funktioniert.
Design Lab-Muster
Genau / Nicht genau Feedbackkarten
Ein leichtgewichtiges Interaktionsmuster für Lernsituationen, in denen Sie das Urteil leiten, nützliche Entscheidungen verstärken und Lernende umleiten möchten, ohne dass die Erfahrung wie ein starrer Test wirkt.
Am besten geeignet für
Feedback
Funktioniert in
Rise
Bautyp
HTML/CSS/JS
Komplexität
Leicht
Wann man es verwenden sollte
Verwenden Sie dies, wenn das Ziel Anleitung ist, nicht eine Fangfrage-Bewertung.
Traditionelles richtig/falsch Feedback kann zu direkt wirken, wenn das Lernziel Urteil, Reflexion oder Verhaltensänderung ist.
Dieses Muster gibt Lernenden eine klare Antwort, ohne jede Wahl in einen Bestehen/Nichtbestehen-Moment zu verwandeln. „Genau“ verstärkt die nützliche Entscheidung. „Nicht genau“ leitet den Lernenden mit einem sanfteren Ton und einem klareren nächsten Schritt um.
Es funktioniert besonders gut für Szenarien, Politikinterpretationen, Dienstentscheidungen, operationale Urteile und Coaching-ähnliche Lernsituationen.
Live-Vorschau
Probiere die Interaktion aus.
Wählen Sie eine Option aus, um Feedback anzuzeigen. Das Muster ist absichtlich einfach, damit es in Rise, Storyline oder einem benutzerdefinierten Webblock angepasst werden kann.
Szenario
Ein Lernender ist sich unsicher, welchen nächsten Schritt er unternehmen soll. Was sollte die Erfahrung tun?
Genau
Verstärken Sie die nützliche Entscheidung.
Diese Antwort unterstützt den Lernenden im Moment des Bedarfs. Sie reduziert Reibung, gibt einen klaren nächsten Schritt und hält die Erfahrung auf Handlung fokussiert.
Nicht genau
Leiten Sie um, ohne die Leute abzuwürgen.
Diese Option kann Informationen bereitstellen, fügt jedoch im falschen Moment Aufwand hinzu. Ein besseres Muster leitet den Lernenden zur nächsten nützlichen Handlung.
Es vermeidet eine übermäßige Bestrafung des Lernenden.
„Nicht genau“ gibt Ihnen Raum, um umzuleiten, ohne dass die Interaktion wie ein Testfehler wirkt.
Es unterstützt das urteilsgestützte Lernen.
Das Muster ist nützlich, wenn das Ziel darin besteht, Entscheidungsfindung, Interpretation oder Verhalten zu gestalten, anstatt das Erinnern zu überprüfen.
Den Code kopieren
Rise-freundlicher HTML/CSS/JS Starterblock.
Fügen Sie dies in einen Codeblock, eine externe HTML-Seite oder eine gehostete Interaktion ein. Aktualisieren Sie das Szenario, die Optionen, die Feedbacksprache und die Farben, um Ihr Projekt anzupassen.
<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>Passe es an
Passen Sie das Muster an den Lernmoment an.
Ersetzen Sie das Beispiel-Szenario durch Ihren eigenen Entscheidungspunkt. Halten Sie die Optionen kurz und handlungsorientiert.
Verwenden Sie „Genau“, wenn Sie eine starke Entscheidung verstärken möchten. Verwenden Sie „Nicht genau“, wenn die Wahl verständlich ist, aber eine Umleitung benötigt.
Sie können auch die Bezeichnungen umbenennen. Zum Beispiel: „Starker Schritt / Probieren Sie stattdessen dies“, „Gute Entscheidung / Berücksichtigen Sie dies“ oder „Ja / Nicht ganz.“
Willst du mehr wiederverwendbare Lernmuster?
Design Lab ist eine praktische Bibliothek mit kostenlosen Interaktionsmustern, Code-Schnipseln und Bauhinweisen für Lern-Designer.