Goal-Gradient Effect

The tendency to approach a goal increases with proximity to the goal.

Why it matters

In a classic study, customers given a 'buy 10 get 1 free' card with 2 stamps already filled in completed the card faster than those starting from zero, even though the actual work required was identical.

Key Principles

1Show users how close they are to completing a task.
2Give users a head start (endowed progress) to increase motivation.
3Use progress bars that show real advancement.
4Accelerate the experience as users near completion.

Try It

Click each level to see how proximity to the goal affects motivation.

StartGoal

No progress yet. Motivation is lowest at the start.

Code Pattern

tsx

1// ✅ Good: Loyalty card with endowed progress
2function LoyaltyCard({ stamps }: { stamps: number }) {
3  const total = 10;
4  const endowed = 2; // Free head start
5  const progress = stamps + endowed;
6
7  return (
8    <div>
9      <p className="text-sm mb-2">
10        {progress} of {total} stamps ({total - progress} to go!)
11      </p>
12      <div className="flex gap-1">
13        {Array.from({ length: total }).map((_, i) => (
14          <div
15            key={i}
16            className={`w-8 h-8 rounded-full border-2 ${
17              i < progress
18                ? "bg-amber-500 border-amber-600"
19                : "border-gray-300"
20            }`}
21          />
22        ))}
23      </div>
24    </div>
25  );
26}

Endowed progress (a head start) significantly increases completion rates.

AI Analyzer

Analyzing against Goal-Gradient Effect

Your code and images are sent directly to the AI for analysis and are never stored or logged. This tool is for educational purposes only.