Judgment-heavy choices
Use when several options are defensible, but each creates a different operational consequence.
Design Lab Pattern
Decision Tradeoff Visualizer
A reusable interaction pattern that helps learners compare plausible decisions by showing how each choice affects speed, clarity, risk, trust, and effort.
Visible consequences
Learners see tradeoffs instead of receiving a simple correct or incorrect response.
HTML/CSS/JS
Works as a standalone web interaction, embedded resource, Rise block, or Storyline web object.
Why this pattern exists
Most workplace decisions are not clean multiple-choice moments.
In real work, people often choose between options that are all somewhat reasonable. One choice may be fast but risky. Another may build trust but require more effort. Another may reduce uncertainty but slow the workflow.
The Decision Tradeoff Visualizer turns that tension into the learning moment. Instead of telling learners whether they were right or wrong, it helps them see what their decision changes.
Live preview
Choose a response and compare the tradeoffs.
Scenario: A delivery partner reports that the app instructions are unclear before starting a time-sensitive route. You need to decide what support path to recommend.
Scenario
Support decision
What would you recommend first?
The person is ready to start, but they are unsure which app instruction applies. The route is time-sensitive, and guessing could create downstream confusion.
Balanced choice
Clarify before acting
This choice adds a small pause, but it improves clarity and reduces the risk of giving guidance based on the wrong assumption.
Speed
68
Clarity
92
Risk control
86
Trust
88
Effort fit
74
Coaching note
Useful support often starts by reducing ambiguity. A clarifying question can prevent a fast answer from becoming a costly one.
Design notes
Use this when the learning goal is better judgment, not answer recall.
Make the tradeoffs real.
Use dimensions that matter in the actual work, such as risk, trust, quality, speed, effort, confidence, or customer impact.
Avoid fake balance.
Not every choice needs to be equally valid. Some options can be weaker, but the feedback should explain why.
Coach the decision logic.
The point is not to reward the learner with a score. The point is to show what their decision changes.
How to customize it
Swap the scenario, options, metrics, and coaching notes.
Adapt this pattern for leadership decisions, customer support, safety, onboarding, troubleshooting, policy application, coaching conversations, or operational triage.
Write the scenario
Create a moment where more than one option feels plausible.
Choose the dimensions
Select 4 to 6 tradeoff dimensions that matter in the workflow.
Score each decision
Give each choice a distinct profile so consequences become visible.
Coach the logic
Explain the decision logic, not just the outcome.
Starter block
Copyable HTML, CSS, and JavaScript.
Use this starter block as a lightweight pattern for your own scenario-based decision interaction.
<div class="tradeoff-widget" data-tradeoff-widget>
<div class="tradeoff-question">
<p>Scenario</p>
<h3>What would you recommend first?</h3>
</div>
<div class="tradeoff-options">
<button type="button" data-choice="quick">Give a quick answer so they can keep moving.</button>
<button type="button" data-choice="verify">Ask one clarifying question first.</button>
<button type="button" data-choice="escalate">Escalate immediately.</button>
</div>
<div class="tradeoff-feedback">
<h4 data-title>Clarify before acting</h4>
<p data-body>This choice adds a small pause, but improves clarity and reduces risk.</p>
<div class="tradeoff-bars">
<div class="bar" data-metric="speed"><span>Speed</span><strong>68</strong><div><i style="width:68%"></i></div></div>
<div class="bar" data-metric="clarity"><span>Clarity</span><strong>92</strong><div><i style="width:92%"></i></div></div>
<div class="bar" data-metric="risk"><span>Risk control</span><strong>86</strong><div><i style="width:86%"></i></div></div>
</div>
</div>
</div>Design Lab
Build interactions that make decisions easier to understand.
Use this pattern when learners need to compare consequences, not memorize a perfect answer.
Back to Design Lab