Оплата на сайте: как увеличить конверсию платежей

Увеличиваем конверсию в форме оплаты с помощью дизайна и анимации

• 24 мая 2015 в 11:10
• 4
• 2170
• 2
• cigulev

Многие думают, что разработка дизайна для формы оплаты — это не самое важное занятие.

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

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

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

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

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

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

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

Анимация, добавляющая контекст

Клик по чекбоксу открывает дополнительную информацию с полем для ввода номера мобильного телефона. Это пример полезной для пользователя анимации.

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

Тем же, кто захочет «запомниться», достаточно активировать чекбокс и ввести необходимые данные.

Анимация «качание»

При заполнении формы оплаты многие пользователи могут не сразу заметить допущенные ошибки. Конечно, воспринимать их можно по-разному. Однако большинство пользователей раздражает, когда после ввода всех необходимых данных перед ними выскакивает сообщение о неверно указанной информации (как следствие, мы получаем высокий процент отмены платежей).

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

Ловкость рук

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

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

Стоит отметить, что данная анимация — всего лишь иллюзия, ведь на самом деле мы не знаем, когда именно придет SMS-сообщение, тем не менее, это работает.

Трансформирующиеся кнопки

В данной анимации переходу между двумя состояниями кнопок («Информация об оплате» и «Заплатить $25,00») соответствует также изменение деталей платежа (над кнопкой появляются поля для ввода платежных реквизитов). Т.о., кнопка и форма объединены одной анимацией, и при переходе на следующий шаг оплаты пользователь понимает, что он совершает новое действие.

Когда пользователь нажимает «Заплатить», ненадолго появляется индикатор загрузки (для придания всему процесса большей динамики), после чего на форму выводится иконка, информирующая пользователя об успешном завершении операции. Анимированная галочка дает ощущение того, что вы легко и быстро совершили покупку.

Бонус

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

Инструментарий

Создание анимации интерфейса — это сплоченная работа дизайнера-аниматора и разработчика.

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

Для таких случаев используется один из существующих инструментов для создания анимации, вот некоторые из них: After Effects, Origami, Pixate, Google Form, Framer, Flinto, Composite, Precursor.

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

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

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

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

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

Источник: //web-payment.ru/article/69/uvelichivaem-konversiju-v-forme-oplaty-s-pomoshhju-dizajna-i-animacii/

Увеличение конверсии продаж с помощью онлайн платежей

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

• 32 млн активных банковских карт и более 19,7 млн интернет-пользователей насчитывалось на конец второго квартала 2012 года
• в первом полугодии 2012 объем платежей банковскими картами в интернете составил более 6,5 млрд грн.
• на 90-100% растет объем карточных онлайн платежей ежегодно.

*Данные Национального банка Украины, Украинского процессингового центра,  InMind (ИнАУ)

О конверсии продаж и способах ее увеличить

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

По данным исследования Marketing Experiments, в интернет-магазинах более 50% корзин остаются неоплаченными. По данным иных исследовательских компаний этот показатель еще больше.

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

Итак,  основные критерии, влияющие на конверсию продаж онлайн-ресурса:

1. дизайн и архитектура сайта
2. usability
3. удобная и понятная навигация
4. возможность быстрой обратной связи
5. уникальность контента
6. яркие призывы к действию
7. использование отзывов клиентов и механизмов рекомендаций

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

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

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

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

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

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

Кроме того, немаловажным фактором для отдельной категории сайтов, менеджеры которых заботятся о правильном проектировании интерфейсов для достижения высокого уровня usability, является расположение элементов фирменного дизайна на платежной форме.

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

Необходимо помнить о том, что с точки зрения психологии момент расставания с деньгами это своего рода стресс для любого из нас.

Волнение естественно усиливается в связи с тем, что у покупателя отсутствует face-to-face контакт с продавцом.

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

Факторы, которые могут помочь интернет-магазинам увеличить конверсию продаж:

• минимальное количество полей платежной формы либо возможность автозаполнения полей;
• возможность осуществлять повторные покупки в один клик без введения полных реквизитов карты (recurring payments);
• дизайн и usability страницы, на которой ваш клиент вводит реквизиты карты;
• отсутствие лишних шагов в процессе оплаты: отправка смс-сообщений, получение/введение дополнительных кодов и т.п.;
• правильные настройки системы защиты и мониторинга.

Recurringpayments

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

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

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

Пример реализации  recurring payments приведен на изображении ниже. У клиента, совершающего повторную попытку, есть два варианта выбора: сделать платеж с карты, которая использовалась им ранее на данном ресурсе или использовать другую карту. Таким образом, постоянные покупатели смогут совершать покупки в один клик, что увеличивает объем полученных оплат.

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

Cross-sell

Еще одним инновационным решением является реализация возможности cross-sell.

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

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

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

Скопипастил отсюда: ain.ua

Источник: //csslike.me/uvelichenie-konversii-prodazh-s-pomoshh/

8 рекомендаций по увеличению конверсии платёжных страниц в интернет-магазинах — Офтоп на vc.ru

Советы от исполнительного директора сервиса для организации онлайн-платежей Payture Алексея Корнеева.

Алексей Корнеев

До 70% покупок в интернет-магазинах остаются незавершенными. Среди причин отказов — сложный процесс оформления, недостаток способов оплаты, различные ошибки. Тем не менее конверсию можно довести до максимума.

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

Кастомизация

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

Хорошие формы — те, которые понятны неподготовленному пользователю. Запрашивайте минимум данных и говорите с клиентом на его языке: не PAN, а «номер карты», не CVV/CVC2, а «три цифры на обороте». Термины, множество полей, обязательная регистрация заставляют пользователей нервничать и ведут к отказам.

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

Мобильный шаблон Payture

Помимо удобства пользователей волнует безопасность. Акцентируйте внимание на защищенности соединения и мерах предосторожности, которые используете. Разместите логотипы Verified By VISA, MasterCard Secure Code, PCI DSS — они вызывают доверие.

Мобильная версия

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

Казалось бы, это очевидно: практически у всех уже давно есть пометка Mobile Friendly.

Однако по итогам 2021 года доля интернет-магазинов с мобильной версией в зависимости от отрасли колеблется от 25% до 45%. Большая часть из них всё ещё не готова к мобильному трафику.

Реализовать опцию оплаты можно как в мобильной версии сайта, так и в отдельном приложении магазина. В обоих случаях критичны адаптивность, простота, быстрая загрузка и лёгкость управления одним пальцем. Хорошо, если платеж доступен в одно касание с помощью решений вроде Apple Pay и Android Pay.

С большой вероятностью покупатель оставит корзину, не найдя удобного способа оплаты.

По статистике около 40% российских пользователей минимум раз в год оплачивали заказы в онлайн-магазинах с помощью интернет-банкинга, и почти 26% — электронными деньгами.

Среди сервисов лидируют «Сбербанк Онлайн», «Яндекс.Деньги», PayPal, WebMoney, Visa QIWI Wallet. Набирают популярность MasterPass от MasterCard, Apple Pay и Android Pay.

Предоставьте выбор, структурируйте инструменты по категориям и визуализируйте их с помощью узнаваемых иконок. Формируйте список платёжных сервисов с учётом среднего чека, вида товаров или услуг, предпочтений и географии покупателей. При работе с международной аудиторией стоит подключить инструменты, не распространенные в СНГ, — например, American Express.

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

В Payture реализована функция онлайн-оплаты в кредит совместно с платформами Kviku и «РЕВО+». Кнопку «Купить в рассрочку» можно добавить на любом этапе совершения покупки или при выборе способа оплаты. Также мы предоставляем партнерам скрипт для расчета минимального платежа, что помогает увеличить конверсию и средний чек.

Скорость загрузки

Покупатель нетерпелив и не любит ждать загрузки страницы дольше трёх секунд. Оптимизация графики и объема передаваемых данных улучшает показатели. «Узкие места» можно проанализировать при помощи инструмента Google PageSpeed Insights, который подсказывает способы решения проблем.

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

Технологии платежей, повышающие конверсию

Приём реквизитов покупателя возможен на странице продавца или платёжного сервиса. Первый вариант вызывает больше доверия пользователей. Для его реализации необходима прямая интеграция с эквайером (host-2-host). Такие решения доступны онлайн-ритейлерам, верифицированным по стандартам PCI DSS 3.2.

Без прохождения сертификации продавец может использовать интерфейс платёжного шлюза. При этом покупатель вводит данные не на сайте магазина, а на странице сервиса (hosted payment page). Редирект на сторонний сайт выглядит нелогичным для клиента, поэтому мы по возможности кастомизируем шаблон платёжной страницы.

Способы защиты, которые не мешают покупке

По нашему опыту, 3D-Secure снижает конверсию на 15-40%. Распространённые проблемы: код не пришел или введен некорректно, нет соединения (например, в метро есть интернет, но нет мобильной связи), не открывается страница авторизации, «подвис» банк и другие.

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

Тонкости процессинга

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

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

Работа над ошибками

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

Наиболее просто и эффективно — выделить область с ошибкой и понятным языком подсказать способ решения. Хорошо, если корректная информация сохранится в соответствующих полях и покупателю не придется вносить её повторно. Высший пилотаж — валидация во время заполнения формы, а не после нажатия кнопки «Оплатить».

Осуществить её несложно, поскольку все данные стандартизированы:

• Номер карты из 13-19 цифр можно проверять простым в реализации алгоритмом «Луна». Он создан специально для проверки номера карты при ручном вводе и вычисляет контрольные цифры номера пластиковой карты в соответствии со стандартом ISO/IEC 7812. Конверсия повышается на 5-15%. Еще 5% прибавляет определение банка по BIN — первым шести цифрам номера.
• Срок действия должен быть не меньше текущей даты и состоять только из цифр, а в поле месяца запрещено вводить число более 12.
• CVV/CVC2 — три цифры (для карт American Express — четыре).
• Имя держателя — необязательное поле, но если необходимо, то заполняется только латинскими буквами. Для неименных карт предложите пользователю ввести «Mr. Cardholder».

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

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

#Колонка

Источник: //vc.ru/flood/25681-payture-case

24 ошибки на платежной странице, понижающие конверсию

2021-07-17 23:10:00

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

«Небезопасный» ввод данных банковской карты и другие механизмы психики

Пользователь не задумывается о безопасности передачи номера карты и CVV до момента их ввода на вашем сайте.

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

1. Одно поле для любого типа банковской карты

Странно, но факт: люди заполняют платежные формы быстрее если предложить им выбрать платежную систему, к которой относится карточка. Дальше мы поговорим про wow-эффект распознавания МПС по номеру карты, но попробуйте сделать простой шаг и добавьте выбор платежной системы. Несколько процентов конверсии гарантированы!

2. Отсутствуют логотипы принимаемых кредитных карт

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

3. Отсутствует большое изображение «замка» Замок + слово «безопасный» дают понять пользователям, что сервис заботится о конфиденциальности.

Кроме такой иконки, похожую функцию выполняет логотип используемого канала SSL.

Дополнительно, поместив подобные «сигналы безопасности» рядом с конфиденциальными полями, вы даете понять, что иконка относится именно к этим полям (хотя с технической стороны это не имеет значения).

4. Поля для данных карты не выделяются на форме, особенно если она длинная

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

5. За что я плачу?

Если не показать товар, корзину или тарифный план на этапе оплаты, пользователь может «отвалиться» потому что недостаточно сильно хочет обладать услугой. Дублируйте список покупок на платежной странице, особенно когда процесс платежа многоступенчатый. К примеру, порносайты показывают фото моделей (и не только фото) рядом с кнопкой подписаться чтобы лишний раз показать объект вожделения.

«Что мне делать дальше?» и непонятный процесс платежа

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

6. Одна ошибка на все случаи жизни

Представьте себе ситуацию: вы прошли десяток шагов на сайте, добрались наконец до оплаты и… Получили отказ с комментарием «Что-то пошло не так».

Какова вероятность что вы попробуете оплатить с другой карты? А если случилась два раза одинаковая ошибка для разных ситуаций? Например, на одной карте недостаточно средств, а на другой ошибочно введен CVV, только вы об этом не узнаете. Вот-вот, ваши клиенты думают так же.

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

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

И не забудьте дать ссылку на повторную форму оплаты.

7. Слишком много шагов

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

8. Неконтрастная кнопка призыва к действию

Если среди обилия полей не очевидно какая кнопка отделяет пользователя от подписки или товара, он может запутаться и «бросить» страницу.

Проведите простой эксперимент, покрасьте кнопку в яркий цвет, например в зеленый.

9. Нет подсказок в полях (плэйсхолдеров)

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

10. Недостаточная или избыточная валидация полей

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

Вторая ошибка — проверять данные до завершения ввода в поле. Например, показывать ошибочность формата номера телефона до ввода всех цифр.

Оптимальным будет проверять каждое поле «на лету» при переводе курсора на следующее поле. Обязательно сохраняйте данные сразу после их появления в поле ввода!

«Это слишком сложно, Аааа!» или как упростить жизнь покупателя

11. Ненужная капча

Зачем в 21-м веке капча, тем более аудио? Исследование Стендфордского университета показало что:

• на решение визуальной капчи требуется 9,8 секунд;
• на решение аудио-капчи требуется 28,4 секунды;
• по сравнению с визуальной капчей, на 50% больше пользователей бросают аудио-капчу, так и не решив её.

Действительно ли избавление от спама стоит потери потенциальных конверсий?

12. Обязательная регистрация

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

13. Нелогичные и лишние шаги

Зачем пользователю вводить номер карты дважды? Зачем два раза нажимать кнопку «Оплатить»?

Кроме «хлебных крошек» проверьте что все данные запрашиваются только один раз. Убедитесь что каждая кнопка ведет на следующий шаг процесса заказа и нет лишних подтверждений (как это часто работает (и раздражает) у всем известной операционной системы). Относитесь как можно критичнее к каждому клику покупателя. Чем меньше кликов, тем больше заказов.

14. Слишком много полей

Если покупка совершается зарегистрированным пользователем, откажитесь от запроса телефона и email ведь вы можете использовать данные аккаунта покупателя для отправки подтверждения оплаты.

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

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

15. Слишком много кликов

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

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

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

16. Номер карты в одну строку

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

Однако стоит учитывать неодинаковость номеров карт и настроить разные группы в зависимости от типа карты. Например, вот так:

Здесь же отметим известный алоритм Луна, применяемый для валидации номера карты: можно на 100% быть уверенным что номер карты существует до отправки данных в банк.

А если добавить распознавание банка, выдавшего карту, на основе BIN (первых 6 цифр), то будет абсолютный wow-эффект.

17. Всплывающие окна

Сталкиваясь со всплывающим окном, большинство вспоминает интернет 90х годов с баннерами и прочим подозрительным контентом.

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

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

18. Неадаптированная мобильная версия

В 2021 году у крупнейших игроков еCommerce рынка более 50% платежей совершаются с мобильных устройств. Чтобы не потерять половину успешных транзакций, мыслите mobile first. Все профитные фичи десктопного сайта должны быть на мобильной версии. Кроме того, мобильный сайт, а особенно мобильная платежная форма, обязаны выглядеть привлекательно, то есть быть адаптированными.

Экспериментируйте!

19. Наличие 3DS

По данным платежного агрегатора Payler, чаще всего отказы в проведении платежа происходят по следующим причинам:

• Ошибки 3D-S авторизации (пользователь не ввел код/ ввел с ошибкой, код не пришел, страница 3D-S авторизации не открылась). Это — самая распространенная причина отказа. По статистике на нее приходится до 42-45% отказов.
• Операция отклонена банком-эмитентом/ банком-эквайером. На долю этой ошибки приходится около 29-33% отказов. Покупатель проявляет подозрительную активность и блокируется антифрод-системами. От 18 до 25% отказов происходят по этой причине.
• Ошибки покупателя. Самая редкая причина — всего 3-4% отказов.

Чтобы отключить 3DS для всех операций или настроить его наличие в зависимости от суммы платежа, свяжитесь со своим поставщиком эквайринга. Учтите, отключение 3DS может негативно сказаться на CR. В норме сhargeback rate не должен превышать 1%, иначе вам грозят санкции регуляторов.

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

20. Отсутствие мониторинга конверсии

Чтобы понимать насколько изменилась воронка конверсии на платежной форме, необходимо замерить исходные показатели. Перед началом опытов в улучшении показателя конверсии, соберите статистику на каких этапах «отваливаются» ваши пользователи. В этом вам поможет Google Analytics, Яндекс.Метрика и данные вашего эквайера.

21. Отсутствие А/В тестов

Чтобы понять какая из гипотез работает лучше, используйте сервисы A/B тестирования.

22. Слишком много платежных опций

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

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

Изучите % покупок разными способами и оставьте только нужные чтобы не запутывать покупателя. Альтернатива — скрыть редко используемые опции под кнопку «Другие способы».

23. День сурка на платежной форме

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

24. Вы не в тренде

Наконец, изучите самые современные способы принятия платежей, такие как ApplePay. Интеграция этого сценария оплаты возможна в том числе на web-версии сайта. Более подробную информацию можно получить из официальной документации Apple.

Вместо заключения

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

Вы можете поднять конверсию на десятки процентов простыми интерфейсными изменениями, главное начать экспериментировать!

И помните, 100% конверсия — это миф. Важно бороться за каждый % и спустя время вы удивитесь насколько поднялась прибыль от онлайн-покупок на вашем сервисе.

• Сравнение тарифов сервисов онлайн-оплаты
• Как подготовиться к 54-ФЗ

Источник: //MainMine.ru/pro/error24

Как повысить конверсию интернет-магазина: оптимизация форм онлайн-оплаты / Блог ArsenalPay о приеме онлайн-платежей

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

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

Если статистика вашего сайта говорит о том, что вы теряете покупателя именно на этом этапе – оплаты, значит сервис, который обеспечивает интернет-эквайринг, не справляется со своими задачами.

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

Что такое веб-форма и из чего она состоит?

С веб-формами мы сталкиваемся постоянно. Строка поиска в «Яндексе» или Google – самый простой пример. Веб-форма – это выделенная область на интернет-странице, которая предназначена для ввода данных. Формы бывают разных видов – от заявок на сайте типа «Оставьте свой телефон и мы перезвоним» до длинных регистрационных с десятками полей для ввода.

Веб-формы могут состоять из таких основных элементов: поле ввода текста (однострочное или многострочное), заголовки к полям, поле ввода пароля, меню, дата и другие.

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

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

Если мы говорим о интернет-коммерции, самый распространенный вариант в данном случае, – человек покидает сайт с полной корзиной, не оплатив заказ.

Сервис по интернет-эквайрингу может предотвратить такое неприятное развитие событий, если грамотно оптимизирует форму онлайн-оплаты. Мы выделили 10 советов по улучшению веб-форм для повышения конверсии вашего сайта.

Спрашивайте только необходимое

Пользователь ожидает увидеть короткую лаконичную форму, на заполнение которой он потратит минимальное количество своего ценного времени.

Не стоит спрашивать лишнюю информацию, которая не относится непосредственно к приёму платежей на сайте.

Составлять длинную форму, а потом обязательные к заполнению поля отмечать звёздочкой, – не самый лучший способ для тех, кто стремится повысить конверсию. Лучше от таких полей отказаться совсем.

Укажите количество шагов

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

Располагайте названия полей правильно

Человек привык видеть заголовок строки сверху и выровненным по левому краю. Не стоит проявлять оригинальность и размещать название снизу, потому что это приведёт пользователя в замешательство.

Плохой практикой считается размещение заголовков как плейсхолдеров (о них мы расскажем ниже).

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

Используйте плейсхолдеры

Чтобы правильно и быстро заполнить форму, людям нужно давать советы. Их часто оформляют в виде знаков вопроса возле строки, но чтобы избежать дополнительных кликов, можно показать в строке пример с помощью плейсхолдера. Плейсхолдер – это текст-подсказка внутри поля. Самый распространённый случай использования – когда в поле ввода пароля пишут “6 символов”.

Кнопки вместо списков

Заполняя онлайн-формы во время оформления заказа, пользователю часто нужно выбрать один из вариантов: способы оплаты, пол и другие. В таких случаях можно использовать радиокнопки (взаимоисключающий выбор), чекбоксы (флажок) или выпадающий список.

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

На изображении – сравнение визуального эффекта кнопок разного дизайна.

Автоматическое перемещение курсора

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

Inline-валидация

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

Автозаполнение

Некоторое поля веб-формы вы можете заполнить автоматически, упростив клиенту путь к покупке. Например, отслеживание IP посетителя даёт возможность узнать данные о его городе проживания. Так же функция автозаполнения актуальна для сохранённых данных.

Сохраняйте данные

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

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

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

Регистрация или её отсутствие

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

Дизайн интерфейса

Чтобы ваш интернет-магазин выделялся среди конкурентов, нужно сделать удобные онлайн-платежи ещё и красивыми. Визуально выделяйте область веб-формы, делайте кнопки выразительными, шрифт – читабельным, а также не забывайте добавлять значки безопасности MasterCard, Visa и PCI DSS.

Качественный контент

Уникальный текстовый контент должен сопровождать даже такие формальные процессы, как оплата в Интернете. В каждый шаг можно добавлять короткие объяснения, советы для клиентов.

Если речь идёт о регистрации как об опции, объясните посетителю, какие преимущества он получит, если всё-же зарегистрируется.

Придумайте понятные названия для кнопок (например, не «Подтвердить», а «Оплатить» на этапе подтверждения ввода данных карты).

Гарантия безопасности

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

Проверьте, работает ли форма на разных устройствах

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

Забота о покупателе

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

Источник: //arsenalpay.ru/blog/kak-povysit-konviersiiu-intierniet-maghazina-optimizatsiia-form-onlain-oplaty/