Студия Турум-бурум

Процесс оформления заказа: пошаговая инструкция по оптимизации страницы чекаута

Процесс оформления заказа: пошаговая инструкция по оптимизации страницы чекаута
1931

По статистике за 2019, 69,57% всех покупателей бросили корзину, так и не оформив заказ. Как оптимизировать процесс оформления заказа, чтобы посетители не уходили? В этой статье вы найдете пошаговую инструкцию, реальные примеры и практические советы по оформлению страницы чекаута руководителя отдела UX/UI студии Турум-бурум Дениса Студенникова, которые помогут уменьшить процент отказов и увеличить конверсию интернет-магазина.

Данные брошенных корзин Statista
Данные брошенных корзин Statista

Шаг 1: Проанализируйте каждый этап интернет-воронки процесса оформления заказа

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

Это можно сделать с помощью инструментов аналитики и опросников. Например, работая над проектом интернет-магазина Intertop, мы опросили пользователей и выяснили, что 48,6% посетителей покидали форму чекаута, только лишь потому что не смогли оформить заказ.

Результаты опроса посетителей Intertop
Результаты опроса посетителей Intertop

Для выявления узких мест, мы проанализировали воронку из 5 этапов. 

Воронка продаж из 5 этапов на сайте Intertop до редизайна
Воронка продаж из 5 этапов на сайте Intertop до редизайна

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


Оптимизированные воронки чекаута Intertop
Оптимизированные воронки чекаута Intertop 

Шаг 2: Разбейте процесс оформления заказа на несколько простых шагов

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

Разбив процесс на три последовательных шага и добавив напоминание всех ключевых параметров, процент отказов мобильных пользователей сократился на 11,73% и коэффициент микро конверсии вырос на 35%.

Чекаут Dobovo.com
Чекаут Dobovo.com

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

Пример страницы оформления заказа на сайте Pampik
Пример страницы оформления заказа на сайте Pampik

Шаг 3: Добавьте кнопку «Купить в один клик»

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

Пример реализации функции «Купить в один клик» в интернет-магазине Denika
Пример реализации функции «Купить в один клик» в интернет-магазине Denika

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

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

В качестве альтернативы стоит еще рассмотреть способ указанный в Шаге 14.

Шаг 4: Мотивируйте покупателей, а не ограничивайте их

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

Пример мотивации пользователей на сайте 966.ua
Пример мотивации пользователей на сайте 966.ua

Шаг 5: Делайте акцент на главный CTA

На странице оформления заказа могут быть несколько кнопок и ссылок, например, «Вернуться на шаг назад», «Редактировать заказ», и т.д. Чтобы не запутать пользователя, акцентным стоит сделать только главный CTA.

image 327.png
Пример страницы чекаута в интернет-магазине электроники Denika

Шаг 6: Исключите возможность заказа товара, которого нет в наличии

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

Шаг 7: Не требуйте регистрацию перед оформлением заказа

Не навязывайте регистрацию на сайте при оформлении заказа. Дайте возможность выбора Быстрой покупки и Заполнения Подробной формы. 

Реализация быстрой покупки для 966.ua
Реализация быстрой покупки для 966.ua

При оформлении заказа избегайте формулировок «Регистрация» или «Авторизация», лучше используйте «Новый клиент» или что-то подобное.

Пример регистрации новых пользователей на сайте Pampik
Пример регистрации новых пользователей на сайте Pampik

Если пользователь выбрал расширенную форму оформления заказа, то следуйте следующим рекомендациям:

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

Реализация расширенной формы на сайте 966.ua
Реализация расширенной формы на сайте 966.ua

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

image 330.png
Пример плейсхолдеров

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

Пример уведомления об ошибке — незаполненных обязательных полях — в интернет-магазине Pampik
Пример уведомления об ошибке — незаполненных обязательных полях — в интернет-магазине Pampik

Шаг 8: Предложите пользователю помощь или консультацию

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

Чекаут интернет-магазина электроники ТехноЁж
Чекаут интернет-магазина электроники ТехноЁж

Шаг 9: Внедрите региональную привязку

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

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

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

Помимо этого, выводите список способов доставки доступный именно для города, который выбрал пользователь.

Шаг 10: Предложите самые популярные варианты доставки и оплаты

Упростите жизнь своим пользователям, проанализируйте возможные способы оплаты и доставки и предложите наиболее популярные варианты. При этом стоит отсортировать способы по приоритету в порядке убывания.

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

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

Шаг 11: Информируйте покупателя о дальнейших действиях на каждом этапе и после оформления заказа

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

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

Шаг 12: Выясняйте причину, почему пользователь прервал оплату

Может быть несколько причин, почему пользователь прервал оплату:

  • Не прошла оплата — недостаточно денег на счету на выбранной карте, например;
  • Зависла форма оплаты при заполнении;
  • Неверно введены данные (пользователь ошибся);
  • Пропало интернет-соединение;
  • Не получил код подтверждения, и так далее.

Настройте чекаут таким образом, чтобы после заполнения формы, заказ был автоматически сформирован. При возникновении технических ошибок при оплате:

  • Дайте возможность изменить способ оплаты;
  • Отправляйте такие контакты менеджеру, чтобы он перезванивал покупателям для уточнения причин;
  • Также вы можете отправить email или sms пользователю с просьбой повторить платеж. 

Шаг 13: Работайте с незавершенными заказами

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

Пример плейсхолдеров
Пример работы с «брошенными корзинами» интернет-магазина Pampik

Шаг 14: Позаботьтесь о мобильных пользователях

Согласно Statista, в мире 3,5 миллиарда мобильных пользователей, а в 2021 году 72,9% всего рынка e-commerce будет генерироваться через m-commerce. Поэтому не важно разработан ваш интернет магазин на фреймфорке или на CMS, пользователю должно быть максимально удобно оформить заказ с любого устройства. Отслеживайте и анализируйте, насколько комфортно посетителям взаимодействовать с сайтом на различных мобильных девайсах и оптимизируйте страницы, с которых уходят клиенты.

Так как количество мобильных пользователей превышает 80%, стоит дать возможность быстрой оплаты. Вынесите в чекаут кнопки для оплаты через Apple Pay, GPay, и т.д. Это становится новым трендом и современной альтернативой функции «Купить в 1 клик».

Пример чекаута 966.ua
Пример чекаута 966.ua

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

Пример оплаты заказа путем нажатия на кнопку Apple Pay
Пример оплаты заказа путем нажатия на кнопку Apple Pay

Шаг 15: Проработайте вопросы безопасности

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

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




Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.