Платежная форма – финальный шаг при проведении онлайн оплаты, и ничего не должно помешать покупателю сделать этот шаг. В новом выпуске серии «9 секретов онлайн-платежей» мы расскажем, какой должна быть платежная форма на коммерческом сайте, чтобы клиенту ничто не помешало успешно совершить оплату.
Платежная страница имеет критическое значение. Это «конечная станция» для клиентов, совершающих покупки на вашем сайте. Это место, где пользователь вводит данные своей банковской карточки и принимает окончательное решение расстаться с деньгами, заработанными «потом и кровью». Здесь посетитель сайта становится клиентом, приносящим компании деньги.
По итогам семи лет работы на рынке электронной коммерции и на основании опыта сотен клиентов, специалисты нашей компании PayOnline, которая занимается организацией онлайн-платежей, выделили семь ключевых моментов, на которые нужно обратить внимание каждому владельцу интернет-магазина, принимающего платежи по банковским картам онлайн.
Часть 1. Настройка 3D Secure
Часть 2. Регулярные платежи
Часть 3. Страница выбора способа оплаты
Часть 4. Платежная форма
Часть 5. Мобильные платежи
Часть 6. Оплата в один клик
Часть 7. Система fraud-мониторинга
Часть 8. Возвраты и как их избежать
Часть 9. Настройки платежного сервиса под тип бизнеса
1. Доверие и безопасность
Страница с платежной формой должна генерироваться индивидуально для каждой оплаты. Данные пользователей должны быть надежно защищены от злоумышленников и передаваться в банк-эквайер в зашифрованном виде с помощью криптографического протокола TLS (Transport Layer Security). Безопасность оплаты должна быть подтверждена сертификатом безопасности PCI DSS (Payment Card Industry Data Security Standard). А главное – плательщику должно быть известно, что его деньги в безопасности. Всякий раз, когда в процессе оформления заказа задействована платежная и личная информация клиента, не забывайте демонстрировать все меры предосторожности, которые предпринимаете вы и ваш платежный партнер для обеспечения их безопасности.
В ходе опроса, проведенного компанией Econsultancy, было обнаружено, что 58% респондентов прерывали оформления заказа из-за опасений по поводу безопасности платежей. Пользуйтесь услугами только тех платежных провайдеров, которые обладают сертификатом TLS (Transport Layer Security). Сертификат используется, чтобы обеспечить безопасное соединение и зашифровать информацию о данных банковской карты. Кроме того, процесс обработки платежей на вашем сайте должен соответствовать стандартам PCI Совета по Стандартам Безопасности (PCI SSC). Сертификат PCI DSS подтверждает, что обработка платежей производится в соответствии с международными стандартами безопасности, установленными для компаний, которые хранят, передают, обрабатывают платежные данные.
Обязательно покажите пользователям значки сертификата PCI DSS, Verified By VISA, MasterCard Secure Code и т.д., как это показано ниже на примере платежной формы интернет-магазина ЛитРес.
2. Избавьтесь от отвлекающих факторов
Страница оплаты – это последний шаг, который делает клиент на вашем сайте, и в нашу эпоху клипового мышления и тотального отсутствия концентрации внимания, необходимо ликвидировать все факторы, которые могут отвлечь клиента от завершения покупки. А это значит, что вы не должны размещать на странице оформления заказа и оплаты какие бы то ни было рекламные материалы, ни при каких обстоятельствах.
На этом этапе главная цель – аккуратно «довести» клиента до совершения оплаты. Пример – страница регистрации в сервисе «Будист». Сервис концертирует внимание пользователей на форме, удалив с этой страницы верхнее меню и оставив лишь самую необходимую мотивирующую информацию. Каждое поле сопровождает подсказка – зачем сервису нужны те или иные данные.
3. Запрашивайте только действительно необходимую информацию
Ничто так не вредит конверсии, как необходимость заполнить форму информацией, которая не нужна для совершения покупки. А длинный список полей для заполнения становится для плательщиков полосой препятствий, которая ему только мешает. Оплата не должна выглядеть для плательщика как километровый забег с барьерами. Для ваших клиентов процесс оплаты – это спринт, и вы должны помочь клиенту пробежать его быстро и без лишних усилий.
По данным компании Forrester 11% пользователей отказывались от покупки только потому, что не хотели проходить регистрацию или у них запрашивали слишком много информации. С задачей упрощения процесса и минимизации объема требуемых данных прекрасно справляется платежная форма, выполненная в виде банковской карты. Даже неопытный плательщик сможет интуитивно догадаться, каким образом какое поле необходимо заполнять.
Если же вам критически нужна какая-либо дополнительная информация, убедитесь, что вы объяснили клиенту, зачем вы ее запрашиваете.
4. Позвольте клиентам легко исправить свои ошибки
Всем понятно, что людям свойственно делать ошибки. Иногда они пропускают поле ввода почтового индекса или забывают вставить «@» в адрес электронной почты. Ваша задача состоит в том, чтобы указать на ошибку и помочь пользователю исправить ее.
На некоторых сайтах сообщение об ошибке появляется в верхней части страницы, но люди не понимают, что они должны «прокрутить» все до самого верха, чтобы понять, что же пошло не так. В идеале, сообщение об ошибке должно появиться в области, где произошла ошибка.
Еще одна полезная подсказка: людям намного проще продолжить оплату в случае ошибки, если вы автоматически сохраните на форме всю корректно введенную информацию. Так пользователю потребуется повторно ввести данные лишь в то поле, где была допущена ошибка. На иллюстрации ниже вы увидите, что на стандартной платежной форме PayOnline не удаляются данные, которые были уже введены, и четко выделяются красным цветом сообщения об ошибках, которые содержат их описание.
Нет ничего более раздражающего пользователя, особенно если он заполняет длинную форму, чем повторный ввод всех данных. По результатам исследования, подготовленного компанией Invesp, проблема потери клиентов из-за некорректного отображения сообщений об ошибках при заполнении форм входит в десятку главных «убийц конверсии» во время оплаты.
5. Позвольте клиентам оплачивать покупки без регистрации
Нужно ли заставлять пользователя запоминать еще один логин и пароль? Вряд ли. Не стоит создавать еще одно препятствие на пути клиента к оплате. Заставлять пользователей регистрировать учетную запись на вашем сайте – это слишком навязчиво, особенно для тех, кто совершает покупку впервые. Обязательная регистрация – это еще одна из победительниц рейтинга «убийц конверсии».
Юзабилити исследование, проведенное компанией Smashing Magazine, показало, что основной причиной неприязни пользователей к регистрации аккаунтов является ожидание нежелательного спама. Также в исследовании отмечается, что многие клиенты не понимают, почему они должны регистрироваться в интернет-магазине, чтобы что-то купить, в то время как в оффлайн магазинах у них никто не требует регистрации при покупке. Еще одним недостатком регистрации является то, что она добавляет несколько дополнительных полей для заполнения, что затягивает процесс оформления заказа и негативно сказывается на конверсии. Чтобы сделать жизнь клиентов проще и увеличить вероятность благоприятного исхода, необходимо минимизировать время клиента на оформление заказа и запрашивать у него лишь необходимый минимум информации.
Например, интернет-магазин «Байон» не требует у клиента «регистрации», он просит его представиться. И для этого предлагает клиенту самому выбрать удобный ему способ знакомства – с помощью социальной сети, телефона или e-mail. Помимо этого, форма регистрации состоит из всего двух полей, что не может не порадовать клиента.
6. Не «редиректите» покупателей
Вы потратили много усилий, чтобы привлечь клиентов на ваш сайт. Зачем же отправлять их на другой сайт для оплаты? Если вы не можете контролировать дизайн платежной страницы стороннего сервиса, у ваших клиентов может появиться ощущение, что он платит совсем не той компании, у которой покупает товар или услугу.
Сегодня у коммерческих сайтов есть возможность интегрировать платежную форму прямо на страницу вашего сайта с помощью технологии Iframe. Это позволяет снизить недоверие клиентов до минимума, не пугая их неожиданными редиректами и «успокоив» идентичностью оформления страницы регистрации и формы оплаты. Вот как мы реализовали интеграцию платежной формы на страницу оплаты нашего клиента, биржи объявлений Avito.
Оформление заказа и оплата это последние действия, которые совершают ваши клиенты при покупке, вот почему вам нужно, чтобы на этих страницах клиент видел название вашей компании.
7. Придерживайтесь единого стиля оформления
С точки зрения брендинга, следует делать все элементы вашего сайта максимально визуально идентичными. Это означает, что необходимо использовать одни и те же цвета, шрифты, элементы оформления. Эти требования относятся к дизайну вашей страницы выбора платежного инструмента и странице оплаты, так же как и к другим страницам вашего сайта.
Соблюдая визуальную идентичность всех элементов сайта, вы также можете увеличить узнаваемость вашего бренда среди покупателей. Конечно, платежные сервис-провайдеры готовы предоставить вам готовые страницы оплаты, созданные с целью максимизации конверсии в оплаты. Но если у вас есть для этого ресурсы, стоит озаботиться адаптацией формы под уникальный стиль вашего интернет-магазина. А с учетом разнообразия видов интернет-мошенничества и связанных с ним страшных историй, неудивительно, что пользователи скептически реагируют на разницу в оформлении платежной страницы и оформлении сайта интернет-магазина, на котором они совершали покупку.
Чтобы избежать непонимания и опасения со стороны покупателей, используйте идентичный дизайн для оформления всех страниц вашего сайта, в особенности – страниц оформления заказа и оплаты, как сделала компания МТТ. Стоит отметить, что изменение дизайна платежной страницы не сказывается на ее безопасности, меняется только «обложка».
В данном примере можно наблюдать визуальную идентичность, в которой платежная страница полностью соответствует дизайну сайта, даже в отношении характерных элементов оформления, в том числе – шрифтов, цветов, «кнопок», форм и даже фирменного персонажа.
Удобство и безопасность – именно такие основные требования предъявляются пользователями к странице оплаты. В следующей части цикла «9 секретов онлайн-платежей» мы расскажем, какие возможности игрокам рынка e-commerce дают мобильные пользователи и что нужно знать, чтобы не терять потенциальных клиентов из самого быстро растущего сегмента. А если вы хотите настроить прием онлайн-платежей на сайте или в мобильном приложении, смело обращайтесь, наши специалисты проконсультируют вас по любым вопросам.
Источник
В разных банках размер комиссии зависит от разных факторов, но, как правило, чем больше ваш оборот, тем ниже будет ставка. Выбирайте банк, у которого есть собственный процессинговый центр, — комиссия тоже будет меньше (у СберБизнеса такой есть).
Подробнее о том, как подключить интернет-эквайринг, читайте в другой
статье.
Юрлицо или ИП может завести корпоративный электронный кошелёк с реквизитами компании, который привязывается к расчётному счёту. Для этого заключите договор с платёжной системой, имеющей статус кредитной организации, например, PayPal или QIWI. Принимать оплату от юридических лиц таким способом нельзя.
Плюсы: реально принимать платежи от клиентов по всему миру; можно выбрать подходящую платёжную систему и не подключать лишний функционал.
Встроить плагин платёжной системы на сайт легко, а вот интегрировать с онлайн-кассой сложнее — понадобится помощь специальных сервисов, чтобы не пробивать чеки вручную. Например, такое решение есть у «АТОЛ Онлайн».
По закону сумма в электронном кошельке не должна быть более 600 тысяч рублей или эквивалентной суммы в валюте, поэтому, когда денег станет больше, платёжная система сама переведёт их на расчётный счёт.
Если хотите предоставить клиентам возможность платить электронными деньгами разных систем, придётся или заключать договор с каждой, или обратиться к агрегатору.
Агрегаторы — это платёжные сервисы, которые выступают посредниками между интернет-продавцом и банками или платёжными системами, которые проводят платежи. К таким относятся, к примеру, Яндекс.Касса, Robokassa, процессинговый центр Uniteller, платёжная платформа Paykeeper.
С технической точки зрения между такими сервисами есть различия, но на практике суть одна — они позволяют подключить много разных способов оплаты одновременно.
Минусы: высокая комиссия, точный размер которой зависит от способа оплаты.
Плюсы: принимают к оплате и карты, и электронные кошельки разных платёжных систем; некоторые выступают агентами — вам не придётся применять ККТ; некоторые позволяют выводить средства до двух раз в день.
По договору с агрегатором деньги обычно поступают сначала на его специальный счёт, а потом переводятся на ваш расчётный. Комиссию кто-то берёт сразу при перечислении суммы, а кто-то — по итогам платёжного периода.
Оплата со счёта мобильного телефона
Некоторые агрегаторы и платёжные системы (например, QIWI) поддерживают мобильную коммерцию — оплату со счёта мобильного телефона. Клиент вводит свой номер на сайте, ему приходит СМС с суммой к оплате, он отвечает на СМС, и деньги списываются.
Если вы продаёте товары в Инстаграме или других соцсетях и мессенджерах, можно выбрать любой из перечисленных выше вариантов. Эквайринг и агрегаторы позволяют направлять клиентам ссылки на страничку оплаты — платёжный шлюз. А при оплате на электронный кошелёк можно просто делиться реквизитами.
В отличие от ИП и ООО, онлайн-касса вам не нужна. Как самозанятый вы можете принимать платежи на карту, которую указали при регистрации в ФНС, или наличными, а потом формировать чеки и отправлять клиентам. Если зарегистрируетесь в сервисе «Своё дело» в мобильном приложении СберБанк Онлайн и привяжете карту (можно выпустить цифровую), при оплате от физлиц чеки будут формироваться автоматически.
Клиенты могут переводить вам оплату по номеру карты или на электронный кошелёк. А с недавних пор самозанятым доступны услуги одного из агрегаторов — Яндекс.Кассы.
Гайд от СберБизнеса по видам эквайринга, онлайн-кассам и другим способам приёма платежей находится
здесь.
Источник
Расплатиться онлайн кредитной картой легко, не правда ли? И да, и нет. С одной стороны, мы начали это делать ещё на заре интернета (например, для покупок на Amazon). С другой — не бывает двух одинаковых форм оплаты.
За последние 20 лет мы выстроили модель онлайн-оплаты: я достаю из кошелька кредитную карту, ввожу данные карты в форму на сайте и нажимаю кнопку «Отправить». Но пройти этот путь от начала до конца может быть сложно, пользователю приходится отвечать на множество вопросов. А читать инструкции, конечно, никто не хочет.
Формы оплаты кредитной картой популярных сайтов и приложений
Рассчитаться лично всё ещё гораздо проще, чем провести оплату онлайн. Ничто не заменит простую возможность провести карту в терминале. Не требуется ничего набирать. Вам даже не нужно думать о том, что написано на карте. В параллельной вселенной вы могли бы просто дотронуться картой до монитора, чтобы приобрести крутую футболку любимого бренда. Ещё лучше было бы вообще избавиться от карты, чтобы не было необходимости доставать её из кошелька. Благодаря системе Apple Pay, мы достигли значительного прогресса.Мы берём курс на упрощение и ускорение процесса оплаты онлайн. Последние спецификации HTML включают в себя внедрение форм оплаты кредитной картой, и браузеры не отстают. Chrome 42+ поддерживает автозаполнение. Safari также разработал свой инструмент. Но вам всё ещё нужна кредитная карточка в руках, чтобы при каждой транзакции вручную вводить код безопасности.
И всё же, пока формы оплаты кредитными картами не канули в прошлое, нам стоит разработать для них принципы ясности, простоты и безопасности.
Наш продукт Invoice в Wave позволяет предпринимателям выписывать и отсылать клиентам счета, которые можно оплатить с помощью кредитной карты. В мои обязанности входила разработка интерфейса формы с учётом условий работы предпринимателей. Эта статья посвящена приёмам, которые мы разработали при создании продукта.
Форма оплаты кредитной картой от Wave
Нашей целью было разобраться со всеми данными, которые пользователю необходимо ввести, и с вопросами, которые у него при этом возникают.
- Какие карты принимают для оплаты?
- Как определить сумму оплаты?
- Имя и фамилия на карте.
- Номер карты.
- Тип карты.
- Дата окончания срока действия карты.
- Код безопасности.
- Почему необходимо указывать ZIP-код?
- Надёжно ли защищены мои данные в этой форме?
- Что происходит при нажатии на «Оплатить»?
- Как быть с ошибками при вводе информации?
- Дизайн для разных размеров экрана.
1. Какие карты принимают для оплаты
Когда пользователь сталкивается с формой оплаты, у него сразу возникает вопрос: «Примет ли система мою карту?» Это аналог сценария из реальной жизни: когда вы у кассы и собираетесь оплатить покупку, то ищете взглядом стикеры, указывающие на возможность безналичного расчёта. Для ответа на этот вопрос принято использовать логотипы кредитных карт.
Где в форме разместить эти логотипы? Вначале мы пытались разместить их над полем для ввода номера карты. Таким образом высота формы казалась меньше и логотипы были маленькими и сплюснутыми. Затем мы решили поместить их в само поле для ввода. Это почти сработало, но из-за того, что у нас оно узкое, а логотипы занимают слишком много места, его не оставалось для ввода номера.
Мы пришли к решению разместить их вверху формы. Таким образом, их сразу видно, с ними пользователь сталкивается в первую очередь, когда видит форму, ему не приходится их искать. Логотипы сразу привлекают внимание, как бы говоря: «вот тут следует платить». Мы решили, что самих логотипов будет достаточно, поэтому не стали добавлять приписки «Для оплаты принимаются кредитные карты» или «Оплатить с помощью».
2. Как определить сумму оплаты
Одно из требований, которое нам следовало удовлетворить, — дать пользователю возможность решить, сколько заплатить. В случае с большими суммами пользователю может понадобиться провести частичную оплату (например, задаток), или же гасить счёт поэтапно по мере выполнения работы. Сумма оплаты по умолчанию равна неоплаченной части инвойса. Другими словами, если проведена частичная оплата, сумма к погашению равна задолженности.
Известно, что чем больше полей для ввода в форме на сайте, тем меньше процент пользователей, завершивших её заполнение, и тем выше показатель отказов. Чтобы уменьшить число полей, мы отображаем сумму к оплате в формате «только для чтения», с кнопкой для правки, вместо того чтобы по умолчанию отображать поле для ввода.
В режиме редактирования мы думали над кнопкой «Сохранить» или «Готово», это бы возвращало поле в режим «только для чтения». Но мы посчитали это лишним, ведь сумму и так видно на экране. Если бы пользователю понадобилось снова её изменить, он мог бы просто изменить её значение в поле для ввода, без всяких нажатий на «Сохранить» или «Готово».
Кроме того мы хотели, чтобы пользователь подтверждал сумму к оплате, перед тем как отправить форму. Это обеспечивает его осведомлённость о средствах, которые будут сняты с кредитной карты. Мы отображаем эту сумму внутри кнопки «Оплатить», внизу формы. Это число меняется синхронно с тем, как пользователь заполняет поле «Сумма».
3. Имя и фамилия на карте
Следующий пункт, который мы просим указать , — имя и фамилия владельца кредитной карты. Мы рассматривали несколько вариантов надписи в поле для ввода:
- Имя и фамилия владельца карты;
- Владелец карты;
- Имя и фамилия на карте;
- Имя и фамилия (как указано на вашей карте);
- Полное имя на карте.
Мы пришли к выводу, что слова «Имя и фамилия на карте» яснее и короче всего описывают необходимую для ввода информацию. Пользователя просят просто перепечатать то, что написано на карте, вместо того чтобы гадать, как указать полное или сокращенное имя владельца карты.
4. Номер карты
Когда дело доходит до ввода номера карты, у многих пользователей возникает вопрос: «В номере моей карты есть пробелы, следует мне их учитывать при вводе или нет? » Чтобы справиться с этим, мы ограничили вводимые знаки только цифрами, то есть 0–9. Поэтому, если пользователь нажимает на пробел, это не отображается на экране и не влияет на числовой формат
Вначале мы хотели, чтобы номер карты скрывался, как только происходит переход на другое поле. Это была попытка предоставить пользователю чувство защищённости, примерно как когда скрывают пароли. Но мы поняли, что номер кредитной карты — это не секрет. Зная только его, мало что можно сделать. Кроме того, перед отправкой формы пользователь может захотеть перепроверить введённые данные, и скрытый номер карты будет этому мешать, ведь пользователю придётся снова нажать на поле, чтобы появились цифры.
5. Тип карты
Хороший приём, который мы почерпнули из других форм оплаты, — графическое отображение типа карты. Пользователь сможет убедиться, что система правильно идентифицировала тип карты по номеру. Мы можем определить его по первой цифре, это могут быть:
- 3 — Карты для развлечений и туризма (например, American Express и Diners Club);
- 4 — Visa;
- 5 — MasterCard;
- 6 — Discover Card.
Как только пользователь вводит первые две цифры, мы отображаем логотип карты в правой части поля для ввода.
Конечно, мы могли это сделать по-другому, основываясь на выводах из пункта 1.
- Отобразить затемнённый логотип кредитной карты вверху формы. Но они расположены далеко от поля ввода номера карты, так что связь не будет чётко прослеживаться.
- Поместить все логотипы кредитных карт внутрь поля для ввода номера. Как только пользователь вводит первые две цифры, исчезают все логотипы, кроме того, что соответствует карте пользователя.
6. Дата окончания срока действия карты
У большинства кредитных карт дата окончания срока действия отображается в формате ММ/ГГ (месяц и год). У некоторых встречается формат ГГГГ (полное отображение цифр года).
Чтобы заполнять форму было быстрее, мы хотели добавить поле ввода даты, которое пользователь заполнял бы с клавиатуры. Ему не пришлось бы тянуться за мышкой или с помощью стрелок вверх/вниз выбирать дату из выпадающего списка. Пользователю нужно просто набрать цифры, которые он видит на кредитной карте. Это также лишает необходимости сопоставлять номер месяца и его название (например, 08 — это август), тем самым минимизируя когнитивную нагрузку.
Так как для этого поля требуется определённый формат даты, мы поместили туда замещающий текст. Обратите внимание, в этом тексте есть слэш, но пользователю вводить его не обязательно. Мы ограничили значение вводимых данных только цифрами, поэтому, если пользователь всё-таки поставит слэш, он не отобразится. После того, как введён номер месяца, этот символ добавляется автоматически.
7. Код безопасности
Код безопасности кредитной карты был введён для предотвращения мошенничества. Другими словами, он нужен, чтобы сделать карты безопаснее. Проблема в том, что для этого кода нет общепринятого обозначения. Как назвать его в интерфейсе? У каждого типа кредитных карт он называется по-своему:
- MasterCard — код проверки карты (card validation code — CVC2);
- Visa — проверка подлинности карты (card verification value CVV2);
- Discover — номер идентификации карты (card identification number CID);
- American Express — CID, или уникальный номер карты (unique card code);
- Debit Card — CSC, или код безопасности карты (card security code).
Есть и такие вариации:
- Данные для проверки карты (card verification data);
- Номер проверки карты (card verification number);
- Код проверки карты (card verification code);
- Проверка кода карты (card code verification).
Бред, не правда ли? Сокращения создают путаницу. Мы хотели уйти от них, но всё равно сообщить пользователю, что этот код связан с безопасностью. Поэтому мы решили назвать это поле «Код безопасности».
Кроме того, код безопасности может состоять из 4 цифр (American Express, на лицевой стороне карты) или 3 цифр (все остальные карты, на тыльной стороне). Чтобы помочь пользователю понять, какой код ему следует вводить и где его искать, мы создали визуальную подсказку. У неё 3 состояния:
- Дуальный код: когда пользователь ещё не ввёл номер карты, подсказка демонстрирует оба варианта размещения кода безопасности.
- 4-значный код: когда пользователь ввёл номер карты American Express, подсказка выделяет код из 4 цифр на лицевой стороне.
- 3-значный код: когда пользователь ввёл номер любой другой карты, подсказка отображает код из 3 цифр на тыльной стороне.
8. ZIP-код
В качестве дополнительной меры безопасности мы просим пользователей ввести ZIP-код, связанный с картой. Внедрение в форму дополнительных полей ведёт к увеличению показателей отказов, но в то же время это обеспечивает бОльшую безопасность бизнеса и делает его менее уязвимым для мошенничества.
Мы понимали, что пользователи могут вместо кода карты ввести ZIP-код, который ассоциируется у них со своим адресом. Чтобы внести ясность, мы добавили в подсказку уведомление, которое предлагает ввести код биллингового адреса кредитной карты.
ZIP-коды США состоят только из цифр, их максимум десять. В Канаде это не только цифры, но и буквы и пробелы. Мы ограничили поле для ввода десятью знаками.
Нам необходимо было учитывать названия этого кода в обоих странах, поэтому мы поместили в поле для ввода текст «ZIP/Почтовый код».
9. Надёжно ли защищены мои данные в этой форме
Когда пользователь видит форму оплаты кредитной картой, он думает: «Она точно безопасна? Стоит доверять этому сайту или у меня хотят выведать данные карты?» С помощью интерфейса можно по-разному подкрепить чувство безопасности. Мы рассматривали такие варианты:
- Поместить в шапку формы, рядом с «Оплатить счёт», пиктограмму замка. Это выглядело как-то слабо и было оторвано от полей для ввода.
- Поместить пиктограмму замка в поле для ввода номера карты. Это привело бы к вопросу «Безопасна вся форма или только это поле?»
- Сделать на кнопке оплаты надпись «Безопасно заплатить $1.00». С большими суммами текст мог не поместиться.
- Добавить знак безопасности внизу формы. Нам показалось, что он бы отвлекал и не вписывался бы в стиль формы. Кроме того, пользователи могут не отличить различные знаки друг от друга, поэтому мы откинули эту идею. Предшествующие A/B-тестирования также подтвердили отсутствие разницы в конверсии.
Основываясь на существующем представлении пользователей об оплате картой онлайн, мы решили, что достаточно будет одной пиктограммы замка. Разместили мы её внутри кнопки «Оплатить». Это ключевая позиция, ведь она укрепляет чувство безопасности в критический момент: когда пользователь совершает оплату.
10. Что происходит при нажатии на «Оплатить»
Как только пользователь готов отправить средства, он нажимает на кнопку «Оплатить». Она меняет состояние на ожидание/загрузку, появляется текст «Отправка…» Мы отправляем запрос на сервер и при отсутствии сбоев выдаём сообщение об успешном проведении платежа.
11. Как быть с ошибками при вводе информации
Разработка состояния ошибок — один из важнейших этапов создания интерфейсов форм оплаты, хоть и наиболее нелюбимый дизайнерами. Да, это может быть неприятно. Да, для этого есть огромное количество способов. Но, если всё сделать правильно, можно превратить запутанное взаимодействие в понятное и доступное пользователю.
Есть две основные категории проверки ошибок в интернет-приложениях: со стороны клиента и со стороны сервера.
Проверка со стороны клиента
Ошибки со стороны клиента замечают до того, как запрос отправлен на сервер. Это зачастую неправильный формат или нехватка данных.
Чтобы разнообразить взаимодействие, проверку со стороны клиента можно осуществлять различными способами. К счастью, Люк Вроблевски написал отличную статью, в которой перечислил их в зависимости от момента осуществления.
Основываясь на исследовании Люка и на своей интуиции, мы выбрали метод «После проверки». Согласно ему, сообщение об ошибке появляется после того, как пользователь закончил отвечать на поставленный вопрос и переходит к следующему. Другими словами, проверка осуществляется в фоновом режиме. Следует учесть, что пользователь не зацикливается на поле с ошибкой. Он может набирать символы и переходить к другим полям для ввода, а затем возвращаться и исправлять возникшие ошибки.
Наши критерии проверки данных для ошибок со стороны клиента:
- Все вводимые данные, кроме полей «Имя и фамилия на карте» и «ZIP-код», должны содержать только цифры (никаких букв и символов);
- Сумма платежа: минимум $1;
- Номер карты: длина 16 цифр (15 для American Express), первые цифры — один из четырёх существующих кодов карт;
- Дата окончания срока действия: по две цифры для отображения месяца и года (например, ММГГ). Месяц необходимо вводить в диапазоне от 01 до 12, год — минимум 15;
- Код безопасности: длина 4 цифры для American Express или 3 цифры для других типов карт;
- ZIP-код: длина минимум 5 цифр, максимум 10.
Чтобы отобразить ошибку визуально, мы выделяем содержащее её поле красным фоном с красными границами. Введённый текст мы не отображаем красным. Сообщение об ошибке показано внизу поля и также выделено красным.
Проверка со стороны сервера
Ошибки со стороны сервера выявляются после того, как на него был отправлен запрос. Они могут отличаться для различных систем и объектов проверки. В нашей форме нам необходимо было учесть три типа ошибок со стороны сервера:
- Некорректно введённая информация, такая как номер карты, дата окончания срока действия, код безопасности или ZIP-код (например, истёкший срок действия карты, недействительный почтовый индекс);
- Системные ошибки, когда наблюдаются проблемы с сервером (например, превышение времени ожидания, потерянное соединение);
- Ошибки с картами, когда система отклоняет проведение платежа с помощью карты по каким-либо причинам (их около сотни).
В случае системной ошибки мы оставляем поля заполненными, чтобы пользователь мог попытаться провести оплату ещё раз. Когда система отклоняет проведение платежа по карте (ошибка с картой), это чаще всего говорит о мошенничестве, поэтому мы очищаем данные, введённые пользователем.
12. Дизайн для разных размеров экрана
С самого начала мы знали, что хотим создать форму для устройств с различными размерами экранов (то есть отзывчивую) и для разных типов экранов (например, для приложения Wave iPhone). Использование единственного числа для именования классов объектов позволило нам вносить изменения в форму лишь в одном месте. Нам не пришлось работать с базами кода со сложной структурой.
При оплате счёта в приложении Wave для iPhone мы изначально внедрили свойственную ему форму оплаты кредитной картой, на основе шаблона интерфейса с вводом информации в одно поле. Это работало, но слегка глючило. Однако мы осознавали, что не получится отобразить хорошие для восприятия надписи в поле, а также не представляли, каким образом пользователю придётся в случае ошибок переходить между введёнными данными.
Сейчас с HTML iFrame, у нас появилась возможность внедрить новую форму оплаты кредитной картой. Пользователи имеют дело с практически идентичными интерфейсами, когда проводят платёж в настольном браузере или в самом приложении. В нашем будущем приложении для iPhone мы настроим элементы формы с помощью CSS так, чтобы их дизайн совпадал с другими формами приложения.
Источник
