Как не потерять покупателя в процессе оформления заказа?

Итак, корзина уже сформирована - покупатель сделал свой выбор и нажал "Оформить заказ" - наша задача его не спугнуть!

Нам нужно:

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

На макете должны быть:

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

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

Большинство небольших магазинов (а мы будем ориентироваться именно на них) имеют следующие способы доставки:

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

На вкладке “самовывоз” отображаем карту с группировкой точек, а также возможностью фильтрации:

Еще один момент - кнопка перехода на следующий шаг должна иметь название следующего шага, а не просто “далее”:

Заполнение ФИО и контактных данных. У каждого магазина свои требования. Форма простая - не будем на ней останавливаться.

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

На этом шаге, даём возможность выбора способа оплаты (если их несколько) и показываем экран подтверждения. Все элементы, вместе с кнопкой подтверждения заказа, должны уместится на одном экране:

Мы использовали принцип: один экран - одно действие.

Желательно реализовать процесс перехода между шагами быстрым - использовать AJAX и открывать страницы без перезагрузки. Также не забывайте про мобильную версию - макет легко адаптируется под разные viewports.

Для тех, кто хочет поиграть с реальным примером - воспользуйтесь платформой для интернет Sellios - мы реализовали вышеописанный checkout - получилось круто :)

Спасибо за внимание, надеюсь наше исследование кому-то пригодится.

#ecommerce #checkout #оформлениезаказа