Design Atlas
한국어
⌘ UX terms & laws

Selective Attention

선택적 주의

Focus on one thing hard enough, and something plainly visible slips right past unnoticed. Not because it was invisible — because attention was elsewhere.

Also known as: Inattentional blindness
···
html
<div class="stage">
  <div class="pane"><div class="tag">A · counting task</div>
    <div class="dots" id="dots"></div>
    <div class="mover" id="m1"></div>
  </div>
  <div class="pane"><div class="tag">B · just watching</div>
    <div class="mover" id="m2"></div>
    <div class="ping" id="ping">!</div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted);z-index:2}
.dots{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;padding:30px 14px}
.dots span{width:9px;height:9px;border-radius:50%;background:var(--accent-2)}
.mover{position:absolute;width:16px;height:16px;border-radius:4px;background:var(--accent);top:45%;animation:cross 3.2s linear infinite}
@keyframes cross{0%{left:-8%}100%{left:100%}}
.ping{position:absolute;left:50%;top:45%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--accent-2);color:#fff;display:grid;place-items:center;font:900 12px/1 monospace;opacity:0;animation:ping 3.2s linear infinite}
@keyframes ping{0%,44%{opacity:0}48%,58%{opacity:1;transform:scale(1.2)}68%,100%{opacity:0}}
js
const dots = document.getElementById('dots');
for (let i = 0; i < 18; i++) dots.appendChild(document.createElement('span'));

Daniel Simons and Christopher Chabris's famous 1999 "invisible gorilla" experiment made this vivid. Ask people to count basketball passes, and roughly half miss a person in a gorilla suit walking straight through the middle of the frame. When attention locks onto one task, the brain filters out unrelated stimuli entirely.

In UI, when a user is focused on a task — filling a form, checking out — a banner, error message, or success toast nearby can go completely unnoticed. Screen edges and familiar "ad" positions are already trained to be ignored (see: banner blindness), making them even easier to miss.

To cut through selective attention, important notices need to sit near the user's actual point of focus (close to the field being edited) and use a visual signal distinct from what they're already tuned out.

A stays focused on "count the red dots" while a blue shape crosses the screen unflagged; B, watching with no task, gets a notice ping on the same shape.

When to use

Use this when placing an error or success message. Put it near where the user's attention already is — a notice far from that point might as well not exist mid-task.