Как оптимизировать формы, чтобы воспользоваться преимуществами автозаполнения

Сюрприз! Вы можете упростить пользователям покупку ваших продуктов в Интернете с помощью автозаполнения.

Должно быть, это твой счастливый день. Или, ну, годы?

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

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

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

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

В одном из исследований Google обнаружил, что пользователи заполняли формы на 30% быстрее, если активировано автоматическое заполнение форм. Эта скорость в сочетании с явным удобством автозаполнения повышает скорость отправки форм и конверсию, делая пользователей счастливыми. И счастливые пользователи возвращаются.

Вот почему автоматические возможности включены в наш список рекомендаций по дизайну форм.

Итак, как заставить автозаполнение работать в ваших веб-формах?

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

Как работает автозаполнение?

Как насчет того, чтобы начать здесь: что такое автозаполнение?

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

Разные браузеры сохраняют немного разные пользовательские данные, но в целом похожи:

Примечание. «Адреса» включают номера телефонов, адреса электронной почты и адреса доставки.

Теперь, как автозаполнение выполняет свое волшебство?

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

Пользователи контролируют настройки автозаполнения со своей стороны через свои настройки автозаполнения и могут включить или отключить его.

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

Как добавить автоматическое заполнение форм в ваши веб-формы

Вы готовы к хорошим новостям?

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

Если нет, Google приводит две причины, по которым автозаполнение может не работать для пользователей:

1. 1. Ваш веб-сайт может быть недостаточно безопасным, чтобы Chrome мог предоставлять пользовательские данные.
   2. Если ваш веб-сайт защищен, Chrome может не обнаружить поля формы.

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

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

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

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

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

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

Фото от разработчиков Google.

Чтобы соответствовать стандартным правилам HTML-форм, вы или разработчик вашего веб-сайта также должны убедиться, что элементы ввода заключены в тег <form>, чтобы включить автозаполнение. Веб-браузер Google Chrome требует, чтобы поля формы были в теге формы HTML, иначе он будет предлагать только предложения и не будет автоматически заполнять данные формы.

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

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

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

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

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

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

К счастью, менеджеры паролей сами подключаются к правильно построенным формам — так же, как и браузеры. Следуйте приведенным выше советам, и ваша форма должна без проблем работать с LastPass и 1Password.

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

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

Как автозаполнять: другие советы

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

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

Настройка форм автозаполнения для приложений

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

Требования автозаполнения iOS

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

Операция автозаполнения Android и инструкции

Получите благодарность в конверсиях

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

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

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

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