{"id":13508,"url":"\/distributions\/13508\/click?bit=1&hash=84881d55bbad8a9fea0858220d4fa15ea06fdd4fceb0218db01a425f0cc754d2","title":"\u041a\u0430\u043a \u0441\u043d\u044f\u0442\u044c \u0440\u043e\u043b\u0438\u043a \u0441 \u0440\u0430\u0431\u043e\u0442\u043d\u0438\u043a\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043d\u0435 \u0441\u0442\u044b\u0434\u043d\u043e","buttonText":"","imageUuid":"","isPaidAndBannersEnabled":false}
Дизайн
Antro

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

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

Ранее в сериале

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

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

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

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

Фильтрация

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

Без этой механики пользователь:

— не может сразу найти подтверждение своим действиям;

— не может быстро сбросить фильтры;

— не понимает контекст изменения списка продуктов.

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

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

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

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

Карусель

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

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

Надо, как у Wayfair, показывать больше 50% кнопки

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

Общий список

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

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

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

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

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

Один из наших проектов, где всё по фэншую

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

Asos показывает количество товаров на кнопке фильтра

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

Не нужно делать, как Zara и DNS

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

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

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

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

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

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

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

«220 Вольт» продаёт технику и инструменты — им нужно указывать тип фильтра

Цена

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

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

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

  • спорт (наборы мячей, инструментов, аксессуаров и т.д.);
  • канцелярские товары (бумага для печати, ручки и т.д.);
  • продукты питания (500 грамм против 1 кг овощей, 500 миллилитров против 1 литра йогурта и т.д.);
  • оборудование (винты, лампочки и т.д.);
  • напитки (вода в бутылках, ящики с вином и т.д.);
  • электроника (ёмкость жёсткого диска, память и т.д.);
  • дополните список сами.
Iherb показывает стоимость одной капсулы в банке

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

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

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

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

«М.Видео» и DNS предлагают отфильтровать товары по рейтингу

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

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

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

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

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

Комбинация фильтров

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

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

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

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

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

  • разрешите комбинировать несколько значений одного типа фильтра;
  • используйте логику «И» для типов фильтров и логику «ИЛИ» для значений фильтров;

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

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

  • визуально указывайте, что можно выбрать несколько параметров — используйте чекбоксы.
Чекбоксы для нескольких значений у Wildberries vs полное отсутствие иконок у Zara

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

Свитчер для одного значения в «Яндекс.Маркете» и Ozon

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

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

Радиобаттон для одного возможного значения

Время отклика

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

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

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

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

Объясняйте значения фильтров

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

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

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

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

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

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

Один из наших проектов

Сортировка

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

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

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

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

● страх пропустить релевантные продукты за пределами выбранного диапазона. Действует FoMO (Fear of missing out) — навязчивая боязнь упустить выгодное предложение;

● недостаток знаний в предметной области;

● неопределённость в собственных предпочтениях и ограничениях.

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

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

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

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

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

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

Выпадающие списки

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

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

Пользователю видно только 6 параметров

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

Они должны:

  • давать обзор всех элементов — при необходимости занимать весь экран;
  • иметь область попадания не менее ~7x7 мм;
  • показывать, что список можно раскрыть — иметь индикаторы в виде стрелок.

Ползунки — игрушка дьявола

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

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

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

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

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

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

  • это увеличивает риск, что пользователь неправильно интерпретирует ползунок за одноручный;
  • невозможно достоверно предсказать, какой из дескрипторов пользователь хотел переместить.

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

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

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

Выводы

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

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

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

0
3 комментария
Damir Serikbayev

Здравствуйте подскажите от какого размера в пикселях должен быть текст, что был не мелкий и читабельный? 

Ответить
Развернуть ветку
Antro
Автор

Привет, Дамир!

Спасибо тебе за вопрос и храбрость, а то в этот раз в комментах пустовато :с

В дизайне кегль (размер) текста принято измерять в пунктах, а не в пикселях. Мы рекомендуем использовать 14pt для основного текста. Допустимо использовать 13pt для футера.

Есть исключения, но перечислять их в комментах очень долго.

Отдельно следите за гарнитурой, от неё readability тоже зависит. Как пример, проблемы у ASOS, которые мы описали в прожарке. 

Ответить
Развернуть ветку
Satom.ru

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

Ответить
Развернуть ветку
Читать все 3 комментария
null