Пропускаем через фильтр

Мы уже рассказывали про магические 3 клика, про постраничную навигацию и поиск.

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

Фильтрация проще для восприятия

В посте об аналитике #1 «Определение задач бизнеса и сайта», какие задачи могут быть у сайта. Например, одна из них — быть продавцом-консультантом.

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

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

Это и есть фильтр. Фильтром нужно пользоваться после выдачи, потому что пока не получили хоть каких-то результатов, мы не можем знать, что будет после уточнения. Может, в вашем магазине всего 20 рубашек, и пользователю нет необходимости фильтровать их — окинул взглядом и пошёл к следующему стеллажу.
Человеческий мозг устроен так, что ему проще распознать, чем вспомнить.
Необходимо помнить о базовом принципе, на котором строится работа с фильтрами на сайте — сначала контент, потом фильтрация.

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

Можно сразу выдавать результат уже упорядоченный по какому-либо признаку. В первом экране (или на первой странице) можно показывать самые продаваемые товары. Либо новинки. Либо то, что вы хотели бы продвинуть среди покупателей (акционные товары). Как показывает аналитика — как минимум из любопытства пользователи будут активно кликать в первые пункты даже не отсортированной выдачи.

По первым результатам кликают просто потому, что они первые.

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

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

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

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

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

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

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

Конечно же, в хорошем фильтре всегда есть возможность сбросить текущие условия.

Какие ещё приёмы можно использовать для повышения удобства сайта?

Давайте рассмотрим ввод чисел, диапазонов. Например, цены.

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

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

Благо количество готовых скриптов на основе jQuery позволяет быстро внедрить такое решение. Пример такого скрипта — https://ghusse.github.io/jQRangeSlider/stable/demo/

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

Мы двигаем ползунок прямо в поле ввода и видим, насколько изменилось число.

В случае, когда мы задаём диапазон, можно сразу на ползунке показывать количество доступных вариантов.

Это помогает сразу увидеть, что все доступные варианты находятся между 1 и 2 миллионами, а за 1 млн 800 тыс. вариантов примерно раза в 3 больше, чем за 1,5.

Мы знаем ориентировочный результат даже до изменения параметров!

Ну и в конце хочется привести пример чуть ли не лучшего фильтра для продуктов банка.

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

Если у вас есть интересные решения — буду рад, если вы поделитесь ими в комментариях.