Zeigarnik Effect

People remember uncompleted or interrupted tasks better than completed tasks.

Key Principles

1Show progress indicators to encourage task completion.
2Use checklists to create a sense of unfinished work.
3Break onboarding into visible, numbered steps.
4Leverage incomplete states to drive user engagement.

Try It

Click through the steps. Notice how the incomplete state creates a pull to finish.

2 of 5 complete

Code Pattern

tsx

1// ✅ Good: Progress indicator showing completion state
2<div className="space-y-2">
3  <div className="flex justify-between text-sm">
4    <span>Profile completion</span>
5    <span>3 of 5 steps</span>
6  </div>
7  <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
8    <div
9      className="h-full bg-blue-600 rounded-full transition-all"
10      style={{ width: "60%" }}
11    />
12  </div>
13  <ul className="space-y-1 text-sm">
14    <li className="line-through text-gray-400">✓ Add profile photo</li>
15    <li className="line-through text-gray-400">✓ Set display name</li>
16    <li className="line-through text-gray-400">✓ Add bio</li>
17    <li>○ Connect social accounts</li>
18    <li>○ Verify email</li>
19  </ul>
20</div>

Show visible progress to leverage the human need to complete unfinished tasks.

AI Analyzer

Analyzing against Zeigarnik Effect