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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Используйте выпадающие списки в сортировке

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


Источник