Открыли эту статью. Прокрутили вниз. Глаза зацепились за подзаголовок, потом за следующий, остановились на куске текста, который показался интересным. Так читают почти всё в интернете. И вы тоже.

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

Сначала факт, который меняет подход к любой странице

Nielsen Norman Group много лет изучает айтрекингом, как люди читают с экрана.
И обнаружила: когда страница построена правильно, пользователи смотрят почти исключительно на подзаголовки. Тепловая карта движения глаз выглядит как горизонтальные полосы с пропусками, будто разрез слоёного пирога. Так паттерн и назвали — layer‑cake. Впервые его задокументировали ещё в 2004 году, и с тех пор он никуда не делся.

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

Главный вывод исследования: layer‑cake — самый эффективный паттерн сканирования из всех, если не считать чтения каждого слова подряд. Нужное находится за секунды. F‑паттерн, наоборот, включается по умолчанию, когда зацепиться не за что: информация теряется без следа, метрики проседают без видимой причины.

И всё это решается на этапе вёрстки контента. Не редизайном, не новой дизайн‑системой. Подзаголовками.

Почему подзаголовки — это интерфейс, а не оформление

Я прихожу в проект, провожу UX‑аудит и вижу одно и то же: подзаголовки в тексте есть, но они как будто декоративные. Шрифт чуть крупнее основного, цвет тот же, отступы маленькие. Глазу зацепиться не за что, и пользователь съезжает в F‑паттерн, упуская смысл.

Подзаголовок работает в тексте так же, как глобальная навигация на сайте. Навигация позволяет быстро понять, какие разделы есть и куда идти. Подзаголовки делают то же самое внутри одной страницы: показывают структуру и ведут к нужному фрагменту, не заставляя читать всё подряд.

Хороший подзаголовок отвечает сразу на два вопроса:

— стоит ли читать дальше этот блок; — и что именно я узна́ю, если стану читать.

Не отвечает ни на один — значит, это просто украшение. Пользователь его проигнорирует, как игнорирует баннер сбоку.

Что делает подзаголовок видимым

В оригинальном исследовании Nielsen Norman Group перечислены ровно те приёмы, которые мы и так знаем, но почему‑то редко применяем последовательно:

  • другой кегль (крупнее основного текста, заметно крупнее);

  • жирное начертание;

  • другая гарнитура, если в макете больше одного шрифта;

  • другой цвет, но без агрессии — иначе подзаголовок начнут принимать за рекламу;

  • достаточный воздух сверху и минимальный снизу, чтобы блок текста зрительно «прилипал» к своему подзаголовку.

Закон близости из гештальта тут работает буквально: что близко расположено, то и вместе. Если расстояние от подзаголовка до текста под ним такое же, как до текста над ним, читатель не понимает, что к чему относится. Застрянет, перепроверит дважды, потеряет темп.

Частая ошибка в другую сторону — слишком яркие или слишком крупные подзаголовки. Кажется же: чем заметнее, тем лучше. На практике пользователь принимает их за рекламные блоки и автоматически отводит взгляд. Баннерная слепота, только на собственный контент.

Пустые ярлыки, или почему «Особенности» никто не читает

Допустим, визуально всё в порядке: подзаголовки выделены, отбивки правильные. А пользователь всё равно скользит мимо. Слова неправильные.

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

Хороший подзаголовок:

  • описывает то, и только то, что есть в блоке текста под ним. Не шире, не у́же. Если раздел про оплату — не пишите «Финансы». Если про оплату картой и переводом — не пишите просто «Оплата картой»;

  • начинается с информативного слова. Глаз цепляется за первые два‑три слова, туда и идут самые важные. «Доставка по России занимает три дня» лучше, чем «Сроки и условия доставки»;

  • написан на языке пользователя, а не отдела. «Что делать, если посылка не пришла» работает. «Урегулирование спорных ситуаций по неполученным отправлениям» — нет.

Когда подзаголовки построены так, у страницы появляется собственная мини‑навигация. Пользователь сканирует её, как оглавление, и идёт точно в тот блок, который ему нужен.

Слоёный пирог за пределами текста: карточки, сетки, календари

Layer‑cake живёт не только в статьях. Любая страница со смысловыми блоками — карточки товаров, сетка вакансий, список встреч в календаре — раскладывается по тому же принципу.

Что для этого нужно:

  • одинаково оформленные блоки одного типа: карточка товара, плитка с фото, баннер;

  • достаточный воздух между блоками, чтобы они зрительно отделялись друг от друга;

  • подпись, привязанная к своему блоку, а не висящая между двух соседних.

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

Когда блоки чётко сгруппированы, пользователь сканирует страницу серией мини‑пирогов. Каждый блок — отдельный слой. Он быстро находит свой и дочитывает его внимательно.

Как я думаю об этом через медицину

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

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

Я восемь лет работала врачом и знаю, как ценится коллега, который пишет историю по‑человечески. Не из вежливости же. От ясности твоей записи зависит решение, которое примут после тебя.

В дизайне я обнаружила ту же механику. Веб‑страница — та же история болезни. Пользователь приходит со своим вопросом, у него мало времени и мало сил. Внимательно читать ваш текст он не будет. Пробежит по подзаголовкам, как дежурный врач по моей записи, и сделает свой вывод.

Не заложили структуру — вывод будет неправильный. И пользователь уйдёт.

«Крышу лучше всего чинить, когда светит солнце». Я наткнулась на эту фразу у Питера Аттии, он цитирует Кеннеди, и с тех пор повторяю её в каждом разговоре про дизайн. Хорошая структура страницы — починка крыши до дождя. Подзаголовки делаются правильно один раз, а работают на вас годами.

Что сделать с этим прямо сегодня

Откройте любую длинную страницу своего продукта. Промотайте её на скорости, на которой вы реально просматриваете чужие сайты. Не вчитывайтесь.

Спросите себя:

  • понятно ли по подзаголовкам, что есть на странице, без чтения тела текста;

  • зрительно ли подзаголовки отделены от основного текста или сливаются с ним;

  • описывает ли каждый подзаголовок именно тот блок, который под ним, без обмана и пустот.

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

Чинится это за день. Без редизайна, одним вниманием к структуре.

Если вам такое интересно — у меня есть Telegram‑канал «Kikodoc.design», где я разбираю UX, инклюзивный дизайн и здоровье IT‑специалистов через медицинскую призму. Подписывайтесь.

А какой подзаголовок на вашем продукте сегодня врёт о том, что под ним?