Zeigarnik Effect

People remember uncompleted or interrupted tasks better than completed tasks.

Why it matters

Incomplete tasks create psychological tension that compels people to return and finish. When apps show a half-filled progress bar, users feel driven to complete it, even when it wasn't their original intent.

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

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.