Человек, держащий телефон.

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

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

— Обновлено
Available in: English, Español, Português, 中文, and 日本語
Appears in: Identity
Sam Dutton
Sam Dutton
TwitterGitHub
Содержание

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

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

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

  • Используйте понятные элементы HTML: <form>, <input>, <label> и <button>.
  • Для каждого поля ввода данных создайте соответствующую подпись <label>.
  • Для доступа к встроенным функциям браузера используйте атрибуты элементов: type, name, autocomplete и required.
  • Присвойте атрибутам name и id стабильные значения, которые не будут изменяться между загрузками страницы или развертываниями веб-сайта.
  • Поместите форму входа в систему в отдельный элемент
    .
  • Примите все меры для успешной отправки формы.
  • Для ввода пароля в форме регистрации и для ввода нового пароля в форме сброса пароля используйте параметры 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.