Как создать страницу оплаты заказа для проекта: 11 популярных сайтов

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

Какой должна быть идеальная страница оплаты

Чарльтон говорит, что хорошая страница оплаты товара должна обладать рядом характеристик:

Она дожна быть быстрой. Специалист Econsultancy убежден, что нет ничего хуже, чем «зависание» после нажатия кнопки подтверждения покупки. Подобные задержки могут посеять в сознании пользователя сомнения в успешности всего процесса оплаты.
Нельзя заставлять пользователей регистрироваться. Предлагать такую возможность стоит, но не ценой потери потенциальной продажи — люди не любят преодолевать барьеры, а принудительная регистрация — это для многих серьезное препятствие.
Нужно напоминать о безопасности. Пользователю любят видеть изображения замков и слова, убеждающие в безопасности.
Формы на странице должны быть простыми. Чарльтон считает, что чем проще заполняются формы, тем больше шансов на совершение продажи. Никому не нравится заполнять множество полей, поэтому не стоит требовать от людей слишком многого.
На странице должны быть индикаторы прогресса. Клиент всегда должен знать, на каком этапе процесса совершения покупки он находится, и что еще ему придется проделать, чтобы завершить его. В верхней части страниц на всем пути совершения покупки должен быть индикатор прогресса.
Информация о содержимом корзины должна быть видна. Пользователю нужно видеть данные о том, что находится в его корзине, без необходимости покидать страницу оплаты.
На странице оплаты не должно быть отвлекающих элементов. Покупателям ни к чему отвлекаться на красивые элементы дизайна, для бизнеса будет лучше, если они сосредоточатся на покупке, так что не нужно им мешать и уводить в сторону различными ссылками.

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

Ebuyer

Онлайн-ритейлер гаджетов и техники совершил ошибку в пункте номер два — для совершения покупки на его сайте нужно обязательно зарегистрироваться.

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

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

Wiggle

Компания
Wiggle продает спортивные товары (в частности, для велосипедистов). Этот сайт не заставляет пользователей регистрироваться для совершения покупки — им предлагается сделать это позже.

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

ASOS

Известный онлайн-ритейлер одежды
ASOS убрал лишний шаг с принудительной регистрацией, что позволило ему снизить число покинутых корзин на 50%. Так страница выглядела раньше:

А так после преобразований:

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

Sodastream

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

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

AO.com

Ритейлер бытовой техники и электроники
AO.com постарался свести число препятствий на пути к совершению покупки к минимуму и отказался от обязательной регистрации, кроме того, пользователям облегчают заполнение формы с помощью подсказок (например, о том, что такое CVV-код):

Amazon

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

Fallen Hero

Интернет-магазин по продаже дизайнерской одежды
Fallen Hero разработал адаптивную версию сайта, что позволило ему добиться увеличения продаж только с планшетов на 143%. Шаг с регистрацией также отсутствует, и клиентов направляют сразу на страницу оплаты:

Hunter

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

Crate and Barrel

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

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

Symantec

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

AutoZone

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

Компании следовало бы поработать над типографикой, однако, в целом, её сайт и форма оплаты решают стоящие перед ними задачи, считает Чарльтон:

Выводы

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