Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Сайт о финтех, платежах и blockchain
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
26
Битрикс24

Битрикс24

www.bitrix24.ru

16
Отследить-посылку

Отследить-посылку

B2B-сервис трекинга посылок

14
myPreza

myPreza

mypreza.ru

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

10
YAGLA

YAGLA

yagla.ru

10
Reader

Reader

Интернет-журнал о современных технологиях.

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

Увеличиваем конверсию в форме оплаты с помощью визуального улучшения полей

1 186 4 В избранное Сохранено
Авторизуйтесь
Вход с паролем
В этой статье пойдет речь о повышении конверсии платежных форм. Кстати, выводами, которые в ней представлены пренебрегают до 90% сайтов. Если же учесть изложенные ниже рекомендации, то можно повысить конверсию платежей на несколько десятков процентов.

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

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

Статья подготовлена для корпоративного блога редакцией сайта о платежных системах с мониторингом обменников Web-payment.ru

Филипп Каплан как-то опубликовал заметку в своем блоге, в которой утверждается, что благодаря некоторым советам из этой статьи, он смог увеличить конверсию на своем сайте на 60%. Давайте разберем более детально, как у него это получилось, и подумаем, что еще можно было бы улучшить.Филипп разработал сервис DistroKid, платная версия которого стоит 19.99 долларов в год. Этот сервис позволяет музыкантам опубликовывать свою музыку на iTunes, Spotify и других крупнейших интернет-площадках по продаже музыки. 75% пользователей не хотели вводить данные своей кредитной карты. Но после внедрения рекомендаций перечисленных ниже, средний конверсионный курс увеличился с 25% до 40% (т.е. конверсия выросла на 60%).

Вот как выглядела платежная форма до каких-либо изменений:

b_5534c35794516.jpg

Вот так после изменений:

b_5534c37a1a8f5.jpg

Вот список и описание тех изменений, что были сделаны:
  • Большое изображение «замка»Замок + слово «зашифрованный» дают понять пользователям, что сервис заботится об их безопасности.
  • Серый фон для полей для ввода конфиденциальной информацииТакой визуальный ход вызывает у пользователя мысли вроде «все, что я печатаю в поле на сером фоне полностью безопасно». Следует отметить, что если вы используете подобный стиль и в других частях формы для обычных полей, вы не добьетесь желаемого результата, и это не позволит вам добиться необходимого уровня защиты нужных полей в глазах покупателей. Поэтому, чтобы добиться эффекта воображаемой оболочки, поля кредитной карты, которые вызывают у пользователей подозрения и настороженность, необходимо выделить и сделать непохожими на остальные.
  • Логотипы кредитных карт.Они позволяют ассоциировать сайт с финансовыми брендами, которым можно доверять.
  • Логотип SSL от регистратора GoDaddy прямо возле формы.Этот знак придает сайту солидность и еще раз подчеркивает его защищенность. Размещая знаки безопасности в непосредственной близости к полям кредитной карты, вы напоминаете клиенту о защищённости формы именно тогда, когда он впервые об этом задумывается. Это – стратегически верное решение, способное убедить беспокойного клиента. Кроме того, поместив их рядом с полями, а не где-нибудь вверху или внизу сайта, вы даете понять, что логотип SSL относится именно к этим полям (хотя с технической стороны это не имеет значения).
  • Выделение преимуществ, которые дает оплата.На одной странице трижды упоминается о том, что пользователь получает возможность «неограниченной закачки» файлов. Филипп взял эту идею у брачных агентств (и порносайтов), которые часто вешают фотографии симпатичных девушек на формы оплаты. Таким способом они словно говорят пользователю: «Ты даже сможешь увидеть ее или встретиться с ней если подпишешься».
  • Выпадающий список с перечнем платежных систем.Добавление отдельного поля под выбор типа карты не кажется логичным шагом на первый взгляд. Но это только на первый взгляд. При этом по-умолчанию уже выбрана Visa, потому что эта платежная система является самой популярной. Возможно, пользователи думают: «Ух ты! Поле уже заполнено и без меня». Многим пользователям это сокращает время, затрачиваемое на ввод данных.
  • Персонализированное сообщение.Вывод персонального оповещение пользователя под полями на сером фоне, улучшит предложенные преимущества, а также усилит доверие пользователей.
С технической точки зрения, нет никаких различий между оформлением защиты сайта Филиппа и другими крупнейшими интернет-магазинами, которые визуально не усилили свои платежные поля. Но при проектировании своей платежной страницы вы должны учитывать, что большинство клиентов совершенно не разбираются в принципах работы веб-форм, проверке на уязвимость или SSL. Вместо этого покупатель полагается на свою интуицию и делает вывод: можно доверять вашему сайту или нет.

b_5534c3b4e768b.jpg

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

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

Демо, исходники на Github. Из особенностей можно выделить то, что все написано на чистом html, css и js без использования картинок, скрипт полностью бесплатен и документирован.

Подписывайтесь на нас здесь, а также на нашем сайте Web-payment.ru, впереди много интересных постов про платежные сервисы, электронные деньги, разработку и продвижение стартапов и прочее.

+5
Первые Новые Популярные
Andrii Horbatiuk
Вопрос о поле Card type. Какой в нем смысл? Тип карты и так определяется автоматически по номеру.
Ответить
Waves Platform
Blockchain-платоформа для эмиссии и торговли цифровыми активами
Виталий Цигулев
Да, это действительно спорное поле, но если его автоматически определять по номеру карты у пользователя может возникнуть больше доверия, также в некоторых популярных англоязычных сервисах был такой элемент интерфейса и наверное оттуда еще повелось.
Ответить
Andrii Horbatiuk
Это прям как поле "Отчество". Вроде бы и надо для культурного обращения, но увеличивает время заполнения данных. Надо бы протестировать это поле и посмотреть как оно влияет на конверсию. Лично мое предположение, что незначительно должна вырасти конверсия.
Ответить
Waves Platform
Blockchain-платоформа для эмиссии и торговли цифровыми активами
Виталий Цигулев
Я с вами согласен, тоже думаю, что если и влияет то незначительно и наверняка только на западном рынке.

Лично я бы все-таки не стал бы его использовать в форме.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать