Design Atlas
한국어
⌘ UX terms & laws

F-Pattern

F 패턴

On text-heavy pages, eyes scan wide across the top, then narrower across a second line, then drift down the left edge — tracing an F.

Also known as: F-shaped reading pattern
···
html
<div class="page">
  <div class="ln title"></div>
  <div class="ln w95"></div>
  <div class="ln w40"></div>
  <div class="ln w80"></div>
  <div class="ln w25"></div>
  <div class="ln w60"></div>
  <div class="ln w20"></div>
  <div class="ln w55"></div>
  <div class="dot" id="dot"></div>
</div>
css
.page{position:relative;width:88%;height:82%;display:flex;flex-direction:column;gap:11%;padding-top:2%}
.ln{height:9%;border-radius:3px;background:var(--line)}
.title{width:70%;height:13%;background:var(--muted);opacity:.5}
.w95{width:95%}.w80{width:80%}.w60{width:60%}.w55{width:55%}.w40{width:40%}.w25{width:25%}.w20{width:20%}
.dot{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,rgba(242,92,138,.9),rgba(242,92,138,0) 70%);animation:scan 5s ease-in-out infinite}
@keyframes scan{
  0%{left:5%;top:6%}
  12%{left:92%;top:6%}
  22%{left:5%;top:20%}
  32%{left:45%;top:20%}
  40%{left:5%;top:35%}
  50%{left:5%;top:50%}
  60%{left:5%;top:63%}
  70%{left:5%;top:76%}
  85%{left:5%;top:90%}
  100%{left:5%;top:90%}
}

First reported by the Nielsen Norman Group from 2006 eye-tracking research. People don't read every word — they scan the headline and first line widely, then narrower lines, then drift down the left edge only. Plotted as a heatmap, it traces an F (or E) shape.

The practical rule: **put the important words at the start of each line/paragraph, and left-align scannable headings and bullets.** This pattern shows up strongly on dense text pages (news, blogs, search results) and weakens on card- or image-heavy layouts.

The red dot below retraces that heatmap path — wide across the top, narrowing, then dropping straight down the left edge.

When to use

Use this when ordering information on text-dense pages like news, blogs, or search results. Front-load the key words in every line.