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

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

Всем привет!

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

Почему нельзя относиться к мобильным фильтрам халатно?

Проведём эксперимент

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

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

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

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

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

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

Фильтры – это очень важно! Но не все делают их хорошо

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

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

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

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

Плохой проектировщик

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

На смартфоне целый экран отдан только фильтрам. Целый экран для создания удобных и полезных интерфейсных решений. Да там такое придумать можно!

Хороший проектировщик

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

Проблемы мобильных фильтров и их решение

Проблема 1. Нет подсказок и полезной информации, помогающей в выборе

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

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

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

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

Проблема 2. Отсутствие обратной связи: товары не отображаются на странице фильтров.

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

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

Решение

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

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

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

Проблема 3. Нет иллюстраций к сложным параметрам

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

Решение

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

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

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

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

Пример оформления вариантов с цветами устройства
Пример оформления вариантов с цветами устройства
А разницу между диагоналями экрана можно показать так
А разницу между диагоналями экрана можно показать так

Проблема 4. Нет быстрого доступа к примененным фильтрам

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

Решение

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

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

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

Проблема 5. Хороший поиск – это редкость.

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

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

Проблема 6. Нет режима для чайников

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

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

Решение

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

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

Как же должен выглядеть наш режим для чайников?

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

Так выглядит Smart-консультант у DNS.
Так выглядит Smart-консультант у DNS.

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

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

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

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

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

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

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

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

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

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

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

Идеальная форма интерфейса для мобильного консультанта в продаже сложного продукта должна:

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

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

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

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

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

Чат с онлайн-консультантом. 
Чат с онлайн-консультантом. 

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

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

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

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

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

Решение

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

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

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

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

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

Подборки фильтров в мобильном приложении
Подборки фильтров в мобильном приложении

Несколько важных мелочей

Слайдер с вариантами компактнее вертикального списка

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

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

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

Для каждого варианта стоит писать сколько товаров с данным параметром есть в магазине.
Для каждого варианта стоит писать сколько товаров с данным параметром есть в магазине.

Используйте ручной ввод, ползунок и варианты с диапазонами одновременно

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

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

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

Выносите сервисные фильтры вверх списка

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

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

Выносите популярные варианты вверх списка

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

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

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

Однако в некоторых случаях варианты лучше размещать по порядку.

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

Выводы

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

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

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

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

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

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

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

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

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

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

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

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

4343
13 комментариев

"поиграть в покупателя" это геймификация? серьезно?))

это какой-то тренд с горизонтальными скроллами?

2
Ответить

Комментарий недоступен

1
Ответить

Jost

1
Ответить

Хорошая статья. По итогу купил книгу Алана Купера Об интерфейсе =)

Ответить

Это очень хорошая покупка.

1
Ответить

Комментарий недоступен

Ответить

Комментарий недоступен

Ответить