Peak-End Rule

피크엔드 법칙

People judge an experience by its most intense moment and its ending — not by the average of every moment.

···
html
<svg class="chart" viewBox="0 0 100 40"><path class="avg" d="M2,26 L98,26"/><path class="line" id="ln" d="M2,30 C 14,32 20,10 28,8 C 38,6 42,30 52,32 C 62,34 68,20 78,18 C 86,16 92,14 98,4"/><circle id="peak" cx="30" cy="7" r="2.4"/><circle id="end" cx="98" cy="4" r="2.4"/></svg>
css
.chart{width:88%;height:70%}
.avg{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 2}
.line{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:180;stroke-dashoffset:180;animation:draw 3.2s ease-in-out infinite}
circle{fill:var(--accent-2);opacity:0}
#peak{animation:star 3.2s ease-in-out infinite}
#end{animation:star 3.2s ease-in-out infinite .1s}
@keyframes draw{0%{stroke-dashoffset:180}70%,100%{stroke-dashoffset:0}}
@keyframes star{0%,75%{opacity:0;r:1}85%,95%{opacity:1;r:3}100%{opacity:1;r:2.4}}

Established by psychologist Daniel Kahneman and colleagues in 1990s colonoscopy and cold-water experiments. Total duration barely affects how an experience is remembered — only the peak (best or worst moment) and the ending do.

That's why, when designing onboarding, checkout, or refund flows, a mediocre middle matters far less than **investing in the final screen** (a completion celebration, a genuine thank-you). It's the same reason theme parks close the day with fireworks.

The line below traces a bumpy experience; only the peak and the end get a star. The dashed average line stays low, yet the remembered rating still comes out high.

When to use

Prioritise design budget on the final screen of any long flow (onboarding, checkout, a survey). It moves the remembered impression far more than smoothing minor friction in the middle.