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

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

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 входа.
• Программы чтения с экрана озвучивают текст метки, когда метка или ввод метки получают фокус.

Не используйте заполнители в качестве меток ввода. Люди склонны забывать, что именно вводилось, как только они начинают вводить текст, особенно если они отвлекаются («Я вводил адрес электронной почты, номер телефона или идентификатор учетной записи?»). Есть много других потенциальных проблем с заполнителями: см. Не используйте атрибут заполнителя и Заполнители в полях формы вредны, если вы не уверены.

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

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

Используйте <button>

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

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

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

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

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

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

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

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

Не удваивайте вводимые данные

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

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

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

Сохраняйте пароли в тайне, но дайте пользователям возможность видеть их, если они этого хотят.

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

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

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

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

Если вам нужно использовать номер телефона вместо адреса электронной почты, <input type="tel"> включает телефонную клавиатуру на мобильном телефоне. Вы также можете использовать атрибут inputmode , где это необходимо: inputmode="numeric" идеально подходит для PIN-номеров. Все, что вы когда-либо хотели знать о inputmode, содержит более подробную информацию.

Не допускайте, чтобы мобильная клавиатура заслоняла кнопку «Войти»

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

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

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

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

Рассмотрите возможность использования двух страниц.

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

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

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

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

Это состоит из двух частей:

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 на ПК отображает предложения электронной почты, показывает менеджер паролей и автоматически заполняет пароль.

Системы паролей и автозаполнения браузера не просты. Алгоритмы угадывания, хранения и отображения значений не стандартизированы и различаются от платформы к платформе. Например, как отметил Хидде де Врис : «Менеджер паролей Firefox дополняет свою эвристику системой рецептов ».

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

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

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

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

(В Safari с версии 12.0 доступна функция подбора надежного уникального пароля.)

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

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

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

Дизайн для пальцев и больших пальцев

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

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

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

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

Размеры целевых объектов не соответствуют требованиям. Аудит Lighthouse поможет вам автоматизировать процесс обнаружения слишком маленьких элементов ввода.

Дизайн для больших пальцев

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

Сделайте текст достаточно большим

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

Браузеры на разных платформах по-разному устанавливают размер шрифтов, поэтому сложно указать конкретный размер шрифта, который будет хорошо работать везде. Быстрый обзор популярных веб-сайтов показывает размеры 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 для описания правил паролей, указав ID элемента, описывающего ограничения. Программы чтения с экрана предоставляют текст метки, тип ввода (пароль), а затем описание.

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

При добавлении функции Show password обязательно включите 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 в действии в следующем Glitch:

В разделе «Создание доступных форм» вы найдете больше советов, которые помогут сделать формы доступными.

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

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

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

Узнайте больше: Используйте JavaScript для более сложной проверки в реальном времени .

Аналитика и RUM

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

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

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

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

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

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

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

Продолжайте учиться

• Создавайте удивительные формы
• Лучшие практики для дизайна мобильных форм
• Более эффективные элементы управления формами
• Создание доступных форм
• Оптимизация процесса входа с помощью API управления учетными данными
• Проверка телефонных номеров в Интернете с помощью API WebOTP

Фото Меган Ширек на Unsplash .