Как UX поиска в интернет-магазине влияет на поведение покупателя: примеры удобных и сомнительных решений
Уже на этапе поиска товара можно удержать и приятно впечатлить пользователя, или наоборот избавить его от желания оформлять заказ. Мы покажем, как это работает в контексте популярнейших российских интернет-магазинов автозапчастей. Пройдемся по достоинствам и недостаткам, а в конце расскажем, как сделать так, чтобы поиск работал лучше.
Согласно исследованиям, большинство автовладельцев покупают автозапчасти самостоятельно в интернете, а не на СТО. Они хотят сэкономить время и деньги, при этом не потеряв в возможности выбирать. Учитывая тенденцию на устаревание автопарка, тенденция к самостоятельной покупке может становиться все более актуальной.
Если раньше профильные интернет-магазины автозапчастей лидировали по количеству продаж и клиентов, то сейчас их вытесняют маркетплейсы, работа с которыми стала привычной и удобной для пользователя.
Большинство решений UX-дизайна основаны на эмпирическом опыте, собранном на базе поведенческой и когнитивной психологии. Со временем некоторые из паттернов поведения человека в диджитал-среде сформировали определённые UX-законы. Например, «Закон Якоба»: «Пользователи проводят большую часть времени на других веб-сайтах, они предпочитают, чтобы ваш сайт работал так же, как и все другие, которые они уже знают».
В этой статье мы рассмотрим, насколько хороший UX демонстрируют популярные в России интернет-магазины автозапчастей. Сравним пользовательский опыт на одних и тех же сценариях, чтобы подсветить классные решения или указать на минусы интерфейса. Как исправить минусы, тоже расскажем.
Вот наши конкурсанты:
Эти и другие сайты наши коллеги из fuse8 исследовали на предмет быстроты работы и показателей производительности, которые также влияют на удобство пользователя. Советуем ознакомиться с их материалом, если интересно, кто победит в конкурентной борьбе с маркетплейсами.
Портрет пользователя и сценарий для исследования
Для анализа мы придумали портрет пользователя с одной проблемой.
Кто? – Молодой мужчина по имени Петр. Он не особенно разбирается в автомобилях и не сталкивался с их ремонтом прежде.
Какую задачу решает? – Петр знает партномер детали, необходимой ему для ремонта авто. Чтобы пройти регулярное техобслуживание, Петр должен купить масляный фильтр с партномером 2630035505.
User story: Петр ищет деталь на разных сайтах. Не принципиально найти самую дешевую, но хотелось бы соблюсти баланс цены и качества при самой быстрой доставке из возможных.
Мы можем предположить, что большинство пользователей, среди которых и наш Пётр, посещают популярные интернет-магазины и маркетплейсы, где через стандартную строку поиска можно искать товары по ключевым словам, описанию или артикулу. Значит, Пётр, зная партномер детали, скорее всего, попробует ввести его в поиск.
У меня есть партномер детали, я хочу вбить его в поиск и узнать её стоимость и как/где я могу её получить.
Первое попадание на сайт
У всех конкурсантов строка поиска находится на привычном для пользователей интернет-магазинов месте — в середине Хедера справа от логотипа компании. Это хорошо, потому что соответствует Закону Якоба и человеческому поведению.
Вбивание партномера в строку поиска
Пользователю удобно, когда при вводе поискового запроса система начинает предугадывать, что конкретно может искать пользователь. Это проявление отклика системы. Сайт откликается, когда подсказывает пользователям что происходит в данный момент, объясняет, есть ли какая-то ошибка, или наоборот демонстрирует, что всё ок, и надо немного подождать.
Посмотрим, насколько хорошо сайты-конкурсанты откликаются на действия пользователя в процессе поиска деталей.
«Экзист», «Эмекс ру» и «Автопитер» показывают подсказки. «Автодок» не выводит никаких подсказок до нажатия «Ввода».
У «Экзиста» в поиске нет плейсхолдера-подсказки того, какие запросы строка «съест» для поиска. Хоть большинство пользователей всё равно попробуют вбить туда партномер, подобная подсказка – приятный бонус и сигнал пользователям, что они все делают верно.
Люди любят узнавать о том, что они все делают правильно – а это и есть часть хорошего UX — формировать положительные впечатления от сайта.
Выпадающий список для поиска
Если проигнорировать выпадающую подсказку и нажать «Ввод», то «Экзист» и «Автопитер» всё равно предлагают уточнить производителя. Это происходит на отдельной странице, где видим полный список товаров, подходящий под выбранный партномер. Такое поведение свойственно не для всех поисковых запросов, но порой системы «Экзиста» и «Автопитера» просят этих пояснений.
у «Экзиста» такая уточняющая страница выполнена хуже, чем, например, у «Автопитера». Заголовок страницы не соответствует текущему состоянию, а полезная для юзера кнопка уточнения запроса притягивает взгляд куда меньше чем другие элементы на странице.
«Автодок» для некоторых позиций уточняет производителя уже после ввода данных в модальном окне, развернутом на весь экран. Это паттерн на отвлечение пользователя – если в процессе какого-то действия или загрузки пользователь отвлекся на другое дело, то, когда он вернётся, он должен понимать что происходит. Если пользователь ожидал поисковую выдачу, отвлекся и вернулся, а там страница уточнения, он может не понять, что это, и закрыть страницу.
У «Автопитера» страница выполнена более элегантно, есть поясняющий текст «По запрошенному номеру найдены совпадения у разных производителей — это могут быть разные детали», поэтому пользователь будет понимать что происходит.
Загрузка поиска
Для сайтов поиска деталей свойственно обращение к базе с миллионами предложений от тысяч поставщиков, поэтому скорость загрузки поиска может замедляться из-за работы баз или скорости интернета.
Важно показать пользователю, что запрос обрабатывается, и страница не зависла. «Экзист» и «Автопитер» работают быстро и не поясняют состояние сервиса. А вот «Автодок» и «Эмекс ру» даже при быстрой загрузке страницы успевают продемонстрировать состояние загрузки. Это хорошо для ситуаций, если у пользователя будет, например, медленный интернет.
Поисковая выдача
Интернет-магазины автозапчастей в России начали развиваться раньше чем крупные маркетплейсы. Стандарт отрасли, используемый до сих пор, сформировался давно, и он отличается от привычного большинству людей. Поэтому поисковая выдача на исследуемых нами сайтах не похожа на выдачу, например, Озона.
Автомобильные детали приходят от разных поставщиков, имеют разную цену из-за особенностей логистики и надежности поставщика, доставляются за разное время. Опираясь на эти детали, выдача и ранжируется.
Кроме того, уникальных автотоваров несколько миллионов видов, и зачастую данные о некоторых из них не вполне достоверные. Может не быть доступных для ознакомления характеристик и описаний, либо в них могут встречаться ошибки и неточности. Это мешает покупателю выбирать товары и пользоваться сайтами автозапчастей так же, как и маркетплейсами.
При разработке интернет-магазина для афтермаркета важно сформировать выдачу товаров так, чтобы даже пользователь, не знающий об особенностях агрегации автотоваров, понимал как сработала выдача и мог отыскать в ней нужный товар или его аналог с подходящими ему параметрами.
Тут интерфейсные решения сайтов начинают отличаться. «Экзист», «Эмекс ру» и «Автопитер» показывают выдачу товара таблицами: сверху запрошенный артикул и варианты его поставок с наличием, датами поставки, рейтингом товара и ценой, а ниже предлагаются замены.
А вот «Автодок», например, выбрал более «маркетплейсный» вариант для просмотра страницы незарегистрированным пользователем. Зарегистрированные же пользователи в результате поисковой выдачи видят таблицу.
Это интересный сценарий. С одной стороны – ориентация на портрет пользователя типа Петра — юзер видит страницу товара, которая напоминает ему привычные страницы маркетплейсов. Также подобная схема может принуждать пользователей к регистрации и повышать конверсию (хотя те, кто не любить регистрироваться только «чтобы спросить», скорее всего, покинут сайт).
Кнопка «Узнать цену» рядом с фото, напротив, может привести к когнитивному диссонансу нашего Петра, ведь он не знаком со спецификой сайтов автотоваров.
Таблица же точно не подойдет для Петра, который плохо разбирается в теме. В отличии от Экзист и Эмекс опции товара у Автодока находятся ниже замен. Возможно, так продвигаются продажи замен, но – помня Закон Якоба – пользователю, если он до этого посетил сайты, где замены были ниже основных опций, будет непривычно. Пользователь может устать разбираться, что есть что, и перейти на сайт с более удачным оформлением выдачи.
Фишка Эмекса
Если это первое посещение сайта пользователем, то между экранами поиска и поисковой выдачи даже без регистрации «Эмекс ру» предлагает сначала выбрать ПВЗ.
Работать такое будет не для всех. Если у компании точек ПВЗ мало, правильнее будет разместить выбор точки выдачи при оформлении заказа (как это зачастую и происходит). Так, к моменту выбора ПВЗ уже будет сформирована некая ценность для пользователя, ведь он уже потратил время и силы на поиск и выбор детали на сайте – теперь будет проще решиться на заказ, даже если точка выдачи будет не самой удобной.
Хоть мы и понимаем, что изменение цены в зависимости от ПВЗ – следствие бизнес-модели компании, такой подход усложняет жизнь покупателю. Противоречие Закону Якоба налицо. Чтобы улучшить пользовательский опыт, стоило бы отдельно отображать неизменную стоимость товара, и для каждого ПВЗ показывать стоимость доставки уже на этапе оформления заказа. Идеально – сделать цену одинаковой для всех ПВЗ, но тогда компании придется менять подход в построении бизнеса.
Как сделать лучше
Экзист
- Не давать пользователю выборов, которые не приводят к каким-то важным изменениям — убрать выбор поиска по штрих коду или артикулу и просто выдавать товар. Добавить это уточнение, только если система не поняла, что именно было введено в поиск.
- Сделать блок уточнения номера более заметным и понятным — пользователь должен понимать, что именно он уточняет.
- Переместить кат «Ещё предложения» в более заметное место, чтобы пользователь не упустил все доступные ему опции.
Автодок
- Уточняющую подсказку можно вынести в выпадающую часть строки поиска. Так она будет напрямую связана с действием поиска и пользователь сразу попадет на выдачу.
На странице товара для незарегистрированных пользователей можно было бы поработать над текстом, например «Уточнить цену у конкретного поставщика» или «Зарегистрируйтесь, чтобы уточнить цену у конкретного поставщика».
Таблицу выдачи стоит отформатировать таким образом, чтобы соблюсти правила близости и якорения внимания пользователя — это облегчит ему просмотр сложных данных и облегчит выбор товара.
Эмекс ру
- У искомого товара много атрибутов: фото, отзывы, другая информация. Атрибуты отображаются разными пиктограммами, и для пользователя это не очевидно. Лучше поместить всю информацию о товаре в единое модальное окно и придумать для него единую точку входа. Например, по клику пиктограмму «i». Если атрибутов не хватает, то писать об этом внутри модального окна. Например, «нет отзывов» или «нет фото».
- Сделать подсказку для пользователя в поисковой строке, которая будет уведомлять об отклике системы. При нынешнем отображении пользователь в неведении, «понимает» его интерфейс или нет. Можно хотя бы предложить пользователю выбрать производителя товаров по мере введения партномера в поисковую строку, если для искомого номера их несколько.
Автопитер
- Опции «Самый дешевый» и «Самый быстрый» для многих пользователей решающие, поэтому стоит сделать их UI более заметным. Можно переместить их на более видное место и добавить информации о товаре, чтобы облегчить пользователю выбор именно этой опции.
- Если у большинства товаров на сайте нет фото, то можно отказаться от заглушки «Без фото». Так пользователю не будет казаться, что карточка товара недоработана.
- Для многих пользователей важна доставка товара в день заказа. Поэтому можно написать в колонке сроков не 0, а «сегодня» и выделить его. Получим акцент, выделяющий этот вариант, и избавимся от ощущения ошибки из-за не консистентного русскому языку сроку доставки «0 дней».
А вы пользовались интернет-магазинами из списка? Что можете сказать об их удобстве и интуитивности?
Пока мы рассказали только о функции поиска на исследованных ресурсах, но выпустим аналогичные статьи и о других функциях сайтов, вплоть до оформления заказа. Чтобы картина стала более полной, советуем ознакомиться с материалом наших коллег из fuse8, которые исследовали удобство работы с популярными интернет-магазинами автозапчастей с точки зрения быстроты их работы.
Будем рады любому отклику в комментариях – делитесь мнениями о статье.
***
Если вам нравится наш подход, приходите за продуктовым дизайном сервисов любой сложности к нам в Brele.
Связаться можно в телеграме → @Andrey_Davydov
Да, сценарий с поиском по номеру детали это стандарт, но многие Петры хотят искать "правая фара на Мазда 6 2007 года". А такой сценарий пока что мало где реализован нормально.