7 юзабилити-ошибок в eCommerce, которые мешают купить

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

 

Украинские онлайн-шопперы в 49% случаев оформляют заказ со смартфона, используя мобильный вид сайта. Далеко не все перешли в приложения.

 

Что может остановить ваших пользователей на пути к покупке? Дмитрий Яценко, UX дизайнер агентства Promodo внимательно изучил сайты крупнейших украинских интернет-магазинов из разных ниш, чтобы собрать 7 самых распространенных юзабилити-ошибок с акцентом на мобильные устройства.

Ошибка №1. Неточные клики

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

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

 

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

 

Описывая это наблюдение, я обратил внимание на несколько популярных интернет-магазинов и попытался передать момент касания женского и мужского пальца по экрану:

 

ошибки юзабилити_неточность кликов в мобильной версии сайта

avtozvuk.ua – использование сайта одной рукой,
выбор пункта меню большим пальцем
avtozvuk.ua – использование сайта двумя руками,
выбор пункта меню указательным пальцем

 

юзабилити сайта_клик одной и двумя руками

eldorado.ua – использование сайта двумя руками,
выбор пункта меню указательным пальцем
eldorado.ua – использование сайта одной рукой,
выбор пункта меню большим пальцем

 

Ошибка №2. Поиск не дает релевантную подсказку

Поиск на eCommerce-сайте не менее важен, чем рубрикатор товаров. Он сильно влияет на конверсию. Не верите? Сравните коэффициент конверсии среди пользователей, которые воспользовались перед этим поиском, и тех, кто этого не делал.

Поисковая подсказка с автозаполнением может как приблизить пользователя к заказу, так и сбить с толку. Например, если вы ищете крем для рук на сайте eva.ua и вводите запрос «крем» или «крем для», то подсказка не предлагает на выбор категории товаров, а показывает несколько товаров из 1 000 позиций. Уточняя запрос на «крем для рук», подсказка снова предлагает несколько товаров, но уже из 504 позиций.

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

 

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

 

типовые ошибки юзабилити в интерфейсе

Пример запроса на eva.ua Пример запроса на watsons.ua

 

Несколько советов по визуальной составляющей подсказки:

  • показывайте поиск и подсказки на весь экран (в мобильной версии);
  • группируйте результаты в подсказке (товары, категории, свойства);
  • дайте пользователям понять, если результаты подсказки в мобильной версии можно проскроллить;
  • избегайте прокрутки в версии для ПК;
  • дайте возможность быстро очистить поле с поисковым запросом.

 

Ошибка №3. Поиск не выдает результаты при альтернативных запросах

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

Вот пример подобного поиска на сайте «Нова Лiнiя». Допустим, вы озадачены вопросом замены отопительных батарей. Вводим в поиск «батареи» и… ни подсказка, ни результаты поиска не предлагают ничего подходящего. Только изменив запрос на «радиаторы», вы получите релевантную выдачу.

 

юзабилити_примеры_альтернативные-запросы-в-поиске

Пример запроса «батареи» на сайте nl.ua   Пример запроса «радиаторы» на сайте nl.ua

 

Другой пример: ищем детские подгузники, используя название «памперсы».

 

юзабилити-рекомендации_выдача-результатов-поиска

Пример запроса «памперсы» на сайте prostor.ua   Пример запроса «подгузники» на сайте prostor.ua

 

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

 

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

Ошибка №4. Нет возможности отфильтровать результаты поиска

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

Пример запроса «ноутбуки» на сайте allo.ua. Пользователь сразу переходит в нужную категорию и работает с фильтрами.

 

повышение-юзабилити_возможность отфильтровать результаты поиска

 

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

Пример запроса «ноутбуки» на сайте eldorado.ua. При полном соответствии запроса названию категории, пользователь не имеет возможности фильтровать товары. Даже после выбора предложенной категории, фильтрация не появляется.

 

повышение-юзабилити_неудачный-пример-фильтрации_1

 

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

 

повышение-юзабилити_неудачный-пример-фильтрации_2

 

Ошибка №5. Не отображаются примененные фильтры

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

Кейс 1: Вы гуглите «пылесосы для аллергиков» или подобную комбинацию «категория+назначение», «категория+бренд» и переходите на сайт. Как правило, в целях поисковой оптимизации, переход по таким запросам реализуется через включение фильтров на странице категории.

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

Кейс 2: Зайдя в определенную категорию товаров, вы начинаете работать с фильтрами. И после их применения видите список товаров. Что может быть не так, если вы не видите примененных фильтров? Очевидно, что вы можете начать сомневаться, применились ли они вообще.

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

Первый пример: comfy.ua – примененные фильтры не отображаются, а для их отмены необходимо найти отмеченные чекбоксы, предварительно открыв и проскроллив окно.

 

улучшение-юзабилити_отображение-примененных-фильтров

 

Второй пример: stylus.ua – примененные фильтры не отображаются, а для отмены хотя бы одного необходимо совершить ряд дополнительных действий.

 

примененные фильтры не отображаются

 

Решить эту проблему можно минимум двумя способами:

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

 

юзабилити-рекомендации_отображение-примененных-фильтров

 

Независимо от способа реализации, работа с отфильтрованным списком должна отвечать следующим критериям:

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

 

Ошибка №6. Неточные названия для фильтров товаров

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

Первый пример: foxtrot.ua – отраслевые фильтры при выборе утюга могут быть не понятны.

 

неточные названия для фильтров товаров

 

Второй пример: watsons.ua – фильтры с названиями спецпредложений «K-BEAUTY» и тому подобное могут быть не понятны.

 

неточные-названия-для-фильтров-товаров_пример 2

 

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

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

сoolblue.nl – удачный пример пояснения отраслевых фильтров в мобильной версии сайта.

 

подсказка-с-пояснением-фильтра

 

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

 

Ошибка №7. Взаимоисключающие фильтры

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

45% пользователей пытаются применить несколько значений фильтра одного и того же типа. Например: цвет «синий» и «желтый».

 

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

 

оптимизация юзабилити_взаимоисключающие фильтры

 

Сайт rabota.ua – работа с фильтром «тип занятости» доставляет неудобства, не позволяя искать вакансии в двух форматах одновременно.

 

взаимоисключающие фильтры_проблема юзабилити 

 

В заключение

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

 

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

 

 

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

Получить консультацию

Получайте новости интернет-маркетинга

Только полезная информация от экспертов Promodo

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

Получить консультацию

Есть задача?

Давайте обсудим!

Получайте новости интернет-маркетинга