Определяем лучший тип навигации для мобильного каталога товаров

Этот момент — идеальная метафора всего, что может пойти не так с навигацией в мобильном каталоге. И именно поэтому выбор между бесконечной прокруткой и пагинацией — это не вопрос моды или «так делают все», а серьёзное инженерно-дизайнерское решение, которое напрямую влияет на конверсию, удержание и даже ваш рекламный бюджет.

Почему этот выбор вообще критичен

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

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

Навигация в каталоге — это не про «как листать». Это про то, чувствует ли пользователь контроль над процессом выбора или тонет в бездонной ленте.

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

Бесконечный скролл: когда он действительно работает

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

Визуально-вдохновляющие каталоги. Pinterest, Instagram, Unsplash — здесь бесконечный скролл работает, потому что контент однороден по форме, не требует сравнения и воспринимается эмоционально. Пользователь не ищет конкретную вещь — он «смотрит витрину», листает, цепляется взглядом. Нет задачи «найти самое дешёвое» или «сравнить характеристики».

Поисковая выдача с ранжированием по релевантности. Когда результаты отсортированы по алгоритму, и первые позиции действительно лучше последних, бесконечный скролл снижает friction. Google Images — классический пример. Но даже там появился «загрузить ещё» вместо автоматической подгрузки.

Малые каталоги. Если у вас 20–40 товаров, бесконечный скролл просто убирает лишний клик. Пагинация в таком случае выглядит нелепо — «страница 1 из 2» ни о чём не говорит.

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

Где бесконечный скролл ломает всё

Перечислю конкретные сценарии, которые я наблюдала в реальных проектах — не в теории, а на тепловых картах и в записях сессий.

Потеря позиции

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

Я замеряла это на проекте каталога электроники: 38% пользователей, столкнувшихся с потерей позиции, покидали сайт в течение 15 секунд. Без возврата.

Футер, который невозможно найти

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

Нагрузка на устройство

На бюджетных Android-смартфонах, которых в России всё ещё большинство, бесконечный скролл с картинками высокого разрешения превращает браузер в слайд-шоу. После 200–300 подгруженных карточек страница начинает тормозить, жрать оперативную память и в итоге крашится. Я видела это и на iPhone SE, и на Redmi — это не маргинальные устройства, это реальные телефоны реальных покупателей.

Размытая мотивация

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

Пагинация: классика, которую несправедливо забывают

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

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

Стабильная «якорная точка». Вернувшись на страницу 4, пользователь увидит ровно те же товары, что видел раньше. Контент не сдвинулся, не перетёк, не обновился незаметно.

Лёгкий возврат к «месту просмотра». Да, это одна лишняя прокрутка от начала страницы — но это фиксированный, предсказуемый маршрут, а не «а где я был, когда был на 147-й карточке?»

Вот как выглядит сравнение двух подходов на практике:

Но у пагинации есть и слабые стороны. Главная — лишний клик. На мобильном каждый тап — это friction. Если каталог большой, пользователь устаёт нажимать «следующая». И вот здесь на сцену выходит гибридный подход.

Гибридные решения: лучшее из двух миров

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

Пагинация с кнопкой «Показать ещё». Страница загружает фиксированное количество товаров (скажем, 24), а внизу — кнопка «Загрузить ещё 24». Пользователь сохраняет контроль, видит прогресс, может остановиться. Самый сбалансированный вариант для большинства мобильных каталогов.

Скролл с фиксированной навигацией. Бесконечная прокрутка, но с липким мини-меню внизу экрана, где отображается «Страница 5 · Товар 120 из 480». Пользователь скроллит, но всегда знает, где находится.

Пагинация с превью содержимого. Внизу страницы — не просто «1 2 3... 12», а миниатюры первых товаров следующей страницы. Пользователь принимает решение: «Стоит листать дальше — там есть то, что мне нужно?»

Последний вариант мы внедрили в проекте для магазина строительных материалов. Владелец сначала скептически относился к пагинации — привык к «современным» решениям. Но когда мы показали ему записи сессий: как люди на бесконечном скролле терялись, возвращались к началу, а потом уходили на сайт конкурента — он согласился. Конверсия с каталога в карточку товара выросла на 19% в первую же неделю. Это при том, что сам каталог, ассортимент и цены не изменились.

Выбор навигации — это не вопрос «что моднее». Это вопрос: что делает ваш пользователь, когда устает? Уходит — или нажимает «ещё»?

Кстати, если вам интересно посмотреть, как архитектурные и дизайн-студии выстраивают навигацию по портфолио с большим количеством проектов, обратите внимание на подход архитектурного бюро Boz Dalmi — там каталог проектов решён через структурированную пагинацию с визуальными превью, и это работает именно потому, что пользователь сравнивает и выбирает, а не бездумно листает.

Техническая сторона: SEO, производительность, индексация

Это тот раздел, который UX-дизайнеры часто пропускают, а потом удивляются, почему их каталог не индексируется. Давайте разберём.

Проблема индексации при бесконечном скролле

Google и Яндекс индексируют страницы. Страницы — это URL-адреса. У бесконечного скролла один URL. Это значит, что всё, что подгружается после первого экрана — поисковик не видит. Вообще. Невидимые товары — товары, которые не будут найдены по запросу.

Да, есть технические хаки — History API, pushState, динамические URL. Но на практике они реализуются криво: бот натыкается на бесконечную страницу, тратит на неё краулинговый бюджет и в итоге индексирует только часть товаров. Я видела каталоги, где из 5000 товаров в поиске Яндекса было только 800 — и это при том, что все они были на сайте.

Краулинговый бюджет

Поисковые роботы ограничены в количестве страниц, которые они обходят за один визит. Если ваш каталог — это одна гигантская страница с бесконечной подгрузкой, робот потратит всё «время» на неё и не дойдёт до карточек товаров. Пагинация с правильными canonical-тегами и rel="next/prev" распределяет нагрузку равномерно.

Core Web Vitals

Бесконечный скролл ухудшает метрику LCP (Largest Contentful Paint), потому что контент постоянно перерисовывается. На мобильных устройствах с медленным процессором это превращается в видимые «подёргивания» и лаги. Пагинация стабильна: одна страница — одна загрузка — одна отрисовка.

Как выбрать: конкретная методика

Я не верю в универсальные чек-листы, но верю в вопросы, которые нужно задать себе и команде перед тем, как пилить код.

Вот что я рекомендую обсудить:

1. Сколько товаров в каталоге? До 50 — бесконечный скролл или «показать всё». От 50 до 500 — гибрид «показать ещё». Свыше 500 — пагинация с хорошей фильтрацией.

2. Пользователь сравнивает или просматривает? Если сравнивает (электроника, бытовая техника, мебель) — нужна пагинация: пользователь должен иметь возможность вернуться к конкретному набору товаров. Если просматривает (одежда, еда, аксессуары) — скролл допустим.

3. Как часто обновляется каталог? Если товары добавляются/удаляются ежедневно (маркетплейс), бесконечный скролл может показать разный контент при повторном заходе. Это дезориентирует.

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

5. Какая доля мобильного трафика? Если 70%+ — навигация должна быть оптимизирована под палец, а не под мышь. Кнопки пагинации должны быть крупными, расстояние между ними — не менее 48dp.

Методика A/B-тестирования навигационных паттернов

Говорить «пагинация лучше» или «скролл лучше» в отрыве от конкретного проекта — попросту некорректно. Единственный способ узнать, что работает для вашего каталога, — это тест. Но тестировать нужно правильно.

Что именно мерить

Не конверсию «из визита в покупку» напрямую — слишком много переменных. Вот метрики, которые дадут чистый сигнал:

• Доходимость до товара. Какой процент пользователей доходит до карточки хотя бы одного товара? Если этот показатель падает при смене навигации — что-то не так.

• Глубина просмотра. Сколько товаров в среднем смотрит один пользователь? При бесконечном скролле эта метрика часто завышена — люди скроллят машинально, не глядя.

• Bounce rate на странице каталога. Если при пагинации он выше — возможно, первый экран не цепляет и пагинация тут ни при чём.

• Время до первого клика на товар. Показывает, насколько быстро пользователь находит «своё».

Сколько длить тест

Минимум 14 дней, чтобы сгладить недельную цикличность. Объём выборки — не менее 5000 уникальных посетителей на каждый вариант. Если у вас маленький трафик — не тратьте время на A/B-тест: смотрите записи сессий, проводите юзабилити-тестирование с 8–10 реальными пользователями.

Ловушка ранних выводов

Бесконечный скролл часто «выигрывает» в первые дни теста, потому что у пользователя нет барьера входа — он сразу видит товары и кликает. Но на 7–10-й день картина меняется: возвращающиеся пользователи не могут найти то, что видели вчера, и метрика удержания проседает. Не останавливайте тест слишком рано.

Позиция, которая не всем нравится

Я знаю, что бесконечный скролл выглядит модно. Я знаю, что крупные маркетплейсы его используют. Но я также знаю, что у крупных маркетплейсов есть UX-отделы из 30 человек, которые годами дорабатывают этот паттерн, добавляют микро-анимации, сохранение позиции, push-уведомления «вы смотрели товар X».

У вас, скорее всего, нет 30 UX-специалистов. У вас, скорее всего, небольшая команда, бюджет на один подход и одна попытка сделать правильно. И в этой ситуации пагинация или гибрид с кнопкой «показать ещё» — надёжнее, предсказуемее и проще в поддержке.

Бесконечный скролл — это не «современно». Это — «удобно для платформы, которая живёт за счёт вашего внимания». Instagram хочет, чтобы вы скролилили бесконечно: так вы видите больше рекламы. Ваш интернет-магазин хочет, чтобы пользователь купил. Это совершенно разные цели — и навигация должна им соответствовать.

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