Важный контент перекрыт другими блоками

Критичность проблемы: Низкая | Сложность внедрения: Средняя | Встречаемость: Средняя

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

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

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

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

Когда критично, а когда нет

Критично:

• Интернет-магазины, бронирование, банки, доставки: закрыты цена, CTA, способы оплаты, ошибки формы.
• Госуслуги, медицина, страхование: перекрыты инструкции, статусы, подтверждения.
• Кабинеты B2B и SaaS: закрыты таблицы, фильтры, важные метрики.
• Мобильные экраны, много фиксированных элементов, появление клавиатуры.
• Шаги с ограниченным временем или высокой ставкой ошибки.

Не критично:

• Медиа и блоги, где перекрытие затрагивает второстепенные блоки и не закрывает навигацию и текст.
• Лэндинги, где верхний слой не закрывает УТП и CTA и показывается после взаимодействия.
• Внутренние сервисы с обученной аудиторией, где перекрывается неключевой контент.
• Страницы без целевого действия и без ключевых показателей.

Что об этом говорят другие пользователи

Когда у вас важная информация оказывается перекрытой, что именно закрывается, на каких устройствах и в какой момент задачи это происходит?

Бесполезные ответы

• Иногда что-то мешает, но не помню где.
• У меня такой проблемы нет, пользуюсь редко.
• Думаю, это из-за интернета.

Полезные ответы

• Страница товара: при прокрутке вниз шапка и баннер акции закрывают цену и кнопку «Купить». Повторяется каждый раз.
• Оформление заказа: клавиатура перекрывает поле «Адрес» и текст ошибки. Чтобы увидеть, приходится сворачивать клавиатуру.
• Каталог: при открытии фильтров с правой стороны панель остаётся на экране долю секунды после закрытия и не даёт кликнуть по карточке.
• Переход по якорю из оглавления ведёт к заголовку, который уходит под липкий хедер. Не видно начала раздела.
• На шагах оплаты всплывает чат-виджет поверх кнопки «Оплатить». Закрываю чат — через пару секунд появляется снова.

Решение проблемы

• Уберите лишние слои. Составьте список всех fixed/sticky/absolute-элементов: шапка, баннеры, куки, попапы, чат, виджеты, фиксированный футер.
• Введите порядок слоёв. Определите шкалу z-index. Один уровень для модалок, ниже — шапка, ещё ниже — виджеты. Запретите произвольные z-index в стилях.
• Зарезервируйте место под липкие элементы. Добавьте body padding-top равный высоте шапки. Для якорей используйте scroll-margin-top.
• Не закрывайте CTA и ошибки. Спрячьте промо и виджеты на критических шагах (корзина, оплата, подтверждение). Чат запускайте по клику или с задержкой после первого взаимодействия.
• Настройте модалки. Фон делайте inert/aria-hidden, обеспечьте видимую и доступную кнопку закрытия. Не показывайте несколько слоёв одновременно.
• Исправьте ввод на мобильных. Учитывайте динамическую высоту окна (svh/dvh). Прокручивайте поля в видимую область при фокусе. Не прячьте подсказки под клавиатуру.
• Проверьте контраст и перекрытия. Не кладите полупрозрачные слои на текст. Затемняйте фон, но не текст.
• Пройдите ключевые сценарии на реальных устройствах. Минимум: два айфона, два андроида, Safari/Chrome/Edge, портрет/альбом, с включённой клавиатурой.
• Добавьте метрики. Отслеживайте rage/dead clicks, закрытия виджетов,出现 попапов на шагах, где это запрещено. Смотрите реплеи сессий.
• Учитывайте SEO. Не показывайте навязчивые интерстициалы на мобильных, чтобы не терять трафик.
• Зафиксируйте правила показа. Где, когда и кому показываются баннеры и виджеты. На критических шагах — запрещены.

Гипотезы для роста конверсии

• Если скрыть чат-виджет и промо-баннер на шагах корзины и оплаты, то конверсия в оплату может увеличиться за счёт того, что CTA и ошибки останутся видимыми.
• Если добавить scroll-margin-top для заголовков и полей форм, то конверсия в завершение форм может увеличиться за счёт того, что якоря и ошибки не будут уходить под шапку.
• Если запускать попапы только после первого осмысленного действия, то конверсия в просмотр ключевого контента может увеличиться за счёт того, что пользователи не теряют фокус.
• Если резервировать место под липкую шапку на мобильных, то конверсия в клик по основным кнопкам может увеличиться за счёт того, что элементы не окажутся перекрытыми.
• Если отключить повторный показ оверлеев в пределах одной сессии, то конверсия в целевое действие может увеличиться за счёт снижения раздражения и прерываний.