Онлайн-курс 24-25 сентября 11:00-14:00 по Мск Instagram PRO-кач: как захватить соцсеть и начать продавать через Инстаграм
Записаться

До начала трансляции:

Поиск по каталогу: какими должны быть фильтры и сортировка каталога товаров

В продолжение статьи про формы поиска поговорим про организацию фильтров в каталоге. Задуматься о том, какими будут фильтры, лучше до добавления товаров на сайт, чтобы потом не пришлось менять характеристики для длинного списка наименований.

Такой поиск позволяет:

  • показать ассортимент;
  • ускорить поиск нужного товара;
  • дополнительно рассказать об акциях и скидках;
  • расширить семантическое ядро сайта;
  • получить ссылку на узкую выборку товаров для контекстной рекламы.

Также опыт наших клиентов показывает, что хорошо организованная фильтрация товаров помогает повысить конверсию страниц каталога и снизить процент отказов.

Расположение

Наиболее привычный вариант – боковое меню слева от списка товаров. Пользователи привыкли воспринимать информацию слева-направо и сначала выбирают критерии, а затем уже смотрят на сформированный список товаров.

Фильтры занимают почти два первых экрана и список товаров не сразу заметен

Меню фильтров перед списком товаров

Меню фильтров удобно расположено слева

Меню фильтров слева от списка товаров

Также не стоит «прятать» фильтры, так как пользователи могут их просто не заметить:

Основные элементы

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

  1. Категории товаров. Очевидно, но не всегда встретишь их на сайте. Делить товары на категории лучше по их типу, назначению и/или бренду. Расположить список ссылок рекомендуем в начале блока с фильтром.

    Список категорий отсутствует, что затрудняет поиск, если вам нужны разные товары

    Отсутствие списка категорий товаров

    Хороший пример того, как после выбора категории компактно показать ссылки на другие товары

    Компактный список категорий товаров

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

    Не самое удачное название фильтра, лучше заменить на «Товары со скидкой»

    Неудачный пример ссылки на раздел скидочных товаров

    Удачно, что выделили не только новинки и скидки, но и товары с подарками

    Удачный пример фильтрации акционных товаров

  3. Наличие товара. Если у вас хотя бы часть товаров доступна под заказ, то обязательно добавьте возможность отсортировать товары, которые можно купить прямо сейчас.

    Антипример фильтрации по наличию, так как два пункта означают одно и то же

    Антипример фильтрации товаров по наличию

    Хороший пример фильтрации товаров по расположению склада

    Пример фильтрации товаров по расположению склада

  4. Выбор диапазона цен. Очень удобный фильтр для тех клиентов, которые хотели бы исключить слишком дешевые и/или дорогие товары.

    Можно использовать готовые варианты диапазонов, но лучше позволить пользователю самому задать значения

    Неудачный пример выбора диапазона цен

    Хороший пример выбора диапазона цены

    Хороший пример выбора диапазона цен

  5. Кнопка сброса фильтров. В отличие от кнопки запуска фильтрации, которую можно не добавлять (если у вас настроено автоматическое обновление списка товаров), отмена выбранных фильтров должна присутствовать в каждом каталоге.

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

    Неудачное расположение кнопки сброса фильтров

    Самый удобный вариант – расположить список выбранных фильтров и кнопку сброса до списка товаров

    Удобное расположение кнопки сброса фильтров

Рекомендации по организации

Перечислим основные ошибки, которые следует избегать:

  1. Пустые категории. Рекомендуем не отображать категорию, если для нее по каким-то причинам нет подходящих товаров, чтобы не нагружать блок фильтров.

    Такие категории только мешают поиску товара:

    Пример пустой категории каталога

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

    Выбранные фильтры нужно выделить в боковом меню, а также можно продублировать перед списком товаров:

  3. Длинный список фильтров. Сворачивайте дополнительные параметры, чтобы они не занимали много места. Помните, что цель фильтра категории товаров – сузить поиск, поэтому ориентируйтесь только на важные характеристики.

    Пример компактного отображения фильтров:

    Компактное отображение списка фильтров

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

    Пример как скрыть дополнительные фильтры

  4. Непонятные категории. Смотрите на фильтры глазами клиентов. Рекомендуем изучить статистику запросов, например, в Яндекс.Метрике или Google Analytics. Помните о новичках, которым нужны пояснения для профессиональных терминов или характеристик товара.

    Хороший пример списка категорий товаров на основе проблем клиента:

    Список категорий, ориентированный на проблемы клиента

  5. Дублирование фильтров. Повторяющимися или похожими фильтрами вы можете только запутать пользователя, а наша задача помочь ему.

    Пример похожих параметров, которые только дезориентируют пользователя:

    Пример похожих фильтров

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

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

Пример отображения количества товаров

Сортировка товаров

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

Пример размещения кнопки сортировки товаров

Рекомендуем выбрать следующие три вида, которые подойдут для большинства товаров.

  1. По цене. Самый популярный способ – наверняка вы и сами часто им пользуетесь. Нужен обязательно!
  2. По популярности. Помогает тем, кто гонится за трендами или не совсем разбирается в тематике и хотел бы увидеть, что заказывают другие. Популярность можно отслеживать по количеству заказов или отзывов.
  3. По названию (или алфавиту). Подходит для тех, кто выбрал несколько брендов и хотел бы их «сгруппировать» внутри списка.

Пример удобного размещения данных сортировок в каталоге:

Пример размещения популярных способов сортировки

Существуют и другие варианты сортировки, но они уже более специфичны и зависят от тематики товаров.

Дополнительно

Отметим еще несколько моментов, на которые стоит обратить внимание.

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

    Два списка категорий выглядят странно, клиент не видит товаров

    Пример двух списков категорий в каталоге

    Пример каталога, где по умолчанию выбраны популярные товары

    Список популярных товаров установлен по умолчанию

  2. Количество найденных товаров. Перед блоком товаров укажите общее число найденных наименований, чтобы пользователь оценил, нужно ли ему сузить или расширить параметры фильтрации.

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

    Отсутствие информации о количестве найденных товаров

    Пример размещения информации о количестве найденных товаров

    Количество найденных товаров в каталоге

  3. Автоматическая подгрузка списка товаров. В теории должна помогать плавно просматривать полный список товаров, но на деле мешает ориентироваться в списке и затрудняет доступ к подвалу сайта. Рекомендуем использовать деление на страницы (пагинация).

    Автоматическая подгрузка списка может замедлять поиск товара

    Пример автоматической подгрузки товаров в каталоге

    Деление на страницы упрощает восприятие списка товаров

    Пример использования пагинации

Также стоит добавить выбор количества отображаемых товаров на странице, включая кнопку «Показать все», как в примере:

Пример выбора количества отображаемых товаров

Заключение

Надеемся, что данный обзор способов фильтрации и сортировки товаров поможет вам организовать удобный каталог продукции и радовать ваших клиентов =). Если у вас возникли сложности с настройкой фильтров на сайте, напишите нам – поможем с реализацией.

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

Понравилась статья?

Пошаговое руководство по самостоятельному продвижению сайта

  • Все обязательные этапы продвижения
  • Инструкции, как делать самому
  • Ориентировочные цены специалистов
Получить мануал

Популярные статьи

Все популярные статьи »

Комментарии (0)

Правила комментирования блога

Оставить коммент к статье

Читайте свежие статьи первыми

Дайджест новых статей по интернет-маркетингу 1 раз в неделю

Подпишитесь на рассылку и получайте свежие хаки об интернет-маркетинге и SEO

ДА!

1 письмо
в неделю

3 статьи
в письме

Бонус «для своих»
в каждом письме

Услуга добавлена в корзину

Продолжить покупки Перейти в корзину