Choice Overload — Design Atlas

<div class="stage"> <div class="pane"><div class="tag">A · 24</div> <div class="grid g24" id="g24"></div> <div class="cur" id="c1">➤</div> </div> <div class="pane"><div class="tag">B · 6</div> <div class="grid g6" id="g6"></div> <div class="cur" id="c2">➤</div> </div> </div>

.stage{width:94%;height:88%;display:flex;gap:4%} .pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);overflow:hidden;padding:26px 8px 10px} .tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)} .grid{display:grid;gap:4px;height:100%} .g24{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr)} .g6{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)} .grid span{border-radius:5px;background:var(--line)} .g6 span:nth-child(4){background:var(--accent-3)} .cur{position:absolute;font-size:13px;color:var(--fg);transform:rotate(-45deg)} #c1{animation:hunt 3.6s ease-in-out infinite} #c2{animation:pick 1.2s ease-out infinite} @keyframes hunt{0%,100%{left:10%;top:85%}15%{left:70%;top:20%}30%{left:30%;top:50%}45%{left:80%;top:70%}60%{left:20%;top:20%}75%{left:55%;top:40%}90%{left:10%;top:85%}} @keyframes pick{0%{left:10%;top:85%}80%,100%{left:60%;top:55%}}

const g24 = document.getElementById('g24'); for (let i = 0; i < 24; i++) g24.appendChild(document.createElement('span')); const g6 = document.getElementById('g6'); for (let i = 0; i < 6; i++) g6.appendChild(document.createElement('span'));

Popularized by psychologists Sheena Iyengar and Mark Lepper's 2000 "jam study." A supermarket display of 24 jams drew more browsers than a 6-jam display, but the 6-jam table converted to actual purchases far more often. Author Barry Schwartz brought the idea to a wider audience in "The Paradox of Choice" (2004).

Where Hick's Law is about speed — more options, slower decisions — choice overload goes further: people can abandon the decision entirely, or feel less satisfied afterward, second-guessing whether a better option was buried in the list.

In the demo, A's cursor keeps circling a 24-item shelf and never completes a pick before resetting. B picks confidently from 6.

When to use

Use this when deciding how many products, plans, or filters to surface. Test the assumption that "showing more sells more" against real conversion data.