Товары ниже сгиба: как исправить первый экран категории

На минимальном разрешении ПК (например, 1366×768) верхняя часть категории занята шапкой, крупным баннером и блоком фильтров. В зоне первого экрана не появляется ни одна карточка товара. Пользователь видит рекламные элементы и навигацию, но основная задача — быстро начать просмотр ассортимента — блокируется.

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

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

Критично:

• Интернет‑магазины и маркетплейсы, где основной сценарий — листать каталог и быстро находить товар.
• B2B‑каталоги с большим ассортиментом, когда список — ключевой шаг к лиду.
• Акционные категории, где важно показать предложения сразу; баннер закрывает товары, теряется импульс покупки.
• Проекты с высоким трафиком на ноутбуках 1366×768 и 1280×720, когда первый экран решает.

Не критично:

• Узкие категории с 1–3 товарами, где главное — описание и CTA над списком.
• Сайты, где первичен поиск: пользователи сразу вводят запрос, а не листают.
• Контентные страницы‑категории, заточенные под SEO и ознакомление, где карточки ниже — осознанный паттерн.
• Профессиональные сервисы, где фильтры — основной инструмент, а список вторичен.

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

Насколько удобно, когда на минимальном разрешении ПК в категории товаров первый экран не содержит карточек? Что вы делаете в этой ситуации и в какой момент решаете уйти или продолжить выбор?

Бесполезные ответы пользователей

• Нормально, привык скроллить.
• У меня всё отображается, не вижу проблемы.
• Зашёл, посмотрел баннер и ушёл.

Полезные ответы пользователей

• На 1366×768 вижу только шапку, баннер и фильтры; думаю, что товаров нет, закрываю вкладку через 3–5 секунд.
• Делаю один скролл, если товаров нет сразу — ухожу. С сортировкой не взаимодействую, её не видно.
• Баннер занимает почти весь экран, а липкая шапка съедает ещё место. На 90% масштабе первый товар появляется, но читать неудобно.
• Хочу видеть хотя бы 2 карточки на первом экране. Иначе кажется, что это промо‑страница, а не каталог.
• Переход на другую категорию не помогает: везде одно и то же — много промо, мало товаров.

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

• Сформулировать целевое состояние: на 1366×768 в первом экране должны быть видны минимум 1–2 карточки товара без скролла.
• Урезать вертикальные «пожиратели» пикселей: шапка ≤80–90 px, убрать лишние полосы, снизить высоту хлебных крошек и промо.
• Перенести крупный баннер ниже списка или сделать узкий промо‑ряд над товарами (одна строка, без слайдера).
• Свернуть фильтры в аккордеон с кнопкой «Показать фильтры», оставить на виду только ключевые 2–3 тега. Добавить sticky панель сортировки и вида, но компактную.
• Перестроить порядок блоков на малых ПК‑разрешениях: заголовок категории → мини‑сортировка → первые карточки → фильтры → промо.
• Показать скелетоны карточек сразу, чтобы подтвердить наличие списка и снять тревогу «страница пустая».
• Ограничить отступы: снизить вертикальные маргины, сократить карточки по высоте (картинка, цена, CTA), включить плотный режим.
• Тестировать на 1280×720, 1366×768, 1440×900. Проверить в популярных браузерах и масштабах 90–110%.
• В аналитике зафиксировать метрики: время до первого взаимодействия с карточкой, глубина просмотра, CTR карточек, отказ из категории. Запустить A/B‑тест и утвердить изменения при стабильном росте.
• Критерии готовности: карточки видны без скролла, сортировка доступна, баннер не перекрывает список, фильтры не мешают началу просмотра.

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

• Если свернуть фильтры в аккордеон и показать только ключевые, то конверсия в просмотр карточки может увеличиться за счёт того, что первые товары окажутся видны без скролла.
• Если уменьшить высоту шапки и перенести баннер ниже товарного списка, то конверсия в переход на карточку может увеличиться за счёт того, что пользователь сразу видит ассортимент.
• Если добавить компактную sticky панель сортировки над товарами, то конверсия в применение сортировки может увеличиться за счёт того, что управление всегда под рукой и не съедает экран.
• Если включить «плотный режим» карточек на малых разрешениях, то конверсия в добавление в корзину может увеличиться за счёт того, что на первом экране видно больше товаров.
• Если показывать скелетоны первых карточек до загрузки промо‑блоков, то конверсия в просмотр списка может увеличиться за счёт того, что пользователь сразу понимает: товары есть и их можно листать.