Юзабилити фильтровых слайдеров: от бесполезности к эффективности

Специалисты Baymard Institute, изучающие вопросы юзабилити в ecommerce, обратили внимание на фильтровые слайдеры — ползунки, с помощью которых интернет-магазины предлагают посетителям выбирать ценовой диапазон и т.п. Оказывается, не всё так просто.

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

Факты:

  • Более 50% тестировщиков, которых Baymard привлекает к исследованиям, неверно истолковали назначение ползунков и в дальнейшем имели ряд затруднений, связанных с этим элементом.

  • Самая распространённая проблема — слишком высокая чувствительность ползунков.

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

В данном материале мы рассмотрим 5 атрибутов эффективной реализации этого инструмента.

1. Неравномерный рост значений на шкале слайдера

Когда интернет-магазин использует слайдер, значения на шкале которого распределяются равномерно, получается, что на (примерно) половину этой шкалы приходится всего 5-10% товаров.

Типичные крайние значения шкалы, например, ценового слайдера — 0 и цифра, отражающая стоимость самого дорого товара. При этом, основная часть ассортимента магазина стоит вдвое и более дешевле этого самого дорогого товара. В результате, ползунок становится почти бесполезным и очень неудобным в использовании. Если самый дорогой товар в магазине стоит 100.000, а основа ассортимента — в рамках от 10.000 до 20.000, пользователю приходится приложить немало усилий для того, чтобы выставить ползунки на нужные ему значения.

Равномерное распределение значений по шкале слайдерного фильтра — распространённая ошибка. 83% Из 50 топовых интернет-магазинов мира, в которых используется такой инструмент, практикуют именно такой подход.

83%, но не все. Хороший пример — интернет-магазин Disney.

Ценовой слайдер в магазине Disney.jpg

Диапазон шкалы здесь — от 0 до 5.000. Однако рост значений на этой шкале неравномерный. Посмотрите на рисунок справа, там ползунок передвинут за середину шкалы, однако выбранный диапазон при этом — от 0 до 784, а не ожидаемый от 0 до 3.700. При таком подходе и орудовать фильтром проще, и товаров с его помощью можно увидеть больше.

2. Понятное обозначение двух ползунков

Более 50% тестировщиков, привлечённых Baymard к работе неверно интерпретировали фильтровые слайдеры с двумя ползунками.

Нередко потребитель имеет верхнюю планку бюджета покупки, но не имеет нижней. Он готов заплатить за товар до такой-то суммы. При этом, во многих магазинах начальное положение ползунков на фильтрах — нижняя и верхняя границы. В таких случаях, многие посетители двигают левый ползунок, ожидая получить диапазон от 0 до приемлемой для них границы. Однако вместо этого они получают другой диапазон: от “потолка” их бюджета до верхней границы шкалы.

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

Ценовой слайдер в магазине Waifair.jpg

3. Интерпретация кликов по шкале

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

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

Специалисты Baymard утверждают, что в таких случаях перетаскивать ползунки в точку клика не следует. Причин этому две: 1) при такой реакции сайта посетитель может подумать, что у данного конкретного слайдера всего один ползунок, и 2) угадать, какую именно границу сдвигать — нижнюю или верхнюю — практически невозможно.

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

4. Поля для ввода цифр как альтернатива слайдеру

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

Хороший пример приведён выше, магазин Wayfair. Ещё один пример — страница категории с фильтрами в магазине Blue Nile:

Ценовые поля в магазине Blue Nile.jpg

Слайдеры и поля, кстати, применимы не только как фильтр цены. Вот пример из магазина Lens Hawk:

Фокальный слайдер в магазине Lens Hawk.png

Здесь с помощью слайдера и/или полей посетителю предлагается указать параметры объективов. И, помимо непосредственно шкалы и ползунков, есть поля для ввода значений вручную.

5. Мгновенная реакция на действия посетителя

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

Пример с уже упомянутого сайта Lens Hawk:

Мгновенная реакция на перетаскивание ползунка в магазине Lens Hawk.gif

Здесь перетаскивание ползунка оказывает влияние на выдачу товаров мгновенно. Такое решение не только позволяет посетителю быстрее сориентироваться в доступном ассортименте и удерживает его на сайте (движение лучше статики), но и стимулирует к изучению других, ранее не рассматриваемых вариантов, что создаёт возможности для кросс- и ап-сэллинга. Рекомендуемый Baymard верхний порог задержки обновления результатов на странице — 500 мс.

Слайдеры — не самый популярный в ecommerce инструмент. Из топовых 50 интернет-магазинов только 16% имеют на своих страницах шкалы с ползунками. И в этом есть смысл: согласно мнению специалистов Baymard, слайдер — штука специфическая, и внедрение его оправдано далеко не всегда. В частности, при отсутствии ресурсов для реализации ползунков и шкал в соответствии с приведёнными выше рекомендациями лучше не приступать к добавлению такого функционала на сайт вообще.
Автор: Vyacheslav Vityuk

Подписаться на новости

Читайте также

25 октября / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

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

далее →

26 сентября / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

6 сентября / Комментарии

Комфорт покупателей как залог успешного бизнеса. Основные ошибки в юзабилити интернет-магазинов

Четыре года назад была опубликована статья «22 ошибки в юзабилити интернет-магазинов, а также работающие варианты по их исправлению». Мы решили, что настала пора освежить данную информацию и задали разработчикам сайтов и CMS следующие вопросы: «Какие указанные в данном материале ошибки по-прежнему актуальны?», «С какими юзабилити-ошибками интернет-магазинов вам приходится встречаться чаще всего?», «Какие юзабилити-советы вы можете дать заказчикам?». И вот что мы узнали.

далее →

11 августа / Комментарии

Чек-лист юзабилити интернет-магазина

По-настоящему проверить удобство интернет-магазина без подтверждения данными веб-аналитики, не получится. Контекст взаимодействия; задачи, опыт и мотивы пользователей; устройства, с которых пользователи просматривают магазин — всё это влияет на конверсию и не может быть оценено чек-листом.
При составлении чек-листа, я ориентировался на исследования института Baymard, Юзабилити Лаб, Mastercart и студии Сибирикс + некоторые собственные наблюдения.

далее →

Навигация как способ управления вниманием пользователя

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

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook