Содержание · 9
Сколько товаров показывать в ряд, какие фильтры выносить наверх, как быть с пустой выдачей и почему бесконечная прокрутка вредит каталогу.
Сетка каталога
Количество товаров в ряд определяется не эстетикой, а типом товара. Одежде и мебели нужна крупная карточка с деталями; расходникам и книгам достаточно мелкой.
Практический ориентир: 3–4 карточки в ряд на десктопе для товаров, где важен вид, и 5–6 для товаров, где важна цена и характеристики.
Фильтры
Наверх выносятся два-три фильтра, которыми пользуются чаще всего в этой категории, — обычно цена, размер и цвет. Остальные убираются в панель.
Каждый фильтр должен показывать количество товаров, которое останется после его применения. Без этого пользователь наугад сужает выдачу и приходит к нулю.
- Показывать количество результатов рядом с каждым значением.
- Не скрывать выбранные фильтры — они должны быть видны и легко снимаемы.
- Применять фильтр сразу, а не по кнопке «показать».
- Сохранять фильтры в адресе страницы — результат можно переслать.
Пустая выдача
Экран «ничего не найдено» — точка, где магазин теряет покупателя окончательно. Вместо сообщения об отсутствии он должен предлагать выход: снять последний фильтр, расширить диапазон цены, показать похожее.
Хорошая практика — показывать результаты с частичным совпадением и честно помечать, чем они отличаются от запроса.
Пагинация против бесконечной прокрутки
Бесконечная прокрутка хороша для лент, где нет цели, и плоха для каталогов, где есть. Она ломает возврат: уйдя в карточку и вернувшись, пользователь оказывается в начале списка.
Кроме того, она делает недостижимым подвал сайта, где обычно находятся контакты и условия доставки.
Способы показать длинный список
Пустая выдача — самый частый и самый непроработанный экран каталога. Именно на нём человек решает, что здесь ничего нет.
Фильтры, которыми пользуются
Работающий набор фильтров повторяет то, как человек описывает свою задачу вслух, а не структуру базы данных. В мебельном каталоге это «куда» и «сколько места», а не «коллекция» и «артикул». Фильтр, названный внутренним термином, не используется, даже если он полезен.
Второе — обратная связь. Число найденного должно обновляться сразу, а варианты, которые ничего не дадут, лучше показывать неактивными, чем прятать: исчезающие пункты сбивают ощущение полноты каталога.
Что чаще всего сделано неправильно
- Фильтры за кнопкой «Показать фильтры» на десктопе: их просто не находят.
- Сортировка по умолчанию «популярное» без объяснения — читается как случайный порядок.
- Потеря выбранных фильтров при переходе в карточку и обратно.
- Отсутствие адреса страницы с параметрами: отфильтрованную выдачу невозможно переслать.
- Пустой результат без выхода: нужно предлагать снять условие, а не показывать «ничего не найдено».
Скелетон, автодополнение и хлебные крошки
Три элемента, которые в каталоге работают на одно — на ощущение, что система отвечает. Скелетон загрузки — серые прямоугольники на месте будущих карточек — придуман не ради красоты: он резервирует место, и когда содержимое приходит, вёрстка не прыгает. Спиннер этого не делает, поэтому в списках его давно вытеснил скелетон, а в кнопках — оставили.
Автодополнение в поиске экономит не набор, а формулировку: человек не знает, как товар называется в этом каталоге, и подсказка учит его языку системы. Правило одно: подсказки ведут к результатам, которые есть. Хлебные крошки в каталоге отвечают на вопрос «где я» для пришедшего из поиска — а таких большинство, и для них крошки единственный способ понять структуру, не возвращаясь на главную.
Как их делают правильно
- Скелетон повторяет геометрию будущих карточек, а не абстрактные полосы: иначе сдвиг вёрстки остаётся.
- Подсказки поиска — только существующие товары и категории; подсказка в пустоту хуже её отсутствия.
- Автодополнение управляется клавиатурой: стрелки, Enter, Escape — без этого им нельзя пользоваться без мыши.
- Хлебные крошки показывают путь, а не историю переходов: они про структуру каталога.
- Последний элемент крошек — текущая страница и не является ссылкой.
Что в итоге
Каталог помогает выбрать, когда фильтры показывают количество результатов, а пустая выдача предлагает выход.
Оставьте пагинацию или кнопку «Показать ещё»: бесконечная прокрутка в каталоге ломает главный сценарий — возврат к списку.
Коротко
- Прятать ли варианты, по которым ничего не найдено?
- Лучше показывать неактивными. Исчезающие пункты сбивают ощущение полноты каталога, и человек перестаёт понимать, что вообще есть в наличии.
- Как называть фильтры?
- Словами покупателя, а не рубрикатора: «куда» и «сколько места» вместо «коллекция» и «артикул». Фильтр, названный внутренним термином, не используют, даже если он полезен.
Оформление заказа
Обязательная регистрация, скрытая доставка, слишком много шагов и неудобная оплата. Разбираем причины брошенных корзин и то, что с ними делать.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…