Рекомендации по дизайну процесса оплаты

artlebedev.ru

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

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


Помните об основных рекомендациях по ДИЗАЙНУ ФОРМ

Размышляя о формах в контексте процесса оплаты, стоит вновь упомянуть об этих рекомендациях.

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

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

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

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

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

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

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

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

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

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

Оформляйте кнопки согласно их функции

Дизайн кнопок мы уже обсуждали в главе «Целевые страницы», но давайте рассмотрим конкретные проблемы, связанные со спецификой процесса оплаты.

Кнопки играют важнейшую роль при оформлении заказа, помогая посетителям обновлять корзину, рассчитывать стоимость доставки и переходить от одного этапа к другому. Но что происходит, когда все кнопки выглядят совершенно одинаково? Посетители вынуждены читать надписи на них, чтобы понять, какая кнопка что делает и которая из них важнее других. Это особенно трудно, когда на одной странице четыре, пять или больше кнопок и все они совершенно одинаковы — кроме надписи и функции. Ну и ну! Вы хотели заново посчитать общую стоимость заказа, а вместо этого удалили содержимое корзины? Извините, но надо было внимательнее читать подписи на кнопках.

Отсутствие приоритетов при оформлении кнопок часто встречается в шаблонных системах электронной коммерции.

корзина интернет-магазина
Интернет-магазин товаров для садоводов. Явный признак грядущих проблем: кнопки, которые требуют надписей и инструкций! Это типичный шаблон корзины покупок с запутанным внешним видом и пятью одинаковыми на вид кнопками. Посетителю ничто не подсказывает, какая кнопка важнее других и в чем ее функция. Единственное, чем отличаются кнопки — текст подписей, поэтому посетитель вынужден их читать.

Пример, приведенный ниже, показывает, как использовать разные стили и расположение кнопок, чтобы показать, какие из них важнее.

cduniverse.com
cduniverse.com. Эта корзина покупок предлагает посетителю на выбор больше вариантов действий, но четко показывает их важность при помощи разного расположения и оформления кнопок.

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

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

ЯСНО ОБОЗНАЧАЙТЕ ЭТАПЫ ПРОЦЕССА
Независимо от того, сколько этапов содержит процесс оплаты, посетители чувствуют себя комфортнее, когда знают, что ждет их впереди. Как мы уже упоминали в главе «Формы», обязательно добавьте к форме указатель этапов, который показывает, что будет дальше и на каком этапе находится посетитель. Такой указатель важен для любых процессов, но для процесса оплаты — в особенности.

artlebedev.ru
artlebedev.ru. Этапы процесса оплаты на этом сайте ясно перечислены и пронумерованы в указателе над корзиной, который остается на том же месте на протяжении всего процесса.

Сделайте жизнь посетителя проще: НЕ ЗАСТАВЛЯЙТЕ РЕГИСТРИРОВАТЬСЯ
Первое, что видят многие посетители, нажимая на кнопку «Оформить заказ», — это страница входа в систему / регистрации, и именно на этом этапе мы обычно сталкиваемся с большими показателями отказов. Делать регистрацию обязательным условием для покупки товара — нелогично, по крайней мере с точки зрения посетителей. Они знают, что для совершения покупки им придется предоставить информацию об адресе доставки, платежном адресе и своей банковской карте — разве этого недостаточно?

Решить эту проблему легко — надо просто убрать этот шлагбаум с пути потенциального покупателя. Вместо того чтобы заставлять посетителей создавать учетную запись, прежде чем они смогут продолжить процесс оплаты, сделайте поля с информацией для регистрации (например, паролем) частью другого этапа процесса оформления заказа. Хороший пример на сайте ремонт ноутбуков куркино, где нужной информации ничего нет.

nordstrom.com
nordstrom.com. Подход сайта Nordstrom помогает избежать первого барьера в виде заполнения отдельной формы регистрации, что повышает вероятность оформления заказа.

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

Уменьшите количество этапов ИЛИ СДЕЛАЙТЕ ИХ ПРОЩЕ
Чем меньше этапов в процессе оплаты, тем больше конверсия, не так ли? Как правило, да. При прочих равных (например, мотивации посетителей) короткий процесс оплаты будет иметь более высокий коэффициент конверсии, чем длинный. Но не так все просто. Больше всего на коэффициент конверсии влияют ясность каждого из этапов и простота перехода от одного к другому, а не их количество. Одного непонятного, непродуманного шага достаточно, чтобы коэффициент конверсии резко упал.

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

Оставьте один этап
Если вы можете позволить себе внести радикальные изменения в процесс оплаты товара, подумайте о том, чтобы собрать все этапы на одной странице На современных страницах оформления заказа за один шаг вопросы вторичного взаимодействия (вроде входа в систему и ввода адреса доставки) часто решаются при помощи технологии Ajax. Этот усовершенствованный, упрощенный процесс оплаты, как правило, приводит к увеличению количества успешно оформленных заказов.

Покажите посетителям, что их информация В БЕЗОПАСНОСТИ И ТАЙНЕ
Когда вы просите посетителей вводить личные данные, важно уверить, что они могут вам доверять. Это особенно касается процесса оформления заказа, когда посетители должны ввести информацию с кредитной карты или выбрать другой способ оплаты.

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

Дайте информацию о правилах доставки И ВОЗВРАТА ТОВАРОВ
Один из многих вопросов, которые возникают у посетителей интернет-магазинов, касается того, смогут ли они вернуть товар, который неисправен, сломан или просто не того размера. Успокойте посетителей, сделав заметными ссылки на информацию о правилах доставки и возврата товаров.