Каталог и фильтры на сайте: что делает их удобными

Каталог на сайте нужен не для того, чтобы показать всё, что продаёт компания, а для того, чтобы клиент быстро нашёл своё. Если товаров больше десятка, без фильтров каталог превращается в ленту, которую никто не долистывает. Но и фильтр сам по себе не решает задачу: неудачно устроенный фильтр путает сильнее, чем его отсутствие. В этой статье разберём, что делает каталог и фильтры удобными, на двух очень разных примерах: каталоге промышленных роботов на ng-robotics.ru и каталоге автомобилей на демонстрационных сайтах платформы baseauctions.ru. Всё, что сказано о сайтах, взято с их публичных страниц на момент написания статьи.

Два каталога, две задачи

Примеры выбраны потому, что они отличаются почти во всём, и тем интереснее, что у них общего.

• Каталог роботов на ng-robotics.ru небольшой: на кнопке фильтра указано «Показать результаты (17)». Покупатель здесь инженер или технолог, который выбирает оборудование по техническим параметрам.
• Каталог автомобилей на демонстрационных сайтах baseauctions.ru подключён к базам зарубежных площадок и рассчитан на частного покупателя или клиента импортёра. Автомобилей в нём много, а параметров, по которым люди выбирают машину, больше десятка.

Несмотря на разницу, в обоих каталогах видны одни и те же принципы. Разберём их по порядку.

Принцип первый: фильтр задаёт вопросы на языке клиента

Хороший фильтр повторяет вопросы, которые клиент задал бы продавцу. Плохой повторяет поля из базы данных.

В каталоге роботов три фильтра: «Категория», «Грузоподъёмность» и «Радиус действия (досягаемость)». Это ровно те вопросы, с которых инженер начинает выбор робота: какого типа, какой вес поднимает, до какой точки дотягивается. Обратите внимание на подпись «Радиус действия (досягаемость)»: в скобках дан второй вариант термина, которым посетитель мог бы его назвать.

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

Над фильтром можно дать подсказку

На ng-robotics.ru над фильтром написано: «Выберите необходимые параметры из представленных в фильтре». Это простая фраза, но она сразу объясняет, что делать на странице. Для каталога, куда приходят люди без опыта онлайн-покупок оборудования, такая подсказка уместна.

Принцип второй: диапазоны или готовые интервалы

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

В каталоге роботов грузоподъёмность и радиус выбираются из готовых интервалов:

• грузоподъёмность: до 30 кг, от 30 до 80 кг, от 80 до 150 кг и от 150 до 300 кг;
• радиус действия: до 2000 мм, от 2000 до 2500 мм и от 2500 до 3200 мм.

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

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

Простое правило: если товаров мало и значения параметра распределены неравномерно, нарежьте интервалы сами. Если товаров много и каждый клиент мыслит своими границами, дайте поля «от» и «до».

Принцип третий: главное на виду, остальное по запросу

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

На одном из демонстрационных сайтов baseauctions.ru на виду только марка, модель и стоимость, а остальные параметры раскрываются кнопкой «Ещё фильтры». На другом демонстрационном сайте все поля показаны сразу. Сравнение этих двух вариантов хорошо показывает компромисс: первый проще для новичка, второй быстрее для того, кто точно знает, что ищет. Выбор зависит от аудитории, и его стоит проверять по данным аналитики.

В каталоге роботов параметров всего три, поэтому прятать нечего. Зато над фильтром есть вкладки по категориям: «Все роботы», «Универсальные», «Паллетайзеры», «Высокой грузоподъёмности». Вкладки дублируют фильтр «Категория», но делают самый частый выбор доступным в один клик. В каталоге автомобилей похожую роль играют вкладки «Все авто», «Китай» и «Корея».

Принцип четвёртый: показать результат до того, как человек нажал

Кнопка «Показать результаты (17)» на ng-robotics.ru содержит число найденных моделей. Это одна из самых полезных мелочей в фильтре: посетитель видит, сколько вариантов останется, ещё до того, как нажмёт кнопку. Если число слишком мало, он ослабит условие сразу, а не после пустой выдачи.

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

Кнопка сброса обязательна

В обоих каталогах есть кнопка сброса: «Сбросить» на ng-robotics.ru, «Сбросить» и «Сбросить все» на демонстрационных сайтах baseauctions.ru. Человек, который выбрал несколько параметров и запутался, должен вернуться к полному каталогу одним нажатием, а не снимать каждую галочку по отдельности.

Принцип пятый: пустая выдача не тупик

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

На ng-robotics.ru для этого случая предусмотрено сообщение: «Ничего не найдено. Попробуйте другую модель или название.» Оно говорит, что произошло, и подсказывает, что сделать дальше. Ещё лучше, если рядом с таким сообщением есть кнопка сброса фильтра и способ связаться с менеджером: человек, который не нашёл товар сам, может быть самым готовым к разговору клиентом.

Принцип шестой: карточка помогает решить, открывать ли товар

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

В каталоге роботов карточка состоит из изображения, заголовка, кода модели и ссылки «подробнее». Заголовок собран из двух главных характеристик, например «6-осевой, до 15 кг». Инженер сразу видит число осей и грузоподъёмность и понимает, подходит ли модель.

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

Общее у этих карточек то, что в каждой видны именно те параметры, по которым люди отсеивают варианты. Если клиент не может сравнить товары в списке, ему приходится открывать каждый, и большинство на третьем товаре сдаётся.

Принцип седьмой: путь назад и вперёд

Каталог это не одна страница, а маршрут: категория, список, товар, заявка. На каждом шаге посетитель должен понимать, где он, и иметь возможность вернуться.

• Хлебные крошки. На ng-robotics.ru над каталогом есть цепочка «Главная страница», «Каталог промышленных роботов», «Каталог», а на странице модели к ней добавляется название модели.
• Избранное. На демонстрационных сайтах baseauctions.ru есть ссылка «Вам понравилось» со счётчиком: можно отложить несколько автомобилей и вернуться к ним позже.
• Следующий шаг. На странице модели робота есть кнопка «Узнать цену», в карточке автомобиля кнопка «Смотреть», а внизу страниц есть блок контактов с формой заявки. Посетитель всегда видит, куда двигаться дальше.

Чек-лист удобного каталога

• Фильтры названы так, как говорит клиент, а не так, как названы поля в базе.
• Для числовых параметров выбран подходящий способ: готовые интервалы или поля «от» и «до».
• Самые частые параметры на виду, редкие раскрываются по кнопке.
• Самые частые категории доступны вкладками в один клик.
• На кнопке применения фильтра видно число результатов.
• Есть кнопка сброса всех параметров.
• У пустой выдачи есть понятное сообщение и следующий шаг.
• В карточке видны параметры, по которым товары отличаются.
• Есть хлебные крошки, избранное или другой способ вернуться к найденному.
• Фильтр удобен на телефоне: поля не мельчат, кнопки легко нажать пальцем.

Частые вопросы

С какого количества товаров нужен фильтр?

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

Должен ли фильтр применяться сразу или по кнопке?

Оба варианта рабочие. Мгновенное применение удобно на компьютере и при быстрой выдаче. Применение по кнопке удобнее на телефоне и в сложных фильтрах, особенно если на кнопке видно число результатов.

Нужен ли поиск, если есть фильтры?

Часто да. Фильтр помогает тем, кто выбирает по параметрам, поиск тем, кто знает название или код модели. На ng-robotics.ru, например, в сообщении о пустой выдаче предлагается попробовать другую модель или название.

Как понять, что фильтр неудобен?

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

Что дальше

Удобный каталог складывается из десятка мелочей, и каждая из них либо помогает клиенту найти товар, либо уводит его к конкурентам. Посмотрите, какие каталоги и интернет-магазины мы делаем, на странице о разработке сайтов. Если хотите обсудить каталог для вашего бизнеса, напишите нам через страницу контактов.