Серьёзные ошибки в UX, которые мешают вашим продажам

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

Доступность портативных девайсов растёт, а с ней растёт и популярность e-commerce и m-commerce.

Минутка занимательной статистики:

• Примерно 4 из 5 американцев совершают покупки онлайн, и больше половины совершают покупки через мобильное устройство.
• Пользователи, столкнувшиеся с неудобствами при посещении вашего мобильного магазина, в 62% случаев не вернутся к вам.

Ниже ошибки UX, с которыми столкнулась лично я.

Корзина не показывает число товаров внутри

Всегда отображайте количество товаров в корзине. Дайте пользователю знать, что в корзине что-то лежит.

Мне понравился товар, я нажала «добавить в корзину», и затем... ничего не произошло. Никакого подтверждения. Иконка корзины ничего не показывала — просто висела в верхнем правом углу и не говорила мне, есть ли внутри что-либо интересное. «Товар добавился? Или его нельзя купить? Может, надо попробовать снова?». Я подумала, что произошла какая-то ошибка, и снова кликнула на «добавить», и снова, и снова... и когда я, наконец, заглянула в корзину, там был мой товар в количестве 10 штук.

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

Сложно отредактировать список товаров в корзине

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

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

CTA: сплошной кошмар

Слева: текст невозможно прочитать. Справа: контраст и читаемость лучше.

С ними наблюдаются две основные проблемы.

Первая: основные CTA — например, «Купи сейчас» или «Собери всю коллекцию» — едва заметны. Иногда у них слишком тонкий контур с нечитаемым шрифтом, а размещают их поверх фотографий с неподходящей контрастностью.

Зачем их вообще там размещать? Их же не видно, пользователи их просто не заметят. Я прошла через множество пользовательских сессий, и утверждаю: конверсия с этих кнопок равна нулю.

Вторая проблема: на этапе чекаута кнопки «Назад» и «Оплатить» выглядят ОДИНАКОВО. Какого хрена? Вы что, не хотите, чтобы у вас что-либо купили?

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

Слишком много всего и сразу

Это касается сайтов, которые кричат мне в лицо: «КУПИ МЕНЯ», «ПОСМОТРИ НА МЕНЯ», «НАЖМИ СЮДА». Вы этим только повышаете мой уровень тревожности. Я не понимаю, на что стоит обратить внимание, и ещё больше теряюсь. Я вижу, что вы предлагаете много чего. Хочу ли я узнать больше? Скорее всего нет. До свидания.

Вывод: не перегружайте пользователей информацией, показывайте всё по очереди. Прекрасно, когда есть богатый выбор, но чем больше возможностей, тем сложнее пользователю выбрать. Внимательно изучите «Закон Миллера» и не перегружайте память и чувства пользователей.

Цена спрятана

Не прячьте цену — это выглядит подозрительно.

Я знаю, знаю. Бывают такие элитные магазины, которые не показывают цену товаров, потому что такова их маркетинговая стратегия (например, Chanel. Я обожаю их сумки и аксессуары, но цена у них всегда сюрприз, да и главное для них — именно посещение самих бутиков).

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

Вывод: не прячьте цену своих товаров. Показывайте её ярко и на видном месте.

Смена языка спрятана либо отсутствует

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

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

Важные элементы скрыты под модальными или всплывающими окнами

Эти модальные и всплывающие окна лишат терпения любого пользователя

Такое часто происходит с мобильными версиями магазинов, и меня это всегда поражает. Хоть кто-нибудь проверяет, как они выглядят и работают на разных мобильных устройствах? Тестирование не помешало бы. Несколько примеров:

• Модальное окно (или любой другой всплывающий элемент) «Политика использования файлов cookie» скрывает главные кнопки CTA или покупки.
• Поп-апы с рассылками перекрывают кнопки CTA, а закрыть эти всплывающие окна не так просто.
• «Чатбот» или любая другая «помощь» скрывает CTA или элементы навигации.

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

Непонятная навигация

Слева: странные и нечёткие стили. Справа: простота формы и легкость понимания

Тут наблюдаются две проблемы:

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

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

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

Авторы дизайна: HYPE4

Чем проще и легче UX, тем лучше. Процесс покупки должен быть как можно более приятным и быстрым. Уведомляйте пользователей об их выборе. Не прячьте от них важную информацию. Сделайте навигацию как можно более доступной и понятной, чтобы пользователи ни на секунду не терялись. Лучше всего использовать привычные и проверенные временем паттерны. И если вы добавляете новые функции, то всегда проверяйте, как они выглядят и работают и на десктопе, и на мобильных устройствах.