F-pattern и Z-pattern чтения: как использовать в дизайне

Если за десять секунд посетитель не понял, что вы предлагаете и зачем оставаться — он закроет вкладку. Хорошая новость: за эти десять секунд он смотрит на страницу не хаотично. Eye-tracking-исследования давно описали два устойчивых паттерна сканирования — F и Z. Разберём, чем они отличаются и как ими пользоваться.

01Что такое F-pattern

F-паттерн возникает на страницах, плотно заполненных текстом: статьях, выдачах поисковика, длинных карточках товаров, лентах новостей. Взгляд идёт примерно так:

• Слева направо по верхней строке — читается заголовок или первая строка.
• Вниз по левому краю — взгляд сканирует начало строк.
• Вторая горизонтальная «перекладина» — обычно подзаголовок или важный фрагмент.
• Дальше — вертикальный спуск по левой стороне до конца контента.

Получается фигура, похожая на букву F. Правая часть страницы при таком сканировании почти не читается: посетитель ловит первые слова строки и решает, читать дальше или нет.

02Что такое Z-pattern

Z-паттерн возникает на лёгких страницах с малым количеством текста: лендингах, главных страницах, промо-баннерах. Взгляд идёт по диагонали:

• Слева направо по верхней линии — логотип и навигация.
• Диагональ вниз-влево — к центру или левой части первого экрана.
• Слева направо по нижней линии — к ключевому действию справа.

Z удобно ложится на блок, где слева — оффер, справа — кнопка действия, сверху — логотип, снизу — повторный CTA.

03Как выбрать, на какой паттерн опираться

Грубое правило:

• Если страница насыщена текстом (блог, каталог, статья) — F-паттерн.
• Если страница короткая и визуальная (лендинг, hero главной) — Z-паттерн.

На реальных сайтах часто сочетаются оба: первый экран — Z, а длинный текст ниже — F. Главное — осознанно решать, по какому паттерну смотрит посетитель в каждом блоке, а не «как нарисовалось».

04Куда поставить главное в первом экране

Применим теорию к практике. В Z-паттерне на лендинге работает такая раскладка:

• Верх-лево: логотип и короткий тег «что мы делаем».
• Верх-право: ссылка на контакты или телефон.
• Центр-лево: заголовок-оффер крупным шрифтом и подзаголовок.
• Низ-право: главная кнопка CTA — она логично замыкает движение взгляда.

Дополнительный материал по теме — статья «Первый экран сайта: что разместить, чтобы не закрыли».

05Как использовать F-паттерн в длинных текстах

В блоге, статье или длинной странице услуги посетитель «срезает» правую часть. Поэтому важное должно стоять в начале строки и в начале абзаца:

• Подзаголовки H2/H3 — конкретные, с ключевой мыслью в первых словах.
• Первое предложение каждого абзаца — самостоятельное и информативное (как тут).
• Списки с короткими первыми словами в каждом пункте.
• Жирные акценты — на смысловые слова, а не на середину строки.
• Не выравнивайте основной текст по ширине: рваный правый край помогает сканированию.

Такая структура поддерживает и SEO: поисковый робот тоже «видит» начало абзацев лучше, а посетитель дольше остаётся на странице. О подаче длинного контента — в материалах по контент-маркетингу.

06Где F и Z ломаются

Паттерны — не закон физики, а вероятностная модель. Они ломаются в нескольких случаях:

• Слишком пёстрый дизайн с десятком ярких пятен — взгляд скачет хаотично.
• Длинные «безсенсорные» подзаголовки вроде «Наши преимущества» — глаз их пропускает.
• Карусели и слайдеры на первом экране — пока кадр сменился, посетитель уже ушёл.
• Мобильный экран — там паттерны вырождаются в простой вертикальный скан. На мобильном важна именно последовательность блоков сверху вниз.

07Чек-лист для своей страницы

• В первом экране есть одна главная мысль и одно главное действие.
• Заголовки несут смысл с первых слов.
• Главный CTA попадает в естественную траекторию взгляда: правый низ блока или конец строки.
• В длинном тексте подзаголовки видны при беглом скролле.
• На мобильном порядок блоков сверху вниз отражает приоритеты.

Эту разметку мы закладываем при проектировании сайтов и лендингов в составе услуг «Разработка сайтов» и «Дизайн и аналитика».

Официальная документация по теме — Справка Яндекс.Вебмастера.