Оффтоп Alexander Lashkov
11 621

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

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

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

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

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

Чарльтон изучил большое количество страниц оплаты различных 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 выглядит немного устаревшим, но его функциональность отвечает современным требованиям. Сайт «умеет» поправлять пользователя, если он по ошибке вводит адрес, который не совпадает с его местоположением:

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

Выводы

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

#электронная_коммерция #интерфейсы #форма_оплаты #покупки_в_интернете #страницы_оплаты

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

Написать
Статьи по теме
Как улучшить мобильную версию сайта: 10 полезных функций
UI-дизайнер Stripe: Как улучшить юзабилити форм оплаты с помощью анимаций
{ "author_name": "Alexander Lashkov", "author_type": "self", "tags": ["\u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f_\u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u044f","\u0444\u043e\u0440\u043c\u0430_\u043e\u043f\u043b\u0430\u0442\u044b","\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b_\u043e\u043f\u043b\u0430\u0442\u044b","\u043f\u043e\u043a\u0443\u043f\u043a\u0438_\u0432_\u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 12, "likes": 20, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 4914, "is_wide": true, "is_ugc": true, "date": "Thu, 04 Sep 2014 21:11:20 +0400" }
{ "id": 4914, "author_id": 729, "diff_limit": 1000, "urls": {"diff":"\/comments\/4914\/get","add":"\/comments\/4914\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/4914"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

12 комментариев 12 комм.

Популярные

По порядку

Написать комментарий...

Комментарий удален

0

Почему? В чем там ошибки?

Ответить
4

Содастрим, например. На месте владельца магазина я бы сжёг в курилке того, кто придумал такую форму. Индекс? Серьёзно?? Брр.

Ответить

Комментарий удален

0

А чем так смущает индекс? Думаете не стоит его вообще использовать при за заполнении форм?

Ответить
0

Самому нет.

Ответить

Комментарий удален

0

Ага, Амазон :)

Ответить
0

А если посмотреть на Aliexpress то он вообще все эти правила не ценит, но продает и продает еще как!

Ответить

Комментарий удален

0

А мы вот решили вопрос по другому и в качестве логина выступает номер мобильного телефона или email(если пользователь его ввел при заказе). Пароль для доступа к сайту высылается ему по SMS и на почту(если ввел при оформлении заказа).

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

Выглядит вот так:
http://mnogolet.com.ua

Ответить
0

Отвлечение пользователя на другое устройство снижает конверсию на 40%. Это исследование.
Плюс вы теряете часть клиентов из-за не пришедшей/пришедшей слишком поздно смс. Это гипотеза.

Ответить
0

SMS шлюз у нас позволяет отправлять до 1000 SMS одновременно, так что с этим проблем быть не должно.

По поводу отвлечения вопрос спорный. Можете восстановить пароль по Email.

Ответить
0

Признаться для вашего ИМ тоже не вижу смысла в СМС авторизации... Все же стандартно вроде как? Не? Смс авторизация Вам нужна, когда телефон нужно верифицировать. Но вы же получаете ПРЕДОПЛАТУ в ИМ и если клиент уже оплатил, но при этом телефон указал левый или неправильный - по сути его проблема, пусть не вафлит.

Ответить
0

Есть большой плюс в увеличении доли зарегистрированных покупателей;

1. Мы знаем истории покупок, следовательно можем это использовать для рассылок с интересными для пользователя товарами

2. У пользователя появляется возможность использовать программу лояльности(скидки, бонусы, промо-коды)

3. Привлечение нового покупателя обходится в 3-4 раза дороже постоянного клиента.

Ответить
0

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

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления