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

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

Dec 9, 2020 — Обновлено Nov 30, 2021

Available in: English, Español, Português, 中文, 日本語, and 한국어

Appears in: Веб-платежи

Sam Dutton

TwitterGitHub

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

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

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

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

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

Используйте содержательный HTML-код #

Используйте специализированные элементы и атрибуты:

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

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

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

Размещайте формы внутри элемента

#

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

Не следует так делать.

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

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

Используйте <label> для отображения подписей к элементам #

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

В атрибуте for элемента «label» следует указывать id соответствующего элемента ввода, чтобы связать их друг с другом.

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

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

Делайте кнопки удобными #

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

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

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

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

Используйте HTML-атрибуты по максимуму #

Упрощайте ввод данных для пользователей #

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

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

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

Используйте автозаполнение, чтобы повысить доступность и сократить необходимость в повторном вводе данных #

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

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

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

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

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

Помогайте пользователям указывать верные данные #

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

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

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

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

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

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

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

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

Дополнительные сведения см. в статье Использование JavaScript для более сложной проверки в реальном времени.

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

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

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

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

Упростите оформление заказа #

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

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

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

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

Используйте гостевое оформление заказа по умолчанию #

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

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

Отображайте ход оформления заказа #

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

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

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

Атрибут enterkeyhint поддерживается на Android и iOS. Подробности см. в описании enterkeyhint.

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

Избавьтесь от отвлекающих факторов #

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

Не давайте пользователю отклониться от курса. В момент оформления заказа не следует предлагать пользователю что-либо еще.

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

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

Запрашивайте только те данные, которые вам нужны #

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

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

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

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

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

Для автозаполнения полного имени используйте name:

<input autocomplete="name" ...>

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

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

Разрешите ввод имен на любых языках #

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

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

Неправильно

<!-- Имена с нелатинскими символами (например, «Françoise» или «Jörg») не пройдут валидацию. -->
<input pattern="[\w \-]+" ...>

Правильно

<!-- Поле принимает буквы Unicode. -->
<input pattern="[\p{L} \-]+" ...>

Предусмотрите поддержку различных форматов адресов #

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

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

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

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

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

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

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

Добавьте соответствующие ярлыки:

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

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

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

Рассмотрите возможность использования единого элемента textarea для ввода адреса #

Самый гибкий способ ввода адреса — это единое поле textarea.

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

В качестве значения autocomplete для поля textarea используйте street-address.

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

Проектируйте формы ввода адреса с учетом интернационализации и локализации #

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

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

    ZIP code: США
 Postal code: Канада
    Postcode: Великобритания
     Eircode: Ирландия
         PIN: Индия

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

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

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

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

Учитывайте недостатки поиска адреса по почтовому индексу #

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

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

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

Упрощайте формы оплаты #

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

Не заставляйте пользователей вводить платежную информацию вручную #

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

• cc-number
• cc-name
• cc-exp-month
• cc-exp-year

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

Избегайте использования нестандартных элементов для ввода срока действия карты #

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

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

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

Будьте аккуратны при валидации ввода #

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

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

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

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

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

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

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

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

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

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

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

Обучающие ресурсы #

• Рекомендации по формам входа в систему
• Рекомендации по формам регистрации
• Подтвердите номера телефонов в Интернете с помощью API WebOTP
• Как создавать потрясающие формы
• Рекомендации по разработке форм для мобильных устройств
• Функциональные элементы управления в формах
• Создание доступных форм
• Оптимизация процесса регистрации с помощью API управления учетными данными
• Руководство Фрэнка по почтовым адресам содержит полезные ссылки и подробные инструкции по форматам адресов в более чем 200 странах.
• На Countries Lists есть инструмент для скачивания кодов и названий стран на различных языках и в различных форматах.

Автор фото: @rupixen с Unsplash.

Последнее обновление

Nov 30, 2021 — Улучшить статью

Return to all articles

Поделиться

By Chrome DevRel