Design Atlas
한국어
⌘ UX terms & laws

Banner Blindness

배너 블라인드니스

Anything that looks like an ad slot gets scanned right past — regardless of what's actually in it.

Also known as: Ad blindness
···
html
<div class="page">
  <div class="banner">Important notice — read this</div>
  <div class="ln title"></div>
  <div class="ln w95"></div>
  <div class="ln w80"></div>
  <div class="ln w60"></div>
  <div class="ln w70"></div>
  <div class="dot" id="dot"></div>
</div>
css
.page{position:relative;width:88%;height:86%;display:flex;flex-direction:column;gap:9%}
.banner{height:16%;border-radius:6px;background:repeating-linear-gradient(45deg,var(--accent-2),var(--accent-2) 6px,color-mix(in srgb,var(--accent-2) 70%,#000) 6px,color-mix(in srgb,var(--accent-2) 70%,#000) 12px);color:#fff;font:700 11px/1 sans-serif;display:flex;align-items:center;padding-left:10px;opacity:.85}
.ln{height:9%;border-radius:3px;background:var(--line)}
.title{width:60%;height:12%;background:var(--muted);opacity:.5}
.w95{width:95%}.w80{width:80%}.w60{width:60%}.w70{width:70%}
.dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,rgba(91,91,247,.9),rgba(91,91,247,0) 70%);animation:scan 4.4s ease-in-out infinite}
@keyframes scan{
  0%{left:8%;top:34%}
  15%{left:90%;top:34%}
  28%{left:8%;top:50%}
  42%{left:75%;top:50%}
  55%{left:8%;top:66%}
  68%{left:55%;top:66%}
  80%{left:8%;top:82%}
  92%,100%{left:60%;top:82%}
}

First documented in Jan Panero Benway and David M. Lane's 1998 eye-tracking study, "Banner Blindness: Web Searchers Often Miss 'Obvious' Links." Users learn the position and shape typical of ads — a horizontal strip up top, a sidebar rectangle — and judge that zone irrelevant to what they're looking for, so their eyes never even land there.

The problem: this learned avoidance applies just as strongly to genuinely important content. Put an announcement in a banner-shaped slot up top, and it gets the same treatment as an ad — nobody reads it. NN/g's repeated studies have found this holding steady for decades.

The fix is making important messages not look like ad space — embed them in the content flow, in body typography, in a shape that isn't banner-like.

The scan path (dot) below skips the flashy top banner entirely and stays in the body text — even though the banner's copy is a genuinely important notice.

When to use

Think twice before putting a critical notice in a banner shape. If it truly needs to be read, embed it in the content flow using body typography instead.