Более или менее крупные интернет-магазины не раз сталкивались с ситуацией, когда в категориях их сайтов необходимо разместить фильтры, которые бы позволяли работать с ассортиментом магазина и сортировать его в зависимости от потребностей посетителя. И очень часто такие попытки заканчиваются интеграцией огромного списка фильтров, которые растягиваются на пару экранов промотки и пользоваться которыми крайне неудобно.
В сегодняшней статье мы дадим несколько ключевых советов, которые позволят вам создать простой и эффективный конфигуратор в любой из ваших категорий.
1. Определитесь с разделами
Самое простое, что можно и нужно сделать. Любые параметры, который вы хотите предложить к фильтрации, можно объединить одним словом. Например, длину, ширину, глубину, высоту и вес можно объединить одним словом - габариты. Производителей Adidas, Nike, Puma и Reebok можно объединить в раздел "бренды". Коллекции одежды по сезонам года можно объединить в "Сезоны".
Как мы говорили выше, это самое просто, что можно сделать в первую очередь, но некоторые не делают даже этого, вываливая посетителям огромные простыни текста, которые только отвлекают от просмотра ассортимента интернет-магазина.
Как вы понимаете, это делается специально для того, чтобы сократить место, которое будет занимать ваш фильтр на странице товара. Идеальным решение будет создание закрепленных и раскрытых разделов, которые будут наиболее востребованы покупателями. Уже ниже их можно разместить выпадающие разделы, по клику на которые и показывается их содержание.
2. Определенное количество параметров внутри раздела
Самое главное правило - не вываливать все параметры внутри раздела сразу, показывая насколько "силен" ваш фильтр и создавая тем самым кашу из чекбоксов. Выберите наиболее ключевые и распространенные параметры (например, габариты, диагональ экрана, цвет, вкус и т.п.), которыми посетитель наверняка захочет воспользоваться и отобразите их первыми.
Не рекомендуется отображать более 6-7 показателей одновременно, т.к. это может ухудшить восприятие отображаемой информации и усложнить работу с каталогом.
Оставшиеся параметры есть смысл скрыть за ссылкой "Еще", которую также необходимо оформить как активный блок, тем самым дав понять, что нажав на нее произойдет какое-либо действие.
Более того, такая ссылка должна размещаться в непосредственной близости от тех параметров, продолжение списка которых она скрывает. Именно за счет этого достигается разграниченность блоков и понятная структура фильтра.
3. Выделяйте выбранные параметры
Не менее важным моментом является отображение пользователю тех параметров фильтрации, которые им сейчас выбраны и товары по которым отражаются в списке.
Отличным примером может служить интернет-магазин Юлмарт, который делает темнее блоки с выбранными параметрами и даже отображает количество товаров, которые будут отображены в случае выбора более чем одного параметра (например, среди 49 принтеров марки HP по акции будет только два товара).
4. Не используйте скроллинги внутри разделов
Самое страшное, что можно заставить делать посетителя любого сайта - пользоваться внутренним скроллингом внутри маленького контента.
Главное неудобство заключается в том, что пользователю придется приложить слишком много усилий и внимания для того, чтобы сначала попасть по полоске промотки, а потом воспользоваться ею, т.к. большинство пользователей привыкло делать это прокручивая колесо на мышке. В случае с скроллингом внутри блока, он будет работать только в том случае, если мышь наведена на него.
Решение вполне простое и описано в пункте №2 - подгружайте оставшиеся параметры кнопкой "Еще" или "Показать все" и расширяйте сам блок в высоту по количеству подргузившихся параметров. Для того, чтобы уменьшить этот блок и вернуть его к прежнему состоянию можно использовать аналогичную ссылку "Популярные", которая сократит большой список до его первоначального вида.
5. Используйте ползунки параметров там, где это возможно
Большую часть параметров можно предложить к выбору простым и понятным способом, который называется "линейка выбора".
Благодаря ему вы сможете заложить в параметр кучу показателей, которые будут иметь вполне понятное и удобное отображение.
Физическое лицо, оставляя заявку на веб-сайте e-pepper.ru
через форму подписки на e-mail рассылку, действуя свободно, своей волей и в своем интересе,
а также подтверждая свою дееспособность, предоставляет свое согласие на обработку персональных данных
(далее — Согласие) Обществу с ограниченной ответственностью «МАКС ТЕХНОЛОДЖИ» (ООО «МАКС ТЕХНОЛОДЖИ»)
(ИНН 7701370771), которому принадлежит веб-сайт e-pepper.ru и которое зарегистрировано по адресу
115114, Москва, 1-й Павелецкий проезд, 1/42к2, помещение 1а/2п, офис 4,
на обработку своих персональных данных со следующими условиями:
Данное Согласие дается на обработку персональных данных, как без использования средств автоматизации, так и с их использованием.
Согласие дается на обработку следующих моих персональных данных: персональные данные, не относящиеся к специальной категории персональных данных или к биометрическим персональным данным: адрес электронной почты (e-mail); имя; сведения о месте работы; номер мобильного телефона.
Цель обработки персональных данных: обсуждение возможного проекта.
В ходе обработки с персональными данными будут совершены следующие действия: сбор; запись; систематизация; накопление; хранение; уточнение (обновление, изменение); извлечение; использование; передача (предоставление, доступ); блокирование; удаление; уничтожение.
Персональные данные обрабатываются в течение 30 дней с момента отказа в дальнейшем обсуждении проекта или с момента принятия решения о заключении договора на проект в соответствии с ч. 4 ст. 21 152-ФЗ, смотря что произойдет раньше.
Согласие может быть отозвано вами или вашим представителем путем направления ООО «МАКС ТЕХНОЛОДЖИ» письменного заявления, по адресу 115114, Москва, 1-й Павелецкий проезд, 1/42к2, помещение 1а/2п, офис 4.
В случае отзыва вами или вашим представителем Согласия ООО «МАКС ТЕХНОЛОДЖИ» вправе продолжить обработку персональных данных без него при наличии оснований, указанных в пунктах 2 — 11 части 1 статьи 6, части 2 статьи 10 и части 2 статьи 11 Федерального закона № 152-ФЗ «О персональных данных» от 27.07.2006 г.
Настоящее согласие действует все время до момента прекращения обработки персональных данных, указанных в п. 6 и п. 7 Согласия.