Твой экран никто не читает. Вот почему — и как это поменять

## Как на самом деле двигается взгляд

Есть два основных паттерна сканирования.

F-паттерн — на текстовых страницах. Взгляд идёт горизонтально по верхней части, потом ещё раз горизонтально чуть ниже, но уже короче, потом вертикально вниз по левому краю. Правая часть экрана и нижние абзацы почти не читаются.

Z-паттерн — на страницах с визуальным контентом. Взгляд идёт по диагонали: левый верх → правый верх → левый низ → правый низ. Хорошо работает для лендингов и маркетинговых страниц.

Важный нюанс: F-паттерн — это не закон природы. Это симптом плохо спроектированной иерархии. Если дизайн не направляет взгляд, пользователь переключается в режим быстрого сканирования и проходит по F.

Хорошая иерархия ломает F-паттерн и заставляет взгляд останавливаться там, где нужно.

## Почему большинство экранов не работают на сканирование

Есть несколько типичных причин.

Всё одинакового веса. Заголовки не сильно крупнее подзаголовков, подзаголовки почти не отличаются от основного текста. Взгляду не за что зацепиться. Это одна из самых частых проблем в AI-генерации: модели выстраивают формально правильную иерархию H1 → H2 → body, но без достаточного визуального контраста между уровнями.

Важное — не в начале строки. По F-паттерну первые слова каждой строки читаются лучше, чем то, что идёт дальше. Если абзац начинается с вводного слова — «Также», «Кроме того», «Следует отметить» — ключевое содержание в середине будет потеряно.

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

Слишком много акцентов. Bold везде, несколько акцентных цветов, подчёркивания. Когда всё выделено — ничто не выделяется. Акцент работает только на контрасте с нейтральным фоном.

## Как это исправить

### Три уровня типографики — и они должны заметно отличаться

Рабочая система для мобильного экрана:

На десктопе H1 от 36px. Главное правило: если убрать заголовки и экран выглядит примерно одинаково — иерархия не работает.

### Ключевые слова — в начало

По F-паттерну начало строки читается лучше всего. Это значит, что ключевое слово должно стоять первым — не после вводной конструкции.

Плохо:

Для удобства командной работы вы можете использовать...

Хорошо:

Командная работа — без лишних инструментов

Плохо:

Также стоит отметить, что скорость загрузки...

Хорошо:

Скорость загрузки — меньше 2 секунд

### Разбивайте текст визуальными якорями

Длинный блок без прерываний пользователь пробежит взглядом и уйдёт. Нужны точки остановки.

Что работает как якорь:

• подзаголовок каждые 3–5 абзацев
• выделение ключевого слова bold — не больше одного-двух на абзац
• короткий список вместо перечисления через запятую
• callout-блок с важным тезисом

Что не работает: подчёркивание без ссылки, italic на весь абзац, выделение цветом случайных слов.

### Тест на сканируемость

Простая проверка: закройте весь текст, оставив только заголовки и первые слова каждого абзаца. Понятна ли суть страницы?

Если да — сканируемость хорошая. Если нет — заголовки декоративные, а не смысловые.

## Отдельно про мобильные экраны

На мобильном F-паттерн сохраняется, но зоны внимания смещаются.

Строки короче — значит, первые слова ещё важнее. На узком экране пользователь видит меньше слов в строке, и начало строки получает ещё больше внимания.

Скролл быстрее — контент мелькает. У каждого блока меньше времени зацепить взгляд.

Thumb zone — зона комфортного касания большим пальцем — это нижняя центральная часть экрана. Основной CTA лучше ставить туда, а не в верхний угол.

## Как проверять экраны после генерации в AI-инструментах

Figma Make и Google Stitch генерируют аккуратные экраны, но иерархия в них часто слабее, чем кажется. Модель знает, что заголовок должен быть крупнее — но не знает, насколько крупнее нужно в вашем случае.

После генерации проверяйте три вещи.

Тест размытия. Размойте скриншот или отойдите на расстояние вытянутой руки. Что выделяется? Если иерархия не читается на размытом — она недостаточно контрастная.

Тест заголовков. Прочитайте только заголовки и подзаголовки. Понятна ли структура и суть страницы?

Тест первых слов. Пройдитесь по первым словам каждого абзаца и пункта. Они несут смысл или это вводные конструкции?

## Итог

Пользователи сканируют — и это нельзя изменить. Можно только проектировать под это.