Какими должны быть мобильные фильтры товаров в 2021? + Геймификация подбора

Всем привет!

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

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

Решаем задачу на ПК: открываем новую вкладку → гуглим → открываем ссылку → возвращаемся.

Ушло 17 секунд.

Решаем задачу на смартфоне: сворачиваем приложение → открываем браузер → дожидаемся запуска → гуглим → читаем → открываем список запущенных приложений → возвращаемся.

Ушло 29 секунд.

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

Консультанты часто помогают сделать хорошую покупку. Но в фильтрах никто не поможет пользователю с его ограниченными (иногда ложными) знаниями о товарах.

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

По поводу мобильных фильтров я поговорил с двумя проектировщиками: плохим и хорошим.

Но есть и другая точка зрения.

Позиция хорошего проектировщика мне ближе.

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

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

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

Итак, мы применили 10 фильтров, но на мобильном экране мы не видим, к чему это привело. В лучшем случае на кнопке будет написано, что после фильтрации вам доступно 50 товаров. Но сам список товаров вы увидите только тогда, когда выйдите из интерфейса фильтров к списку товаров.

Это противоречит важному признаку хорошего интерфейса: наличию молниеносной обратной связи. Об этом написано в книге А. Купера «Об интерфейсе».
Статья Nielsen Norman Group также говорит о важности отображения товаров
на странице с фильтрами.

Решение

А что, если внизу разместить сворачиваемый и разворачиваемый блок с отфильтрованными товарами. Все товары выводить не нужно. Но 20 наиболее релевантных можно.

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

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

Решение

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

Плохо, когда цвет устройства просто написан текстом «Красный», «Синий» и т.п.

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

Лучше, когда есть и пиктограмма, и подпись.

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

Решение

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

Поддерживаю это решение и желаю опаздывающему большинству скорее к этому прийти.

Поиск должен быть там, где больше 12 фильтров. Он также должен быть в фильтрах с большим количеством вариантов.

Поиск должен быть не только семантический, но и смысловой. Например, если пользователь хочет найти фильтр «Аккумулятор», этот вариант должен находиться по запросам вроде «Батарея», «Размер батареи» и т.п.

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

Как же упростить процедуру выбора, при этом сделать выбор осознанно?

Решение

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

Вывод: Нужно геймифицировать процедуру выбора – поиграть с потенциальным покупателем в вопрос-ответ.

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

Вот, почему такая форма нам не подходит:

1. Она не гуманна.

Если бы Алиса, Siri или ассистент Олег не умели бы шутить и по-человечески реагировать на действия пользователя, ими было бы неинтересно пользоваться.

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

2. Интерфейс задаёт сложные технические вопросы

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

3. После ответа на вопросы он предлагает большое количество товаров

Несколько десятков. Это противоречит логике: консультант в магазине никогда не покажет вам 40 товаров, он предложит 3 – 7 наиболее подходящих, чтобы ваша голова не кружилась от изобилия.

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

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

Однако похвалим DNS за попытку сделать взаимодействие удобнее.

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

Для нашей задачи идеально подходит чат

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

Знакомьтесь, это Гоша. Гоша знает всё о популярных смартфонах в разных ценовых категориях. Он знает, какие телефоны подходят блогерам, какие – детям, а какие – начальнику.

Вот, как это выглядит.

В конце диалога Гоша предлагает наиболее подходящие для вас смартфоны.

Среди нас мало экспертов в сложных продуктах. Изобилие непонятных нам товаров заставляет нас страдать. Пользователь будет рад, если вы уберёте всё лишнее и покажете ему то, что нужно ему в его случае.

Решение

Группируйте фильтры по типам пользователей и поводам для покупки. Так вы поможете людям и повысите вероятность покупки.

Охотник будет очень рад подборкам фильтров, помогающим найти влагостойкий и живучий телефон.

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

Мать оценит подборку фильтров к телефонам для детей.

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

Горизонтальный слайдер с вариантами в отличие от вертикального списка помогает экономить пространство.

Вставляйте в слайдер 5-7 популярных вариантов, а все остальные варианты пусть будут доступны по клику на кнопку «Все».

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

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

Поле для ввода значения должно иметь крестик для быстрого удаления введённого.

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

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

Разместите самые популярные фильтры в начале списка.

То же самое сделайте с вариантами. Если разрешение экрана 1920X1080 является самым популярным, оно должно быть самым первым в списке.

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

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

3. Делайте интерфейс информативнее: оставляйте подсказки к сложным параметрам, добавляйте иллюстрации, картинки и видео. Не оставляйте пользователя наедине с его некомпетентностью.

4. Делайте обратную связь быстрой: отображайте отфильтрованные товары на странице фильтрами, но оставляйте пользователю возможность скрыть их.

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

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

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

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

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

Спасибо, что дочитали до конца! Напишите в комментах, чем ещё можно улучшить мобильные фильтры.

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

Хорошей недели!