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

Содержание

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

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

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

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

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

Ebuyer

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

fe041ec18b330b687735

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

52b2dc87b54e0b3aac0f

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

Wiggle

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

32e0e64a8986be6562eb

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

1b22356c66c2d8ec83b6

ASOS

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

f2aa8ac6a164ec654fb4

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

7caacef6a7fcc86cdb14

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

Sodastream

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

439880975fe7cd7a16f8

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

59fe07927eb484150b61

AO.com

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

1022007c60c2d74542ef

Amazon

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

17a754edc81a89166f13

Fallen Hero

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

19a12dcc3a0aa66e9297

Hunter

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

66951683ab54c7e60651

Crate and Barrel

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

84cb9ecdbbe87ee2ba88

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

04345d9da17cb6efa352

Symantec

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

6f9169a65ef69400a63a

AutoZone

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

62fb7dd8fd3cd19b180c

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

c86bc548d0b09c066654

Выводы

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