Почему многие онлайн-магазины пренебрегают UX? Некомпетентность или осознанный шаг?
Коллеги, добрый день!
Не так давно ко мне обратилась одна компания, с целью проведения анализа конкурентов для своего бизнеса. Я собрал всю необходимую информацию, провел исследование и сдал отчет.
В ходе выполнения анализа я обратил внимание на интересную закономерность — почти у всех компаний слабым местом (это мягко говоря) является дизайн взаимодействия с пользователем, причем средний оборот этих компаний — 4.5 млрд за последний год. Во времена, когда есть маркетплейсы, которые предоставляют максимум удобств в обращении, очень странно было увидеть такое наплевательское отношение к юзабилити.
Чтобы не быть голословным, наглядно разберем их ошибки и решим вместе с вами — отсутствие UX — это некомпетентность или все же осознанный шаг?
Десктопная версия:
Достижение пользовательских целей:
Добавление в избранное: отсутствует;
Добавление товара в корзину:
При добавлении товара в корзину появляется поп-ап, который сообщает, что товар добавлен. Также меняется значок корзины в правом верхнем углу. Внизу сайта закреплена панель корзины, из которой можно перейти в экран корзины. Однако, панель выделена красным цветом, из-за чего пользователь не сразу обращает на нее внимание.
Сама корзина скрыта от пользователя во время скрола.
Оформление покупки:
Экран оформления покупки реализован стандартно. Блоки расположены в логической последовательности. Есть возможность выбрать интервал, способ и службу доставки, оставить комментарий. Присутствуют сопроводительные описания, что облегчает процесс оформления. При нажатии кнопки «Оформить заказ» открывается success page с номером заказа. Заказ подтверждается по телефону. Оплата через экран оформления покупки отсутствует. При подтверждении заказа менеджер присылает ссылку для оплаты.
Поиск и работа с каталогом и разделами сайта:
При наборе запроса в поисковой строке появляются подсказки, что облегчает поиск. Также при ошибочном наборе кириллицей автоматически транслитерирует названия. Есть сортировка по цене, названию и популярности. Выдача запросов осуществляется до 3 сек.
Некоторые блоки панели каталога имеют нестандартные названия. Для того, чтобы понять, что находится в разделе, нужно потратить время и изучить его. Навигация по разделам простая. Внутри каждого раздела находится раскрывающийся список. Если раскрыть все списки, меню каталога становится очень длинным.
Верхняя барная панель содержит стандартные блоки с информацией о доставке, оплате, контактах магазина, а также кнопку регистрации/входа в личный кабинет пользователя.
Визуальные решения:
Очень много текстовой информации, которая перегружает внимание пользователя и создает ощущение «сложности». Это влияет на процент отказов. Присутствие большого количества красного цвета также негативно сказывается на пользовательском опыте, так как этот цвет вызывает сильные чувства, следовательно, отвлекает пользователя от цели. Неверно расставлены визуальные акценты: много места выделено под информацию о доставке, и совсем мало для каталога. Меню (панель) каталога слишком длинная для изучения. На сайте реализовано несколько лишних, не несущих для пользователя ценности, блоков: рейтинг Яндекс.Маркета, новостная лента, достижения компании и пр. На сайте отсутствует подвал, что создает ощущение логической незаконченности. Соотношение текстовой информации и графической примерно 3:5. Должно быть наоборот.
- Количество красного цвета:
Пользовательский опыт:
Панель каталога товаров находятся справа и представлена в виде блоков. Корзина расположена справа вверху. Это привычно для пользователя и не вызывает затруднений. Раздел «Конфигуратор ПК» рассчитан на опытных пользователей. В данном случае это те люди, которые знают, чего хотят от компьютера и знают, что его можно собрать. Сам конфигуратор устроен так, что с первого взгляда понятно, как им пользоваться: по нажатию на конкретный блок открывается меню, где с помощью скрола можно выбрать нужную модель того или иного товара. Для неопытных пользователей не хватает описания / инструкции.
Функция добавления товаров в Избранное не реализована на сайте. Это увеличивает процент отказов среди тех пользователей, который привыкли принимать взвешенное решение о покупке.
Следить за добавлением товаров в корзину неудобно, так как корзина не закреплена при скроллинге страницы, и остается наверху, из-за чего пользователь теряет корзину из виду. Этот сценарий проработан плохо.
Оформление покупки происходит по стандартному сценарию, однако отсутствие онлайн-оплаты без прохождения модерации у менеджера продаж затрудняет пользовательский путь и увеличивает время прохождения сценария. Обычно это вызывает неприятные эмоции у пользователей, которые привыкли получать быстрый результат при работе с маркетплейсом.
На сайте отсутствует CTA (call-to-action – призыв к действию: купить, оформить, сделать заказ и т.д.), из-за чего складывается ощущение, что сайт носит информационный характер. Нет ощущения, что пользователь пришел в магазин. Большой акцент сделан на доставку товаров, при этом сами товары выделены не крупно, фотографии в карточках товара плохого качества. Эти аспекты, а также общий визуальный шум отвлекают пользователя от цели и влияют на доверие к бренду.
На сайте понятно и эргономично реализована функция поиска. Есть быстрый доступ к контактам отдела продаж. Есть кнопки соцсетей, и они рабочие.
Мобильная версия:
Повторяет десктопную версию. Нужно приближать, используя zoom, все части сайта по отдельности, чтобы достичь пользовательских целей.
Десктопная версия:
Достижение пользовательских целей:
Добавление в избранное:
Функция реализована на сайте по стандартному сценарию. В верхнем правом углу находится раздел «Избранное». Меняется цвет иконки «сердца» в правом верхнем углу, сообщая пользователю, что товар добавлен. При нажатии на кнопку раздела «Избранное» открывается экран с товарами, откуда их можно добавить в корзину и купить в один клик.
Добавление товара в корзину:
При добавлении товара в корзину открывается автоматический поп-ап. Он оповещает пользователя о том, что выбранный товар находится в корзине. В открывшемся экране можно выбрать две опции: продолжить покупки или оформить доставку/ зарезервировать товар.
Оформление покупки:
При переходе в экран корзины пользователь видит все свои добавленные товары. Под последним сверху товаром находятся две кнопки: «Очистить корзину» и «Купить в один клик». Кнопка «Оформить заказ» находится глубоко внизу страницы так, что при первом взгляде кажется, что ее нет. После товаров следует неубираемый экран сопутствующих товаров, которые по логике не соотносятся с товарами в корзине. Далее — возможность выбрать доставку или самовывоз и доп.услуги. Обилие лишней информации сбивает с толку и мешает пользователю в достижении цели. Также в корзине после прохождения всех шагов не отображается финальная стоимость товара. Прямая онлайн оплата отсутствует. По нажатию кнопки «Оформить заказ» открывается поп-ап, который предлагает совершить еще несколько шагов для завершения оформления заказа – выбор адреса доставки и ввод контактных данных. Success page содержит номер заказа и большое количество визуальной и текстовой информации, которая не имеет прямой ценности для пользователя.
Поиск и работа с каталогом и разделами сайта:
Функция поиска реализована нестандартно. Вверху сайта расположены три поисковые строки. Поиск осуществляется, по ключевым словам, по разделам (и как будто тоже по ключевым словам?) и по названию бренда. Отклик с выдачей менее 1 секунды. Выдача нерелевантная. Можно сказать, что функционал поиска усложнен и пользователь не понимает, как с ним работать.
Визуальные решения:
Основные разделы сайта с точки зрения читабельности и визуальной компактности сделаны относительно неплохо: при беглом серфинге легко отыскать нужную функцию или страницу. Однако, вездесущие товары для индивидуальной защиты от вирусов очень отвлекают и вызывают раздражение. Цветовую палитру можно назвать более или менее нейтральной. Оранжевый цвет делает акцент на каталоге, и этот акцент работает. С точки зрения сочетаемости цветов такой выбор палитры можно назвать неудачным, так как и красный, и оранжевый – это «сильные» цвета, и в интерфейсах вместе их не используют.
Пользовательский опыт:
Панель каталога товаров находятся справа и представлена в виде блоков. С разделительной полосой. Шрифт хорошо читается. В названиях разделов есть привычная для пользователя логика. Корзина расположена справа вверху. Это привычно для пользователя и не вызывает затруднений. Работа с каталогом происходит по стандартному сценарию, привычному для пользователя. При выборе раздела открывается боковая панель со списком подразделов. Выбор подраздела открывает каталог с карточками товара. Процесс поиска и изучения товаров ясный и не вызывает затруднений. Верхняя барная панель содержит разделы с информацией о доставке, условиях сотрудничества и кнопку перехода на форум. В правом верхнем углу находятся кнопка входа в Личный кабинет и возможность связи с отделом продаж. При нажатии на кнопку «Связаться с нами» выплывает поп-ап с вариантами выбора темы обращения. Поп-ап не закрывается☹. Для того, чтобы избавиться от поп-апа, необходимо обновить страницу. При использовании панели каталога и верхнего барного меню у пользователя складывается ощущение, что интерфейс либо сломался, либо пользователь находится на ресурсе с сомнительной репутацией.
Функция добавления товаров в Избранное работает по стандартному сценарию, как и функция добавления товаров в корзину. На этапе оформления покупки возникает очень сложности из-за присутствия в интерфейсе множества лишних шагов и нерелевантной информации, на которую приходится отвлекаться в процессе достижения цели. Процесс оформления покупки вызывает усталость.
Мобильная версия:
- Адаптив. Пользовательские сценарии не отличаются от десктопных по логике. Немного другие визуальные решения, но на достижение пользовательских целей это не влияет. Процесс поиска и изучения каталога относительно простой и понятный, а вот на этапе оформления покупки возникают сложности. Интерфейсы между собой принципиально не отличаются.
Десктопная версия:
Достижение пользовательских целей:
Добавление в избранное: отсутствует.
Добавление товара в корзину:
Добавление товара в корзину происходит по привычному для пользователя сценарию. Сам процесс добавления анимирован весьма оригинально (товар буквально «летит в корзину»), однако отсутствует функция добавления количества товаров из карточки товара после добавления первого, что, безусловно, увеличивает время пользователя на пути к достижению цели при покупке мелких товаров и расходников.
Оформление покупки:
Оформление покупки происходит в 6 шагов (хотя заявлено 5): нажатие кнопки «оформление», выбор региона доставки, выбор способа оплаты, экран проверки данных по заказу, нажатие кнопки «оформить», нажатие кнопки «завершить». Все это можно было сделать на одном экране, сэкономив тем самым время пользователя. Примечательно что в интерфейсе не предусмотрена опция возврата к предыдущему шагу, что нарушает основные принципы UX-дизайна об обратимости любого действия.
Названия разделов в боковой панели каталога понятны для пользователя и работа с панелью не вызывает затруднений. Однако, при наведении на определенный раздел, меню открывается сверху, с анимацией. Это происходит неожиданно. Меню подразделов закрывает часть страницы каталога и мешает пользователю свободно перемещаться по страницам, потому что пользователь постоянно рискует задеть мышью один из разделов и вызвать анимированное меню. При нажатии на раздел боковой панели каталога открывается страница подразделов каталога, на которой пользователю наглядно представлены категории товаров.
Функция поиска реализована по стандартному сценарию. Отклик с выдачей занимает менее 1 с.
Карточки товаров оформлены достаточно наглядно, но кнопка «купить» слишком мала для такой большой карточки.
Визуальные решения:
Шрифт подобран неправильно: межбуквенный интервал слишком маленький. Это затрудняет чтение текста в панели каталога. На сайте используются разные стили и размеры шрифтов, это затрудняет ориентацию в интерфейсе. Подкатегории товаров в меню подразделов выделены красным жирным шрифтом. Поиск необходимого подраздела, таким образом, затруднен для пользователя, потому что такое количество красных заголовков рассеивает его внимание. Некоторые элементы интерфейса – например, иконки фильтров, — слишком маленькие, что не всегда позволяет нажать на них с первого раза.
Пользовательский опыт:
Панель каталога товаров находятся справа и представлена в виде блоков. С разделительной полосой. В названиях разделов есть привычная для пользователя логика. Корзина расположена справа вверху. Это привычно для пользователя и не вызывает затруднений. Работа с каталогом происходит по не совсем стандартному сценарию: анимированное меню подраздела мешает работе и расположено некорректно с точки зрения юзабилити. Фильтр на левой панели не работает, но визуально скрадывает пространство. Из-за этого работать с интерфейсом некомфортно. Процесс оформления покупки осложнен большим количеством лишних шагов. Это вызывает усталость.
Мобильная версия:
Адаптив, частично повторяет интерфейс десктопной версии, но некоторые разделы отсутствуют. В верхнем баре три раздела: каталог, поиск и корзина. Бургерное меню также открывает каталог, но удобнее пользоваться каталогом, который открывается из бара. Процесс добавления в корзину максимально упрощен, что положительно влияет на скорость достижения цели. Какая-либо анимация в интерфейсе отсутствует. При оформлении покупки присутствуют все те же 6 шагов, что существенно усложняет процесс покупки через маленький экран смартфона.
Десктопная версия
Достижение пользовательских целей:
Добавление в избранное:
Отсутствует.
- Добавление товара в корзину: При нажатии на кнопку «Купить…» всплывает поп-ап с оповещением о добавлении товара в корзину. При закрытии поп-апа пользователя преследует окно, которое открывается в правом верхнем углу, которое не закрывается и не исчезает при скроле.
Оформление покупки:
Оформление покупки происходит из окна в правом верхнем углу. Отдельный экран так называемой корзины открывается при нажатии кнопки «Оформить». Кнопка «Оформить заказ» находится внизу сайта, хотя по закону близости должна быть расположена рядом с объектом, над которым совершается целевое действие. Пользователь должен пройти 3 шага в процессе оформления покупки: выбрать способ оплаты, способ доставки и ввести контактные данные. Кажется, это самый простой сценарий сайта.
Поиск и работа с каталогом и разделами сайта:
Поисковая строка маленькая, и теряется в пестром дизайне верхней части сайта. Время отклика с выдачей – более 3 с. При наборе ключевых слов выпадает список с подсказками, но они перепутаны, и навигация по ним осложнена.
Каталог в его привычном виде отсутствует, как и боковая панель каталога. В верхнем меню есть бар с разделами, но по названиям не понятно, что в них содержится.
Визуальные решения:
Логика сайта нарушена: блоки перепутаны местами, то есть находятся не там, где пользователь привык их видеть. Из-за этого внимание пользователя расфокусируется и осложняется достижение цели. Много места отведено преимуществам работы с компанией. Крупные визуальные элементы паттерна в виде «волны» не несут смысловой нагрузки и раздражают пользователя, который пришел приобрести товар, а не рассматривать красочный интерфейс.
Корзина не выделяется из интерфейса. Вход в личный кабинет назван «Входом в кабинку», а над строкой поиска надпись «Вы искали». Это сбивает с толку.
Кнопки добавления товара в корзину содержат разные названия, из-за чего размер кнопок у каждой карточки товара отличается. Это выглядит неаккуратно.
Пользовательский опыт:
При работе с интерфейсом создается впечатление, что автор дизайна ставил перед собой цель хорошо пошутить, а не помочь пользователям совершить целевое действие на сайте. Время загрузки сайта более 3 с. Сайт оставляет ощущение растерянности…
Мобильная версия:
Не реализована полноценно. Карточки товаров потеряны в дебрях интерфейсных элементов…
Поставил себя на место покупателя, у меня бы 100% возникли сомнения в добросовестности данных компаний из-за игнорирования современного дизайна и правил пользовательского опыта на сайте.
Что думаете на этот счет вы? Важен ли сегодня UX? Совершили бы вы покупку на этих площадках или же предпочли более простые и понятные в использовании маркетплейсы, такие как озон, Яндекс.Маркет, Wildberies и тд?
Подпишись, чтобы не пропустить обновления, и если остались вопросы:
Вы можете задать их мне, вот мои контакты:
Telegram: @kochnefff
Inst: @kochnefff
Как человек который имел "счастье" в кавычках переделывать подобные сайты, в адаптивные с современным дизайном и всякими дополнительными возможностями которых не было ранее, могу сказать, что этот тот еще геморрой -)) Одно дело, если сайт какой-то неизвестный, непопулярный, или достаточно новый, то его можно просто снести, и сделать вобще новый сайт со старым доменом. Но старые сайты, у которых проиндексированы десятки или даже скорее сотни тысяч страниц, на которые еще ссылается 100500 каких-то других сайтов, нужно именно переделывать. Переделывать так, чтобы так не потерялось ни одной ссылки или был правильный редирект на новую страницу товара например, если ссылку сохранить нельзя. При этом при переделке, еще и чуть ли не все внутренности приходится переписывать. Все такие сайты с дизайном из начала 2000, они и были созданы в начале 2000. Все такие сайты самописные. Они не на каких-то там популярных CMS стоят. В копилку ваших сайтов, я бы добавил сайт Доктор Техно. У этого сайта, флэш баннер даже висел еще в начале этого года -) И знаете что забавно с этим сайтом? Что одно агенство, сделало им несколько лет назад полностью новый дизайн магазина. В гугле вбейте "доктор техно редизайн" и первая ссылка будет это агенство. Я не сказал бы, что мне нравится то, что они сделали, но это в любом случае в миллион раз лучше того, что есть сейчас. Плюс если учесть, что это было сделано несколько лет назад, то нормально. Но магазин так и не перешел на новый дизайн. И скорее всего причина в том, что те чуваки ничего не редизайнили, а просто слепили новый магазин. -) И кстати у меня для вас хорошая новость. Империя Техно полностью переделала сайт. -)) Так что ваша статья уже не так актуальна. -) Переделывайте на Доктор Техно. -)
А как покупатель, я покупал на pleer раза 2-3. Покупал только из-за того, что у них как известно очень низкие цены, товар РСТ, ну и я точно знаю, что мне его привезут, тем более что оплата по факту получения. Из-за конкретно перечисленных причин, мне наплевать какой там у них дизайн, что они занимаются там отмыванием денег всяких, левые чеки и прочее. -)) Когда-то давно, pleer был вобще жутким местом, но все про это уже давно забыли из-за тех трех причин которые я перечислил. -) Плееру нет смысла что-то переделывать. О нём все и так знают. Как там что случается, во всех новостях про это пишут. -) Регард тоже старейший магазин по продаже компьютеров и комплектующих. И о нём думаю тоже все слышали. Эти магазины просто слишком известные и у них заказов и так горы. -)
Комментарий недоступен
...Не так давно ко мне обратилась одна компания, с целью проведения анализа конкурентов для своего бизнеса...
Чем же занимается обратившаяся компания?🤔
Тут все учасники из разных отраслей, у них общее только то что они интернет магазины
Разбор каких-то аутсайдеров (кроме "Плеера", но те зарабатывают на дешевизне, туда именно покупать идут) с UI из начала века.
Не вижу по топам особых проблем.