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

Продолжаем рассказывать про особенности mCommerce. В новой статье о фильтрах и сортировке. Мы в Mojo изучили исследования независимых институтов и подкрепили их своим опытом.

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

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

В третьей описали типы поисковых запросов в интернет-магазинах.

Сегодня — очередная порция контента из рубрики «Очевидное — невероятное».

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

Тем не менее в исследовании Baymard 32% интернет-магазинов предпочитают оставлять пользователей в неведении.

Примененные фильтры стоит размещать горизонтально. Так все функции будут сконцентрированы в одном месте над списком продуктов. Пользователь сможет выбирать параметры и изучать товары без лишних скроллов.

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

Решения проблемы:

Карусель

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

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

Помните о размере кнопок — они должны быть не меньше 40х40 px. Зону нажатия нужно делать немного больше элемента навигации. Да, мы будем повторять это в каждой статье про «мобилку» и не только.

Общий список

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

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

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

Размещайте кнопку «Очистить фильтры» в начале списка или вообще вынесите отдельно. Используйте иконки-крестики — просигнализируйте пользователю, что параметры можно удалять.

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

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

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

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

Сопутствующие проблемы:

Решение — опираться на конкретный кейс.

Например, в интернет-магазинах одежды фильтры не требуют пояснений. Всем понятно, что такое «Бежевый», «М», «От 4850р».

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

Цена

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

Добавьте «Цена за единицу» — так пользователям будет проще сравнивать похожие продукты, продаваемые в разных объёмах.

В каких категориях включать:

Сделайте «Цену за единицу» опцией сортировки.

Средний рейтинг пользователей

45% пользователей делают онлайн-покупки потому, что могут видеть чужие отзывы.

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

Добавьте фильтрацию по рейтингу — сэкономьте время посетителям сайта.

Цветовой фильтр

Фильтр по размеру

Фильтр брендов

Думаем, здесь пояснять не нужно.

Тестирование Baymard показало, что 32% интернет-магазинов ошибочно делают фильтры взаимоисключающими. В итоге пользователи могут выбрать только одно значение (например, «Синий») за раз для одного типа фильтра (например, «Цвет»). При этом 45% пользователей пытаются применить несколько значений фильтра одного и того же типа.

На этом ожидания людей не ограничиваются.

Если человек находится в категории «Холодильники» и применяет фильтры «Однодверные» и «Марка: Samsung», он ожидает увидеть соответствующие товары в выдаче.

Когда пользователь выбирает несколько опций в одном типе фильтра, он ожидает, что выдача будет соответствовать любому из значений. Например, если покупатель в категории «Холодильники» также выбрал «Марка: Bosch», он ожидал бы увидеть однодверные холодильники от Samsung или Bosch.

Чтобы помочь пользователям:

Формула предыдущего примера выглядела бы так:

(Формат: ‘Однодверные’) и (Бренд: ‘Samsung’ или ‘Bosch’)

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

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

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

Предлагайте пользователям сначала выбрать пункты фильтрации и потом нажать кнопку «Показать». Динамические изменения контента заставят «скакать» область просмотра. Позаботьтесь об анимации состояния кнопок. На мобильных устройствах руководство по material design предлагает скорость изменения маленьких элементов 100 миллисекунд.

Рекомендации от NN/g

0,1 секунды: ограничение для прямого управления объектами интерфейса. Например, это предел с момента, когда пользователь установил флажок в чекбоксе или выбрал параметр сортировки.

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

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

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

У большинства посетителей нет необходимых знаний, чтобы оценить разницу между, например, частотой обновления экрана 60 Гц, 120 Гц и 240 Гц.

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

Предложите объяснения для отраслевых или неоднозначных фильтров. Иногда профильной лексике нельзя подобрать альтернативу, либо жаргон имеет большое значение для опытных пользователей. В этом случае следует сохранить терминологию (например, «чистота алмаза»).

Однако не забудьте объяснить, что имеете в виду. Например, «Чистота алмаза» описывает количество и тип видимых дефектов». Добавьте пояснение: «I1-3 содержит видимые дефекты, SI1-3 не содержит дефектов, видимых невооруженным глазом, а VS1-2 практически не содержит дефектов, если смотреть под микроскопом».

Такие объяснения могут всплывать в тултипе. Не используйте модалки.

Для начала разберёмся, чем фильтрация отличается от сортировки.

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

Сортировка — делают «мягкую» границу. Она изменяет последовательность продуктов, но не исключает элементы.

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

Почему пользователи предпочитают «мягкие» сортировки:

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

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

Почему 3-5 атрибутов? Чтобы избежать слишком длинных раскрывающихся списков, которые вызывают паралич выбора.

Как определить, какие фильтры «самые важные»? Эти параметры уже должны быть ясны — порядок фильтров ранжируется по значимости.

Приоритетность можно определить экспертной (человеческой) оценкой или программным путём с помощью алгоритмов.

Бывают и обратные кейсы, когда, например, есть сортировка по рейтингу, но нет такого фильтра. Да, «мягкая» сортировка будет популярнее, но богатство фильтрации не введёт пользователя в ступор.

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

Во время тестирования Baymard почти все испытуемые прокручивали списки вверх и вниз, прежде чем выбрать вариант. Многие прямо заявляли, что хотят увидеть все пункты, прежде чем выбрать один. Даже если люди чувствовали, что заметили что-то подходящее, им всё равно хотелось проверить остальные варианты. Снова FoMO дышит в спину. В барабане увидеть все элементы меню сразу невозможно.

Выход — разрабатывать собственные выпадающие списки.

Они должны:

В этом исследовании Baymard ползунки с двойным диапазоном цены были неверно истолкованы более чем 50% испытуемых. Кроме того, «ручки» ползунка были слишком чувствительны, чтобы точно установить желаемое значение.

Правильный дизайн

Более 50% испытуемых принимали двухточечные ползунки за одноточечные. Оформление «ручек» должно указывать, что можно установить несколько значений — используйте стрелки или контрастные круги.

Интерпретация тапов

Если пользователь тапает в точку на ползунке с одной «ручкой», маркер должен перейти к соответствующему значению.

Для слайдеров с двумя указателями единичный таб не должен давать результатов. На это есть две причины:

Добавьте текстовое поле

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

В полях поставьте обозначения «От» и «До», внутри установите плейсхолдеры с минимальным и максимальным значением суммы. Во всех полях нужно продумывать ошибки — как и что произойдёт при неверном вводе. Динамически меняйте значения внутритекстовых полей при перемещении дескриптора.

Для тех, кто пролистал в самый низ:

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

#интерфейсы