Рекомендации по работе с формами входа

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

Sam Dutton

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

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

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

• Используйте информативные элементы HTML: <form>, <input>, <label> и <button>.
• Добавьте к каждому полю ввода элемент <label>.
• Используйте атрибуты элементов, чтобы получить доступ к встроенным функциям браузера: type, name, autocomplete, required.
• Задайте для атрибутов name и id стабильные значения, которые не будут меняться при загрузке страниц или развертывании сайта.
• Поместите форму входа в отдельный элемент <form>.
• Убедитесь, что форма отправлена успешно.
• Используйте autocomplete="new-password" и id="new-password" для ввода пароля в форме регистрации и для нового пароля в форме сброса пароля.
• Используйте autocomplete="current-password" и id="current-password" для ввода пароля.
• Добавьте функцию Показать пароль.
• Используйте aria-label и aria-describedby для ввода паролей.
• Не дублируйте входные данные.
• Разрабатывайте формы так, чтобы мобильная клавиатура не закрывала поля ввода или кнопки.
• Убедитесь, что формы удобны для заполнения на мобильных устройствах: используйте разборчивый текст и убедитесь, что поля ввода и кнопки достаточно велики, чтобы служить областями прикосновения.
• Сохраняйте фирменный стиль на страницах регистрации и входа.
• Проводите тестирование в полевых и лабораторных условиях. Добавьте в процесс регистрации и входа аналитику страниц, аналитику взаимодействий и ориентированные на пользователя показатели производительности.
• Протестируйте форму в разных браузерах и на разных устройствах. Поведение формы может значительно различаться в зависимости от платформы.

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

Используйте элементы, предназначенные для этой цели: <form>, <label> и <button>. Они активируют встроенные функции браузера, улучшают доступность и добавляют смысл в разметку.

Использовать помощника (<form>)

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

Использовать помощника (<label>)

Чтобы добавить ярлык к полю ввода, используйте <label>.

<label for="email">Email</label>
<input id="email" …>

На это есть две причины:

• При нажатии на ярлык фокус перемещается на поле ввода. Свяжите ярлык с полем ввода, используя атрибут for ярлыка с атрибутом name или id поля ввода.
• Программы чтения с экрана озвучивают текст ярлыка, когда ярлык или его поле ввода получают фокус.

Не используйте плейсхолдеры в качестве ярлыков полей ввода. Пользователи могут забыть, для чего предназначено поле, когда начнут вводить текст, особенно если они отвлекутся ("Что я ввожу: адрес электронной почты, номер телефона или идентификатор аккаунта?"). С плейсхолдерами связано множество других потенциальных проблем. Если вы не уверены, что их стоит избегать, прочитайте статьи Don't Use The Placeholder Attribute (Не используйте атрибут placeholder) и Placeholders in Form Fields Are Harmful (Плейсхолдеры в полях форм вредны).

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

Чтобы убедиться в этом, откройте демоверсию label-position на мобильном устройстве.

Использовать помощника (<button>)

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

Убедитесь, что кнопка отправки говорит о том, что она делает. Например, Создать аккаунт или Войти, а не Отправить или Начать.

Как обеспечить успешную отправку формы

Помогите менеджерам паролей понять, что форма отправлена. Это можно сделать двумя способами:

• Откройте другую страницу.
• Имитируйте навигацию с помощью History.pushState() или History.replaceState() и удалите форму ввода пароля.

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

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

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

Не дублируйте входные данные

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

Как использовать атрибуты элементов

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

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

Поля для ввода паролей должны иметь атрибут type="password", чтобы скрывать текст пароля и помогать браузеру понять, что поле предназначено для паролей. (Обратите внимание, что браузеры используют различные методы, чтобы определить роли полей ввода и решить, предлагать ли сохранение паролей.)

Добавьте переключатель Показать пароль, чтобы пользователи могли проверить введенный текст, и не забудьте о ссылке Забыли пароль?. Подробнее о том, как включить отображение пароля…

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

Используйте <input type="email">, чтобы у пользователей мобильных устройств открывалась подходящая клавиатура и чтобы браузер мог выполнять базовую проверку адреса электронной почты. JavaScript не требуется.

Если вместо адреса электронной почты нужно использовать номер телефона, <input type="tel"> включает телефонную клавиатуру на мобильном устройстве. При необходимости можно также использовать атрибут inputmode. Например, значение inputmode="numeric" идеально подходит для PIN-кодов. Подробнее об этом читайте в статье Everything You Ever Wanted to Know About inputmode (Все, что вы хотели знать об атрибуте inputmode).

Следите за тем, чтобы мобильная клавиатура не закрывала кнопку Войти.

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

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

Тестирование на разных устройствах

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

Используйте две страницы

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

В идеале это должно быть реализовано с помощью одного элемента <form>. Используйте JavaScript, чтобы сначала отображать только поле ввода адреса электронной почты, а затем скрывать его и показывать поле ввода пароля. Если пользователю необходимо перейти на новую страницу между вводом адреса электронной почты и пароля, форма на второй странице должна иметь скрытый элемент ввода со значением адреса электронной почты, чтобы менеджеры паролей могли сохранить правильное значение. Пример кода приведен в статье Password Form Styles that Chromium Understands.

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

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

Для этого нужно выполнить два действия:

1. Атрибуты autocomplete, name, id и type помогают браузерам понять роль полей ввода, чтобы сохранить данные, которые позже можно будет использовать для автозаполнения. Чтобы данные можно было сохранять для автозаполнения, современные браузеры также требуют, чтобы входные данные имели стабильное значение name или id (не генерируемое случайным образом при каждой загрузке страницы или развертывании сайта) и находились в <form> с кнопкой submit.

2. Атрибут autocomplete помогает браузерам правильно заполнять поля ввода, используя сохраненные данные.

Для полей ввода адреса электронной почты используйте autocomplete="username", так как username распознается менеджерами паролей в современных браузерах, хотя вы должны использовать type="email" и, возможно, захотите использовать id="email" и name="email".

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

Используйте autocomplete="new-password" и id="new-password" для нового пароля

• Используйте autocomplete="new-password" и id="new-password" для ввода пароля в форме регистрации или нового пароля в форме изменения пароля.

Используйте autocomplete="current-password" и id="current-password" для существующего пароля

• Используйте autocomplete="current-password" и id="current-password" для ввода пароля в форме входа или для ввода старого пароля пользователя в форме изменения пароля. Это сообщает браузеру, что вы хотите использовать текущий пароль, который он сохранил для сайта.

Для формы регистрации:

<input type="password" autocomplete="new-password" id="new-password" …>

Для входа:

<input type="password" autocomplete="current-password" id="current-password" …>

Поддержка менеджеров паролей

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

В Chrome на компьютере показываются подсказки адресов электронной почты, открывается Менеджер паролей и выполняется автозаполнение пароля.

Системы автозаполнения и хранения паролей в браузерах устроены сложно. Алгоритмы угадывания, хранения и отображения значений не стандартизированы и различаются от платформы к платформе. Например, как отмечает Хидде де Врис (Hidde de Vries), "менеджер паролей Firefox дополняет эвристику системой рецептов".

Дополнительную информацию об использовании атрибутов name и autocomplete можно найти в статье Автозаполнение: что нужно знать веб-разработчикам. Все 59 возможных значений перечислены в спецификации HTML.

Разрешить браузеру предлагать надежный пароль

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

Вот как это делает Safari на компьютере.

(Предложение надежного уникального пароля доступно в Safari начиная с версии 12.0.)

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

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

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

Удобство для пальцев

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

Убедитесь, что поля ввода и кнопки достаточно большие

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

Согласно рекомендациям по специальным возможностям Android, рекомендуемый размер объектов на сенсорном экране составляет 7–10 мм. В рекомендациях по интерфейсу Apple предлагается размер 48 x 48 пикселей, а в рекомендациях W3C – не менее 44 x 44 пикселей CSS. Исходя из этого, добавьте (по крайней мере) около 15 пикселей отступа к элементам ввода и кнопкам для мобильных устройств и около 10 пикселей для компьютеров. Попробуйте сделать это на реальном мобильном устройстве и реальным пальцем. Пользователь должен без труда нажимать на все кнопки и поля ввода.

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

Удобство для нажатия большим пальцем

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

Сделайте текст достаточно крупным

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

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

Это означает, что на мобильных устройствах нужно использовать больший размер пикселей: 16px в Chrome для компьютеров вполне читабелен, но даже при хорошем зрении трудно читать текст 16px в Chrome для Android. Вы можете задать разные размеры шрифта в пикселях для разных размеров области просмотра, используя запросы медиа. 20px – это подходящий размер для мобильных устройств, но лучше протестировать его с друзьями или коллегами, у которых слабое зрение.

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

Оставляйте достаточно места между элементами ввода

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

Убедитесь, что ваши входные данные хорошо видны.

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

Помимо полей, добавьте рамку. Если фон белый, то лучше использовать цвет #ccc или темнее.

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

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

Чтобы выделить недействительные данные, можно использовать селектор CSS :invalid. Используйте :not(:placeholder-shown), чтобы не выбирать пустые поля ввода.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

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

Используйте JavaScript только при необходимости

Показать или скрыть пароль

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

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

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

Вот код CSS, который позволяет сделать кнопку похожей на обычный текст:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

А вот код JavaScript для показа пароля:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

Вот что получилось:

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

Используйте aria-describedby, чтобы указать правила для паролей, передав идентификатор элемента, описывающего ограничения. Программы чтения с экрана озвучивают текст ярлыка, тип ввода (пароль), а затем описание.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

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

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

Вы можете увидеть обе функции ARIA в действии в следующей демонстрации:

Дополнительные советы по созданию доступных форм можно найти в статье Создание доступных форм.

Проверка в реальном времени и перед отправкой

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

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

Подробнее о том, как использовать JavaScript для более сложной проверки в реальном времени…

Аналитика и RUM

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

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

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

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

Общие рекомендации

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

• Не заставляйте пользователей искать кнопку входа. Разместите ссылку на форму входа в верхней части страницы и используйте понятные формулировки, например Войти, Создать аккаунт или Зарегистрироваться.
• Не отвлекайтесь! Форма регистрации – не место для рекламы и других отвлекающих элементов.
• Упростите процесс регистрации. Собирайте другие пользовательские данные (например, адреса или реквизиты кредитных карт), только если пользователи видят явную выгоду от предоставления этих данных.
• Прежде чем пользователи начнут заполнять форму регистрации, четко объясните им, в чем заключается ценностное предложение. Какую выгоду они получат от регистрации? Предложите пользователям конкретные стимулы для завершения регистрации.
• По возможности разрешите пользователям идентифицировать себя с помощью номера мобильного телефона вместо адреса электронной почты, поскольку некоторые пользователи могут не использовать электронную почту.
• Упростите сброс пароля и сделайте ссылку Забыли пароль? заметной.
• Добавьте ссылки на условия использования и политику конфиденциальности, чтобы пользователи сразу понимали, как вы защищаете их данные.
• Добавьте логотип и название компании или организации на страницы регистрации и входа. Убедитесь, что язык, шрифты и стили соответствуют остальным страницам сайта. Некоторые формы не выглядят как часть сайта, особенно если их URL сильно отличается от URL других страниц.

Ещё уроки

• Как создавать удобные формы
• Рекомендации по созданию форм для мобильных устройств
• Более функциональные элементы управления формами
• Создание доступных форм
• Упрощение входа с помощью Credential Management API
• Как подтверждать номера телефонов на сайтах с помощью WebOTP API