Рекомендации по заполнению форм с платежными данными и адресами

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

Sam Dutton

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

Ниже приведен пример простой платежной формы, в которой соблюдены все рекомендации.

Вот пример простой формы адреса, в которой соблюдены все рекомендации:

Контрольный список

• Используйте информативные элементы HTML: <form>, <input>, <label> и <button>.
• Добавьте ярлык к каждому полю формы с помощью элемента <label>.
• Используйте атрибуты элементов HTML, чтобы получить доступ к встроенным функциям браузера, в частности type и autocomplete с подходящими значениями.
• Не используйте type="number" для чисел, которые не должны увеличиваться, например номеров платежных карт. Используйте вместо него type="text" и inputmode="numeric".
• Если для элемента input, select или textarea доступно подходящее значение автозаполнения, используйте его.
• Чтобы браузеры могли автоматически заполнять формы, задайте для атрибутов name и id стабильные значения, которые не меняются при загрузке страниц или развертывании сайта.
• Отключайте кнопки отправки после нажатия.
• Проверяйте данные во время ввода, а не только при отправке формы.
• Сделайте оплату как гость вариантом по умолчанию и упростите создание аккаунта после оплаты.
• Показывайте прогресс оформления заказа в виде понятных шагов с четкими призывами к действию.
• Уберите все, что может отвлечь пользователя от оформления покупки.
• Показывайте полную информацию о заказе при оформлении и упростите его корректировку.
• Не запрашивайте данные, которые вам не нужны.
• Запрашивайте имя и фамилию в одном поле, если у вас нет веских причин этого не делать.
• Не требуйте использовать только латиницу в именах и именах пользователей.
• Поддерживайте разные форматы адресов.
• Рекомендуем использовать один элемент textarea для адреса.
• Используйте автозаполнение платежного адреса.
• При необходимости интернационализируйте и локализуйте контент.
• Рекомендуем не использовать поиск адреса по почтовому индексу.
• Используйте подходящие значения атрибута autocomplete для платежных карт.
• Используйте одно поле для ввода номера платежной карты.
• Не используйте пользовательские элементы, если они мешают автозаполнению.
• Тестируйте страницы в реальных условиях, а не только в лаборатории. Анализируйте страницы, взаимодействия и производительность с точки зрения реальных пользователей.
• Протестируйте сайт в разных браузерах, на разных устройствах и платформах.

Используйте понятный HTML-код

Используйте элементы и атрибуты, созданные для этой задачи:

• <form>, <input>, <label> и <button>
• type, autocomplete и inputmode.

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

Используйте элементы HTML по назначению

Поместите форму в тег <form>

У вас может возникнуть соблазн не помещать элементы <input> в элемент <form> и обрабатывать отправку данных исключительно с помощью JavaScript.

Не делайте этого!

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

Если на странице несколько компонентов для ввода данных пользователем, поместите каждый из них в отдельный элемент <form>. Например, если на одной странице есть поиск и регистрация, поместите их в отдельные элементы <form>.

Используйте <label> для обозначения элементов

Чтобы добавить ярлык к элементу <input>, <select> или <textarea>, используйте <label>.

Свяжите ярлык с полем ввода, присвоив атрибуту for ярлыка то же значение, что и у атрибута id поля ввода.

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

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

Добавьте полезные кнопки

Используйте <button> для кнопок. Вы также можете использовать <input type="submit">, но не используйте div или какой-либо другой случайный элемент, действующий как кнопка. Элементы кнопок обеспечивают доступное поведение, встроенную функциональность отправки форм и могут быть легко стилизованы.

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

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

const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');

form.addEventListener('submit', () => {
  submitButton.disabled = true;
  submitButton.textContent = 'Placing order…';
});

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

Как использовать HTML-атрибуты

Упростите ввод данных

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

Например, используйте type="email" для адресов электронной почты и type="tel" для номеров телефонов.

По возможности не используйте для дат специальные элементы select. Если они реализованы неправильно, автозаполнение не будет работать. Кроме того, они не поддерживаются в старых браузерах. Для ввода чисел, например года рождения, лучше использовать элемент input, а не select, поскольку вводить цифры вручную проще и надежнее, чем выбирать их из длинного раскрывающегося списка, особенно на мобильных устройствах. Используйте inputmode="numeric", чтобы на мобильных устройствах открывалась нужная клавиатура, и добавьте подсказки по формату и проверке в виде текста или плейсхолдера, чтобы пользователь вводил данные в правильном формате.

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

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

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

Стабильные значения

Платежный адрес

По умолчанию платежный адрес совпадает с адресом доставки. Чтобы не загромождать экран, не показывайте платежный адрес в форме, а добавьте ссылку на его изменение или используйте элементы summary и details.

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

<input autocomplete="shipping address-line1" ...>
<!-- Other fields omitted. -->
<input autocomplete="billing address-line1" ...>

Помогите пользователям ввести правильные данные

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

Вы можете добавить атрибуты ограничений к элементам формы, чтобы указать допустимые значения, включая min, max и pattern. Состояние валидности элемента устанавливается автоматически в зависимости от того, является ли значение элемента допустимым, как и псевдоклассы CSS :valid и :invalid, которые можно использовать для стилизации элементов с допустимыми или недопустимыми значениями.

Например, в следующем коде HTML указано, что год рождения должен быть в диапазоне от 1900 до 2020. Использование type="number" ограничивает вводимые значения только числами в диапазоне, указанном в min и max. Если вы попытаетесь ввести число за пределами диапазона, оно будет помечено как недопустимое.

В следующем примере используется pattern="[\d ]{10,30}", чтобы обеспечить действительный номер платежной карты, допуская при этом пробелы:

Современные браузеры также выполняют базовую проверку входных данных с типом email или url.

При отправке формы браузеры автоматически фокусируются на полях с проблемными или отсутствующими обязательными значениями. Код JavaScript не требуется.

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

Вы также можете использовать JavaScript для более надежной проверки при вводе данных и отправке формы. Используйте Constraint Validation API (широко поддерживается), чтобы добавить собственную валидацию с помощью встроенного интерфейса браузера для установки фокуса и отображения подсказок.

Подробнее о клиентской проверке форм.

Помогите пользователям не пропустить обязательные данные

Используйте атрибут required для полей, которые обязательно нужно заполнить.

Когда пользователь отправляет форму, современные браузеры автоматически выделяют поля required, в которых отсутствуют данные. Вы можете использовать псевдокласс :required, чтобы выделить обязательные поля. JavaScript не требуется.

Добавьте звёздочку к ярлыку каждого обязательного поля и добавьте примечание в начале формы, чтобы объяснить, что означает звёздочка.

Упростите оформление покупки

Устраните разрыв в мобильной коммерции

Представьте, что у ваших пользователей есть бюджет усталости. Если вы исчерпаете его, пользователи уйдут.

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

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

Сделайте оплату как гость вариантом по умолчанию

Для интернет-магазина самый простой способ уменьшить трение формы – сделать оплату как гость по умолчанию. Не заставляйте пользователей создавать аккаунт перед покупкой. Отсутствие возможности оплаты в качестве гостя называется основной причиной отказа от корзины.

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

Показывать прогресс оформления заказа

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

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

Используйте атрибут enterkeyhint в полях ввода формы, чтобы задать метку для клавиши ввода на мобильной клавиатуре. Например, используйте enterkeyhint="previous" и enterkeyhint="next" в многостраничной форме, enterkeyhint="done" – для последнего поля в форме, а enterkeyhint="search" – для поля поиска.

Атрибут enterkeyhint поддерживается на устройствах Android и iOS. Подробнее о подсказке enterkeyhint…

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

Удалить нежелательные объекты

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

Не усложняйте путь пользователя. Это не время, чтобы соблазнять пользователей сделать что-то ещё!

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

Упростите ввод имени и адреса

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

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

Используйте одно поле для ввода имени

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

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

Включить автозаполнение имени

Используйте name для полного имени:

<input autocomplete="name" ...>

Если у вас есть веская причина для разделения имени на части, используйте соответствующие значения автозаполнения:

• honorific-prefix
• given-name
• nickname
• additional-name-initial
• additional-name
• family-name
• honorific-suffix

Разрешить международные имена

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

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

<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>

<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>

Поддержка разных форматов адресов

При разработке формы адреса помните о поразительном разнообразии форматов адресов даже в пределах одной страны. Не делайте предположений о том, как должен выглядеть "нормальный" адрес. (Если вы не уверены, посмотрите странности адресов в Великобритании).

Сделайте формы адреса гибкими

Не заставляйте пользователей пытаться втиснуть свой адрес в поля формы, которые не подходят.

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

Будьте особенно внимательны с полями адреса required. Например, в адресах крупных городов Великобритании не указывается округ, но многие сайты все равно требуют его ввести.

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

<input autocomplete="address-line1" id="address-line1" ...>
<input autocomplete="address-line2" id="address-line2" ...>

Добавьте ярлыки для сопоставления:

<label for="address-line1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line1" id="address-line1" ...>

<label for="address-line2">
Address line 2 (optional)
</label>
<input autocomplete="address-line2" id="address-line2" ...>

Используйте одно текстовое поле для адреса

Самый гибкий вариант – указать один адрес textarea.

Подход textarea подходит для любого формата адреса и отлично подходит для вырезания и вставки, но имейте в виду, что он может не соответствовать вашим требованиям к данным, и пользователи могут упустить автозаполнение, если ранее они использовали только формы с address-line1 и address-line2.

Для текстовой области используйте значение автозаполнения street-address.

Вот пример формы, в которой используется одно поле textarea для адреса:

Как интернационализировать и локализовать формы адресов

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

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

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

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

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

• Не требуйте от пользователя слишком подробных данных, например названия улицы или номера дома.
• По возможности избегайте использования полей required. Например, в некоторых странах в адресах не указывается почтовый индекс, а в сельской местности может не быть названия улицы или дороги.
• Используйте инклюзивные названия: "Страна/регион" вместо "Страна", "Почтовый индекс" вместо "Индекс".

Будьте гибкими! Простую форму адреса, приведенную выше, можно адаптировать для работы в разных регионах.

Не используйте поиск адреса по почтовому индексу

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

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

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

Упростите платежные формы

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

Помогите пользователям избежать повторного ввода платежных данных

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

• cc-number
• cc-name
• cc-exp или cc-exp-month и cc-exp-year для отдельных полей
• cc-csc

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

Не используйте пользовательские элементы для дат платежных карт

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

Используйте одно поле для ввода номера платежной карты и телефона

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

Тщательно проверяйте данные

Проверяйте данные как в реальном времени, так и перед отправкой формы. Один из способов сделать это – добавить атрибут pattern в поле ввода платежной карты. Если пользователь попытается отправить платежную форму с недопустимым значением, браузер покажет предупреждение и установит фокус на поле ввода. JavaScript не требуется.

Однако регулярное выражение pattern должно быть достаточно гибким, чтобы обрабатывать номера платежных карт разной длины – от 14 цифр (или меньше) до 20 (или больше). Подробнее о структуре номеров платежных карт можно узнать на сайте LDAPwiki.

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

Тестируйте на разных устройствах, платформах, браузерах и версиях

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

Внедрите аналитику и RUM

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

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

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

Аналитика страниц, взаимодействий и производительности для реальных пользователей становится особенно ценной в сочетании с журналами сервера, данными о конверсиях и A/B-тестированием. Это позволяет ответить на такие вопросы, как "Увеличивают ли коды скидок доход?" или "Улучшает ли изменение макета формы конверсии?".

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

Ещё уроки

• Рекомендации по созданию форм входа
• Рекомендации по созданию форм регистрации
• Как подтверждать номера телефонов на сайтах с помощью WebOTP API
• Как создавать удобные формы
• Рекомендации по созданию форм для мобильных устройств
• Более функциональные элементы управления формами
• Создание доступных форм
• Упрощение регистрации с помощью Credential Management API
• На сайте Frank's Compulsive Guide to Postal Addresses вы найдете полезные ссылки и подробные инструкции по форматам адресов более чем в 200 странах.
• На сайте Countries Lists есть инструмент для скачивания кодов и названий стран на разных языках и в разных форматах.

Фото: @rupixen, Unsplash.