Юзабилити чекаута: анализ топовых украинских интернет-магазинов

Наши UX специалисты продолжают делиться инсайтами. В этот раз Дмитрий Яценко сфокусировался на самом «скользком» месте многих украинских интернет-магазинов – чекауте или странице оформления заказа. Как и в первой статье из цикла – 7 юзабилити-ошибок в eCommerce, акцент сохранен на мобильных устройствах.

Брошенная корзина: кто виноват и как исправить

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

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

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

 

Согласно количественному анализу Promodo по украинскому eCommerce за 2019, средние показатели мобильного сегмента выглядят так:
- 25% пользователей не показывают активность касательно выбора товара;
- 93% не добавляют товары в корзину;
- 45% бросают корзину и не переходят к оформлению заказа;
- 58% переходят к оформлению заказа, но не заканчивают его.

 

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

 

юзабилити-страницы-с-категориями_что-должно-на-ней-быть

 


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

 

каталог-товаров_юзабилити

moyo.ua – вместо/или в дополнение к кнопке купить уместно предоставить функционал для добавления товара в избранное или для сравнения

 


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

Например, walmart.com для категории столов и холодильников не выводит на плитках товара кнопку «Купить» – и это вполне объяснимо. Размер самой плитки накладывает ограничения на количество отображаемой информации, которая нужна для решения о добавлении товара в корзину. Следовательно, вместо кнопки с призывом «В корзину» они разместили информацию, которая помогает вовлечь пользователя в изучение товара (варианты цвета, best seller, free delivery, free pickup).

Другой ритейлер, Argos.co.uk, предоставляет своим покупателям сразу три инструмента для каждой плитки товара:

  • подробнее (переход на страницу товара с якорем на характеристики);
  • добавить в избранное (wishlist);
  • выбрать опцию (переход на страницу товара, где можно выбрать модификацию).

 

правильная CTA в категории товаров

walmart.com argos.co.uk

 

 

Выделяем просмотренный, добавленный в корзину товар

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

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

 

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

comfy.ua – первый товар был добавлен в корзину, по второму – просмотрена страница товара, но при возвращении в каталог товары никак не помечены   сomfy.uaтовар №1 лежит в корзине. На странице каталога (скрин слева) товар не помечен как тот, который уже добавлен в корзину

 

отражение товаров из корзины в каталоге

еva.ua – отображение товаров, уже добавленных в корзину, в каталоге никак не отличается от остальных

 

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

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

 

Все эти трудности в меньшей или большей степени влияют на показатель времени выбора товаров и удобство пути пользователя. Правильным решением будет помечать уже просмотренные страницы с помощью CSS селектора «:visited», а для товаров, добавленных в корзину, заменять текст на кнопке.

 

СТА_на_кнопке

 

 

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

Авторизация в чекауте – отменить нельзя оставить

37% пользователей отказываются от оформления заказа из-за необходимости создать учетную запись, а 18% из всех, кто уже имеет учетную запись, часто забывают пароль и сталкиваются с проблемой сброса по email. Как правило, письма не приходят сразу же, не приходят вообще, или попадают в спам.

 

авторизация в чекауте

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

 

Что я рекомендую сделать:

  • Дать пользователю явную возможность оформления заказа без авторизации.
  • Если при оформлении заказа неавторизованный пользователь указывает данные существующей учетной записи, сообщать об этом. Возможно, авторизация позволит ему воспользоваться ранее накопленными бонусами.
  • Снизить требования к сложности пароля (если в ЛК не хранятся данные о кредитных картах или другая важная информация) до 6 символов, без требований к спецсимволам.
  • Не упоминать о регистрации в чекауте, предлагать сделать это на странице «Спасибо за заказ».

 

И снова про большие формы и много полей для заполнения

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

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

Хорошее решение показывает сайт flowwow.com, разделяя формы по вкладкам, что изначально исключает повторное внесение одинаковых данных. В самой форме есть подробные объяснения по времени доставки, а также интересная опция «Не знаю адрес». Выбрав эту опцию, пользователю не нужно вносить дополнительные данные, с ним свяжется менеджер и выяснит все детали доставки.

 

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

flowers.ua – в чекауте отображены две формы. Обе имеют обязательные поля, вынуждая вводить данные дважды в случае, если заказчик и получатель – одно лицо  

flowwow.com – чекаут сайта разделен вкладками для исключения ненужных действий

 

Второй не самый удачный пример – чекаут сайта answear.ua. Здесь пользователю сразу предлагают указать фактический адрес проживания и заполнить еще 10 полей, из которых 7 обязательных, а на следующем шаге – выбрать способ доставки. В случае, если пользователь выберет доставку на отделение Нова пошта, становится непонятно, зачем тогда он до этого вводил свой адрес.

 

выбор способа доставки в корзине_обязательные поля

 

Используйте одно поле «Полное имя». Заполняя поля чекаута, 42% пользователей вводят свое полное имя в строку «Имя», а после перехода к полю «Фамилия» или «Отчество», замечают ошибку и возвращаются назад для исправления. Очевидно, что использование одного поля для полного имени может ускорить оформление заказа.

 

 

поля с именем и фамилией в чекауте

 

«Аккордеон» чекаута: разделяем на шаги

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

  • схлопывание заполненного шага происходит мгновенно. К примеру, заполнив личные данные и нажав «Далее», пользователь иногда не понимает, что может вернуться к этому шагу;
  • в схлопнувшемся шаге не отображается информация, которая была внесена;
  • при нажатии на кнопку «Назад» в браузере или на системную кнопку «Назад» в смартфоне, пользователь возвращается не на предыдущий шаг, а на предыдущую страницу (в случае AJAX аккордеона).

 

makeup_аккордеон на странице оформления заказа

makeup.ua – находясь во втором шаге не сразу понятно, какая информация сохранилась на первом шаге, и как ее можно отредактировать

 

allo_аккордеон на странице оформления заказа

allo.ua – обобщенная контактная информация в первом шаге, а также кнопка «Изменить» ясно дает понять, что информацию можно исправить

 

Что я рекомендую сделать:

  • Анимировать «аккордеон» при переходе на следующий шаг.
  • Отображать обобщенную информацию и кнопки для ее редактирования.
  • Настроить поведение кнопки «Назад» в браузере или смартфоне в соответствии с ожиданиями пользователя: кнопка должна возвращать его к предыдущему шагу (даже если технически, это та же страница). Это может быть сделано с помощью API истории HTML5. Функция history.pushState() позволяет сайту вызывать изменение URL-адреса без перезагрузки страницы.

 

Удобное взаимодействие с полями в чекауте

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

 

страница оформления заказа_маски ввода

shiny-diski.com.ua – в поле «телефон» нет маски ввода, клавиатура отображается в режиме ввода букв и цифр, а при переходе из поля в поле не происходит валидация. В ряде случаев это приведет к блокировке подтверждения заказа   infoshina.com.ua – в поле «телефон» предлагается цифровая клавиатура и пример ввода, но самой маски нет, можно вводить любые символы. При переходе в другое поле происходит валидация, это позволяет исправлять ошибки здесь и сейчас, не возвращаясь назад

 

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

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

 

прокрутка к пропущенным полям в чекауте_kasta

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

 

прокрутка к пропущенным полям в чекауте_bonprix

вonprix.ua – чекаут сайта валидирует поля здесь и сейчас. Если пользователь пропустил обязательное поле, при подтверждении заказа произойдет автопрокрутка к нему

 

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

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

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

 

 

уводящие ссылки в корзине

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

 


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

Резюмируем

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

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

Оформление заказа всегда должно сопровождаться возможностью это сделать без авторизации

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

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

 

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

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

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

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

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

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

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

Есть задача?

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

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