Как оптимизировать чекаут интернет-магазина: 8 практических советов

Знаете, что такое red flag для бизнеса? Это когда пользователи покидают страницу чекаута.

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

Хорошая новость — это можно исправить, улучшив юзабилити сайта. 

Именно об этом мы и поговорим в статье.

8 практических советов по оптимизации чекаута для повышения конверсии

Мы спросили Максима Чувурина, UX/BA Team Lead и Head of UX/UI Department в Турум-бурум, какие UX-решения действительно помогают пользователям завершать покупки, а бизнесу — не терять прибыль.

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

Рассказываем и показываем на реальных кейсах из нашей практики.

1. Логичная структура: придерживайтесь привычным паттернам и минимизируйте количество полей

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

Личные данные → Доставка → Оплата → Подтверждение.

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

Кроме того, каждое дополнительное поле отдаляет момент покупки и увеличивает вероятность «брошенного чекаута».

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

«Оформление заказа — это уже большая форма. Если ее структура не соответствует ожиданиям пользователей, вы создаете дополнительный барьер. Кроме того, если вам для отправки не нужна дата рождения или отчество клиента — просто не спрашивайте об этом. Главная задача — убрать все лишнее и максимально упростить процесс». — Максим

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

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

{{block}}

2. Переиспользование данных: магия авторизации и забота о постоянном клиенте

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

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

«Пользователю не нужно каждый раз вручную вводить информацию, которую бизнес о нем уже знает». — Максим

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

Так, для проекта FlowerPot мы разработали быструю регистрацию в приложении, которая занимает всего 4 экрана и около 2 минут времени.

А во время оформления заказа реализовали автоматическое заполнение формы.

3. Прозрачное ценообразование: детали о скидках, бонусах и итоговая стоимость без сюрпризов

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

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

«На этапе оформления заказа человеку нужна определенность. Пользователь должен четко понимать, за что он платит и сколько именно он сейчас экономит». — Максим

4. Вариативность доставки: предлагайте выбор и показывайте реальную стоимость

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

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

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

Также стоит добавить возможность выбора отделения, почтомата или адреса прямо на карте, а не только через выпадающие списки.

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

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

Крупногабаритные товары, сложная логистика и разные потребности B2B- и B2C-клиентов требовали особого подхода к оформлению заказа.

Поэтому мы разбили процесс оформления заказа на простые и понятные шаги, которые адаптируются под тип клиента (физическое или юридическое лицо).

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

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

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

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

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

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

6. Гибкость оплат: предлагайте современные методы и «Оплату частями»

Вариативность способов оплаты без скрытых комиссий — критический фактор.

Клиенты хотят платить привычным для себя способом. Современный чекаут должен учитывать разные финансовые потребности пользователей, предлагая мобильные кошельки (Apple Pay, Google Pay), оплату банковскими картами, наличными при получении, а также безналичный расчет для B2B-клиентов.

Кроме того, наличие сервисов рассрочки (BNPL — Buy Now, Pay Later) или «Оплаты частями» способно существенно повлиять на решение о покупке, особенно если речь идет о технике, электронике или других дорогостоящих товарах.

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

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

7. «Закрытый» чекаут: минимизируйте хедер и уберите отвлекающие факторы

На странице чекаута ничто не должно отвлекать пользователя от завершения покупки.

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

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

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

8. Работа с ошибками: подготовьтесь к сбоям и ошибкам пользователей

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

• Помогите мгновенно найти ошибку валидации.

Часто пользователь не может завершить заказ из-за незаметной ошибки в поле (например, из-за некорректного автозаполнения), но не понимает, где именно проблема. Так, для проекта Domino’s Pizza мы внедрили автоматическое исправление скрытых ошибок и автоскролл (прокрутку) непосредственно к полю с ошибкой.

• Защитите прогресс пользователя с помощью автосохранения.

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

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

• Дайте возможность исправить ошибки без необходимости покидать страницу.

Иногда проблема возникает не из-за технического сбоя, а из-за невнимательности или сомнений. Во время редизайна Lullaby мы перенесли редактирование заказа в pop-up окно, чтобы пользователю не нужно было возвращаться на предыдущий шаг, если он вдруг передумал или что-то вспомнил, или хочет что-то изменить.

{{block}}

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

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

Задача чекаута — не убеждать, а не мешать.

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

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

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