VIDEMIND
Web Design Дизайн интернет-магазиновГид

Каталог и фильтры: как помочь выбрать

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

Каталог и фильтры: как помочь выбрать — графика VIDEMIND
VIDEMIND · generated
Содержание · 7
  1. Сетка каталога
  2. Фильтры
  3. Пустая выдача
  4. Пагинация против бесконечной прокрутки
  5. Фильтры, которыми пользуются
  6. Что чаще всего сделано неправильно
  7. Что в итоге

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

Сетка каталога

Количество товаров в ряд определяется не эстетикой, а типом товара. Одежде и мебели нужна крупная карточка с деталями; расходникам и книгам достаточно мелкой.

Практический ориентир: 3–4 карточки в ряд на десктопе для товаров, где важен вид, и 5–6 для товаров, где важна цена и характеристики.

КатегорияВ ряд (десктоп)В ряд (мобильный)
Мебель, декор31–2
Одежда3–42
Электроника42
Книги, расходники5–62–3

Фильтры

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

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

  • Показывать количество результатов рядом с каждым значением.
  • Не скрывать выбранные фильтры — они должны быть видны и легко снимаемы.
  • Применять фильтр сразу, а не по кнопке «показать».
  • Сохранять фильтры в адресе страницы — результат можно переслать.
Каталог с фильтрами: количество результатов видно до применения фильтра
Каталог с фильтрами: количество результатов видно до применения фильтраVIDEMIND · generated

Пустая выдача

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

Хорошая практика — показывать результаты с частичным совпадением и честно помечать, чем они отличаются от запроса.

Каталог и фильтры: как помочь выбрать — графика VIDEMIND
VIDEMIND · generated
Пустая выдача — самый частый и самый непроработанный экран каталога. Именно на нём человек решает, что здесь ничего нет.

Пагинация против бесконечной прокрутки

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

Кроме того, она делает недостижимым подвал сайта, где обычно находятся контакты и условия доставки.

Способы показать длинный список

ПагинацияКнопка «Показать ещё»Бесконечная прокрутка
Возврат из карточкиТочныйТочныйЛомается
Доступ к подвалуЕстьЕстьНет
Ощущение объёмаПонятноеПонятноеБесконечное
Где уместноКаталогиКаталогиЛенты

Фильтры, которыми пользуются

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

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

Что чаще всего сделано неправильно

  • Фильтры за кнопкой «Показать фильтры» на десктопе: их просто не находят.
  • Сортировка по умолчанию «популярное» без объяснения — читается как случайный порядок.
  • Потеря выбранных фильтров при переходе в карточку и обратно.
  • Отсутствие адреса страницы с параметрами: отфильтрованную выдачу невозможно переслать.
  • Пустой результат без выхода: нужно предлагать снять условие, а не показывать «ничего не найдено».
Каталог и фильтры: как помочь выбрать — графика VIDEMIND
VIDEMIND · generated

Что в итоге

Каталог помогает выбрать, когда фильтры показывают количество результатов, а пустая выдача предлагает выход.

Оставьте пагинацию или кнопку «Показать ещё»: бесконечная прокрутка в каталоге ломает главный сценарий — возврат к списку.

Коротко

Прятать ли варианты, по которым ничего не найдено?
Лучше показывать неактивными. Исчезающие пункты сбивают ощущение полноты каталога, и человек перестаёт понимать, что вообще есть в наличии.
Как называть фильтры?
Словами покупателя, а не рубрикатора: «куда» и «сколько места» вместо «коллекция» и «артикул». Фильтр, названный внутренним термином, не используют, даже если он полезен.
Продолжить тему · Дизайн интернет-магазинов

Оформление заказа

Обязательная регистрация, скрытая доставка, слишком много шагов и неудобная оплата. Разбираем причины брошенных корзин и то, что с ними делать.Дальше

Нашли ошибку или неточность в атрибуции? Напишите нам

Обсуждение

Загружаем…

Только имя и мысль. Ссылки, разметку, код и номера телефонов журнал не публикует — учётных записей на сайте нет, и оставлять здесь ссылку бессмысленно.

0 / 1500