/blog/

Упрощение воронки оформления заказа в eCommerce

Салют! В проектировании любого интернет-магазина отдельного внимания заслуживает проработка пути оформления заказа, и вот почему:

На основе большого исследования от Bymard по брошенным корзинам за 2024 год видим следующую картину:

Причины отказа от заказа во время оформления корзины и оплаты (данные за 2024 год)

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

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

Мы рассмотрим важный и эффективный приём — упрощение пути оформления заказа. Это когда, начиная с корзины, сознательно убирают часть интерфейсов и форм и, наоборот, добавляют элементы, способствующие усилению доверия.

Расскажем, как это делать правильно, как это внедрять на действующий проект и что нам говорят исследования.

Немного истории

В 1999 году Амазон запатентовал технологию «1-Click Ordering». Суть технологии в запоминании платёжной и личной информации пользователя для быстрой покупки. Сейчас такой технологией не удивишь, но тогда это был прорыв.

Скорость оформления заказа снизилась с нескольких минут до секунд, а продажи выросли на 5–10% уже в первые годы после внедрения. Основную ставку сыграли именно эмоциональные покупки, успех которых напрямую зависит от скорости и удобства процесса оформления заказа.

Вот так Amazon реализовали это отдельной кнопкой

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

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

Как это работает?

Если всё свести к простым элементам, то нас интересуют области интерфейсов и формы, которые нужны или не нужны на конкретной странице, а также суммарное количество действий.

Нужны они или нет, мы определяем по принципу: возможно ли успешно оформить заказ без данного элемента?

Если возможно, то элемент попадает под оптимизацию. Подход «в хозяйстве всё пригодится» тут не работает.

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

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

В том же исследовании от Baymard есть данные, что идеальный процесс оформления заказа может состоять из 12–14 элементов формы (7–8, если считать только поля формы). Под элементами подразумевается различная навигация в форме оформления заказа.

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

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

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

Мобилы прежде всего

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

Сфера eCommerce в основном мобильная, и для 90% проектов подойдёт именно разработка от мобильной версии (mobile first). Учтите это даже для размышлений над действующим проектом.

Навигация (хедер или меню)

В мобильных интерфейсах стандартом индустрии является меню «бургер» (две-три черточки или точки).

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

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

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

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

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

Пример разгруженного хедера относительно основного.

Корзина

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

Задача корзины — убедиться, что в заказе есть всё нужное и сумма заказа соответствует ожидаемой.

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

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

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

Итак, ниже рекомендации:

  1. Упрощаем навигацию, хедер и футер. Оставляем только то, что может понадобиться пользователю для перехода к этапам оформления заказа. Если у вас существует минимальный вес для оформления заказа, то пользователю может понадобиться вернуться в каталог. Здесь навигацию можно показывать только если веса не хватает.
  2. Рекомендуем реализовывать страницу корзины в виде отдельной страницы, а не модального окна. Во-первых, так вы сможете управлять визуальной нагрузкой и позволить себе больше функционала, а во-вторых, это помогает адекватно работать с аналитикой.
  3. На данной странице необходим чат с менеджером. Во время оформления заказа пользователь может обратиться к менеджеру из-за недействующего промокода или другой технической проблемы. На всех проектах, где есть промокоды и человеческий фактор, они будут иногда не работать — это закон. Реакция менеджера может спасти оформление заказа.
  4. Храните корзину в cookies или сессии. Пользователи бросают корзины, и это нормально. Важно, чтобы при возвращении в корзине были все ранее добавленные товары.

Путь оформления заказа

Рассмотрим два популярных подхода в организации пути оформления заказа — одностраничный и многошаговый.

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

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

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

1. Убираем все лишние формы, например поле «Отчество» или «Индекс», если оно не нужно для вашей транспортной компании.

2. Всё, что можно заполнить автоматически, заполняйте. Это касается данных из последнего заказа.

3. Сохраняйте данные в формах в сессию. Нет ничего хуже, чем перезагрузить или сменить вариант оплаты и потерять всё, что заполнял пользователь.

4. Полностью убираем любую навигацию, хедер и футер. Вся концентрация должна быть на формах.

5. Если ваш проект работает преимущественно в одном городе или ряде близлежащих, выведите популярные города над полем «Город». Поле «Область» можно упразднить, а при необходимости всё равно передавать данные транспортным компаниям.

6. Покупка без регистрации (гостевое оформление). Где возможно, регистрируйте пользователя по тем данным, что он уже ввёл, и создавайте личный кабинет автоматически. Или дособирайте эти данные после оплаты.

7. Адаптивная проверка валидности полей - решение проверяет поле сразу после ввода данных (например, номер телефона или email), а не после нажатия кнопки «Продолжить».

8. Добавляйте удобные способы оплаты, например СПБ.

9. Не забудьте про страницу «Спасибо» после успешного оформления заказа.

Эти рекомендации могут увеличить конверсию пропорционально текущим проблемам в проекте. Некоторые исследования указывают на возможность роста конверсии на 0.5–1%, что может означать 25% прибавку к продажам.

Если у вас действующий проект

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

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

Затем оцените этот путь (хотя бы гипотетически) после применения вышеописанных рекомендаций. Это покажет, на сколько процентов сократилось количество действий, а также поможет при проведении A/B-тестов.

A/B тестирование

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

На момент написания статьи используют 2 инструмента:

  • Яндекс Вариокуб (доступен в Метрике).
  • Optimizely — если нужна более гибкая настройка.

Настройка и проведение A/B-тестирования требуют отдельного разбора, но в целом нас интересует стандартный сплит-тест длиной 4–6 недель для подсчёта результатов.

Заключение

Оптимизация пути оформления заказа напрямую влияет на снижение процента брошенных корзин.

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

Читайте также:
Перезвоним Вам для обсуждения деталей проекта!
Спасибо
Перезвоним Вам для обсуждения деталей проекта!
Спасибо за обращение!

Скоро мы свяжемся с Вами и все расскажем