Source from repo

User Interface Wiki

Living wiki of UI design patterns and best practices built with Fumadocs, Next.js, and Base UI components.

raphaelsalajaGitHub raphaelsalajaSource repo Original GitHub link Publisher page

Files

157

Skill

n/a

Size

184.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/ux-zeigarnik-show-incomplete.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown37 linesFree

rules/ux-zeigarnik-show-incomplete.md

1---
2title: Show Incomplete State to Drive Completion
3impact: MEDIUM
4tags: ux, zeigarnik, incomplete, engagement
5---
6 
7## Show Incomplete State to Drive Completion
8 
9People remember incomplete tasks better than completed ones. Use this to drive engagement.
10 
11**Incorrect (no indication of incomplete profile):**
12 
13```tsx
14function Dashboard() {
15  return <DashboardContent />;
16}
17```
18 
19**Correct (incomplete state visible):**
20 
21```tsx
22function Dashboard({ profile }) {
23  return (
24    <div>
25      {!profile.isComplete && (
26        <Banner>
27          Complete your profile — {profile.completionPercent}% done
28        </Banner>
29      )}
30      <DashboardContent />
31    </div>
32  );
33}
34```
35 
36Reference: [Zeigarnik Effect](https://lawsofux.com/zeigarnik-effect/)
37

Preparing the source view

User Interface Wiki

rules/ux-zeigarnik-show-incomplete.md