Как повысить продажи интернет-магазина


29.04.2020 Время чтения - 6 минут 2328

UX улучшения для вас

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

  • Из-за чего некоторые пользователи могут столкнутся с проблемами при успешной оплате на вашем веб-сайте?
  • Что побуждает их совершать покупки?
  • Что может вызвать разочарование у новых или постоянных покупателей?
  • Не перегружаете ли вы поле оформления заказа лишними уточнениями??!
Frustrated Seriously GIF

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

Краткое описание проекта

Клиент в основном сталкивался с проблемой низких показателей конверсии на своем существующем веб-сайте электронной торговли, где он продавал книги и другие канцелярские товары в США и Канаде.

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

Существующие проблемы на сайте

На сайте было две основные проблемы:

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

Исследования: подробное раскрытие проблем

Я наблюдал за аналитическими данными, которые владелец магазина собирал у своих пользователей. Важно было понять, ПОЧЕМУ эти проблемы существуют на сайте.

С чего я начал?

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

Страница корзины

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

На странице корзины были обнаружены две основные проблемы:

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

Сохранение корзины на будущее не подчеркивается и отображается мелким шрифтом рядом с каждым элементом корзины. Пользователи могут выбрать эту функцию для каждого элемента отдельно. Это была общая схема сохранения функциональности корзины. Её можно увидеть на других популярных сайтах электронной коммерции как Amazon и Walmart.

UX корзина

Второе: использование купонов. Предложения, относящиеся к продуктам корзины, мигали на странице корзины, но поля для применения купонов отсутствовали . Фактически, приложение купона было доступно только на последнем этапе оформления заказа. Это означает, что пользователи должны запомнить код купона и использовать его на последнем этапе.

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

Страница авторизации и регистрации

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

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

Страница доставки

В старом дизайне у страницы доставки было 2 основных проблемы:

  1. Форма доставки была очень длинной, пользователям приходилось тратить уйму времени, для заполнения всех деталей, касающихся доставки.
  2. Сводка заказа размещалась как внизу, так и вверху страницы. Это создало некоторую избыточность информации для пользователей.

Страница доставки UX

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

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

Гарантии доставки товара после оплаты были размещены под сводкой заказа для пользователей, которые скептически относились к покупкам в интернете.

UX оплата

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

Индикатор прогресса с подсказками

Страница оплаты

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

Старая и новая страницы оплаты

Просмотр заказа

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

Решение: я перенёс ввод / выбор промокода на страницу корзины, как и упоминал ранее.

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

Обзорная страница с вашим заказом

Окончательная сумма заказа отображается, когда пользователи собираются произвести оплату. Я изменил текст кнопки с «Разместить заказ» на «Подтвердить и оплатить», чтобы сообщить, что на следующем шаге они будут направлены к оплате.

Измерение успеха UX улучшений

Вот, что мы сделали для оценки качества изменений на сайте. Мы сократили следующие ключевые показатели эффективности (KPI), чтобы измерить успех UX:

  1. Частота отказа от корзины покупок: нет людей, которые добавляли товары в корзину, но покидали сайт без совершения покупки.
  2. Пользователь выходил со страницы оформления заказа: никто из тех, кто зашёл на страницу оформления заказа, не уходил, без покупки.

Это все UX улучшения для данного сайта

Оригинал статьи

Читайте также: 10 лучших принципов | Теории UX

UX/UI Designer