M-commerce: особенности поиска и фильтрации в мобильной версии сайта

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

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

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

Вы узнаете:

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

KISLOROD специализируется на разработке и развитии e-commerce проектов. Подписывайтесь на блог и телеграм-канал, чтобы не пропустить новые статьи.

О реализации функционала поиска на десктопе мы подробно писали в этой статье. Не будем дублировать общие принципы, сконцентрируемся на особенностях поиска на мобильных устройствах.

В исследовании Baymard Institute 60% пользователей приступали к изучению сайта и товаров с помощью поиска. Для них этот вариант был более быстрым и удобным, чем навигация по категориям.

При этом в другом исследовании заметили, что более 50% пользователей пытались выполнить поиск по категории, в которой они находятся в данный момент, а не по всему сайту. Такой функционал не поддерживало 94% сайтов на смартфонах, выполняя поиск по всему интернет-магазину. Исследователи отмечают, что эта проблема была причиной ухода посетителей с сайта.

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

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

Автозаполнение при вводе запроса на wildberries.ru

Мы рекомендовали не выводить статус «Ничего не найдено» на странице результатов поиска на десктопе. Но на мобильных устройствах это еще важнее — из-за проблем с навигацией.

Страница без результатов становилась тупиком для пользователя. Если посетителя не направить дальше, то высока вероятность, что он покинет сайт.

Чтобы этого не произошло, можно предложить пользователю:

альтернативные поисковые запросы (менее специфические или синонимы);
переход на главную или на сервисные страницы, в подходящие категории, к онлайн-консультанту;
другие товары — бестселлеры, акционные или подобранные персонально, исходя из прошлых покупок.

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

Удобный для пользователей функционал фильтрации на десктопе — это простые элементы управления, а также одновременный вывод фильтров и результатов на одном экране.

В мобильных версиях показывать параметры фильтрации и результаты фильтрации одновременно сложно. Для отображения фильтров можно использовать модальное окно.

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

Пример реализации фильтра на wildberries.ru

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

Подтверждение выбранных параметров на ozon.ru

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

Также пользователи не могли быстро сбросить выбранные параметры, когда это было необходимо — им приходилось открывать интерфейс фильтрации, прокручивать список параметров, чтобы найти ранее выбранные и удалить их. Из-за этого многие отказывались использовать функционал мобильной фильтрации.

Если пренебречь этими нюансами, пользователи могут:

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

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

1. Вывод с помощью карусели

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

Вывод параметров фильтрации с использованием карусели на mytoys.ru

2. Вывод списка в несколько строк

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

Вывод параметров фильтрации в несколько строк на eldorado.ru

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

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

Исследование Baymard Institute показало, что 45% испытуемых пытаются применить несколько значений одного и того же фильтра. Например, выбирая юбку красного или синего цвета пользователи ожидают, что в результате работы фильтра в списке товаров будут юбки как красного, так и синего цвета.

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

По наблюдениям Baymard Institute, одним из самых сложных элементов мобильной фильтрации для пользователей являются ползунки:

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

Это не означает, что ползунков нужно избегать. Но чтобы они были полезны для покупателей, важно:

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

Мы уже писали, чем сортировка отличается от фильтрации. Задача сортировки — распределить товары на странице таким образом, чтобы наиболее подходящие для пользователя позиции оказались сверху. Для этого применяется несколько параметров: по алфавиту, по возрастанию цены, по популярности покупок, рейтингу товаров и так далее. В большинстве случаев сортировка одинаковая на всех страницах с товарами, но можно добавить отдельные параметры (выбрать 3-5 значимых фильтров) для разных категорий товаров.

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

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

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

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

И не забудьте поставить лайк (+1), если понравился материал. А еще мы открыты к вопросам — задавайте в комментариях.