Служба оперативной поддержки интернет-магазинов на Битриксе

Как упростить фильтрацию товаров в каталоге

Василий Бердников

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

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

По нашим наблюдениям, при работе с фильтром основные сложности у покупателей возникают с длиной панели:

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



Как это исправить? Сделать панель фильтра компактнее, в идеале чтобы он вместился в экран.

Заменить разворачивающиеся списки на модальное окно

Было

Высота панели зависит от высоты разворачиваемых списков. Панель слишком длинная.

Стало

Модальное окно со списком флажков открывается справа от панели фильтра.
Теперь высота панели не зависит от высоты списков с флажками.

Объединить похожие свойства в группы


При объединении нескольких свойств в одну группу функциональность фильтра остаётся прежней, но работать с ним становится проще. Чем меньше список, тем быстрее находишь нужный пункт.

Было

Чтобы найти душевую кабину под размер помещения, приходилось открывать по очереди сначала «Длину», нажимать на кнопку «Показать», ждать обновления страницы, потом тоже самое повторять с параметрами «Ширина» и «Глубина».

Стало

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

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

Убрать лишние свойства


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

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

Сайт ТриалСпорта предлагает найти покрышки для велосипедов по году выпуска, бренду и размеру скидки. Представьте: у вас на велосипеде порвалась покрышка, вам нужно починить велосипед. Но единственное значимое для вас свойство «Диаметр» теряется в списке среди бесполезных пунктов.

Читайте также о фильтрах:
Математическое мышление в фильтрах
Улучшаем фильтр по цене

Корзина как этап воронки продаж

Корзина интернет-магазина «Империяшоп» до редизайна.

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

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

Для этого ответьте на странице на следующие вопросы:

Как я могу оплатить заказ?
Что если я получу неисправный товар?
Сколько будет стоить доставка в мой город?
Возможна ли бесплатная доставка?
В какие сроки будет доставлен заказ?
С какими транспортными компаниями вы работаете?

Если человек не найдёт в вашей корзине ответов на эти вопросы, он попытается их найти самостоятельно, откроет страницу «Условия доставки и возврата»:

Если это случилось, значит покупатель запутался — заказа не будет.

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

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

11 июля   Корзина

Математическое мышление в фильтрах

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

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

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

Читайте также о фильтрах:
Как упростить фильтрацию товаров в каталоге
Улучшаем фильтр по цене

8 июля   Фильтр

Большой слайдер на стартовой странице: что с ним не так?

Василий Бердников

Большой слайдер на стартовой странице шаблонного интернет-магазина

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

Причину этого требования можно понять. Куда ни глянь, везде слайдеры: на сайте конкурента, производителя, поставщика. Слайдеры словно завоевали интернет. Сложно сомневаться в решении, когда оно встречается везде.

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

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

Владельцы сайтов любят слайдеры за простоту: вставил картинку и всё.

У слайдера три серьёзных недостатка:

  1. Сложно достичь стилистического единства между слайдами и сайтом.
  2. Слайдер фокусирует внимание на случайном товаре, а не на ассортименте. В результате человек видит перед собой только один слайд с каким-то конкретным товаром. Если товар посетителя не интересует, посетитель может уйти.
  3. Слайдер создаёт проблемы с позиционированием. По главной странице посетитель составляет о магазине первое впечатление, которое изменить потом будет очень сложно. Например, если на стартовой странице гигантские иллюстрации со скидками, покупатель может подумать, что это дискаунтер. Интернет-магазин в примере выше могут запомнить как сайт очистителей.

Можно подумать, что последние две проблемы решает прокрутка слайдов. Но, согласитесь, зачем нормальному человеку целиться в крохотную точку (или стрелку) без всякого представления, что его ждёт на следующем слайде дальше? Гораздо легче проскролить страницу привычным образом и продолжить изучать сайт сверху вниз.

Понимая эту проблему, магазины часто вставляют автопрокрутку слайдов и только усугубляют ситуацию: невозможно читать слайд, который может исчезнуть в любой момент! Автопрокрутка почти всегда будет раздражать (за редким исключением).

Если вы зададите себе вопрос, зачем вам слайдер, скорее всего ответы попадут в этот список:

  • Рассказать об акциях
  • Привлечь скидкой
  • Показать ассортимент
  • Для быстрого перехода в разделы каталога
  • Без объяснения причин. Некоторые клиенты признают, что не могут логически объяснить причину своего требования вставить баннер, но настаивают без объяснения. Я считаю, это обычное проявление стадного чувства.

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

Список

Плитка

Сложная плитка

Плитка

Сложная комбинация
плитки и списка


Эти типы вёрстки отлично справляется с задачей показать покупателю ассортимент магазина. Мы часто используем их при разработке стартовых страниц для своих клиентов:

Выводы

  • Популярность слайдера среди интернет-магазинов объясняется только простотой внедрения элемента на сайт.
  • Задача любой стартовой страницы — показать ассортимент и направить покупателя в каталог. Но именно с этой задачей слайдер справляется хуже всего.
  • Есть масса других более эффективных способов организации стартовой страницы — без слайдера.

Неинформативная навигация

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

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

Разделы каталога спрятаны в выпадающем меню. Покупатель не поймёт, что вы продаёте, пока не догадается навести курсор на пункт «Каталог» и увидеть выпадающее меню.

Как это исправить?

Покажите разделы каталога сразу:

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

Улучшаем фильтр по цене

Василий Бердников

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

  • Во-первых, зачем человеку нижняя граница цены? Если я хочу себе надёжный, но недорогой холодильник, то как мне понять его минимальную цену? Я не разбираюсь в холодильниках и не могу быть уверен в том, что в моем диапазоне окажутся именно нужные мне холодильники. Как мне здесь сориентироваться? Только наугад.
  • Во-вторых, зачем в фильтре такая точность? Если вы включите этот фильтр, то сайт вам покажет товары только с ценой до 3023 ₽, товары с ценой выше на 1 рубль вы не увидите. При общей цене товара в 3000 ₽ — 1 рубль не принципиальная разница, согласитесь. Почему бы их тогда не увидеть?

Улучшаем

На самом деле люди пользуются фильтром по цене по двум причинам (в основном):

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

Убираем цифры, используем человеческие понятия:

Фильтр сегментирует все товары на три диапазона: Дешево, нормально, дорого. Они относительны в жизни, пускай остаются такими же и на сайте.

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