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

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

Сэм Даттон

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

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

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

Используйте осмысленный 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" , чтобы скрыть текст пароля и помочь браузеру понять, что ввод предназначен для паролей. (Обратите внимание, что браузеры используют различные методы , чтобы понять роли ввода и решить, предлагать ли сохранять пароли.)

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

Форма входа в Google со значком «Показать пароль».
Ввод пароля из формы входа в Google: со значком «Показать пароль» и ссылкой «Забыли пароль» .

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

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

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

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

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

Два снимка экрана формы входа на телефоне Android: на одном показано, как кнопка «Отправить» скрыта за клавиатурой телефона.
Кнопка «Войти» : сейчас вы ее видите, сейчас нет.

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

Снимок экрана: форма входа на телефоне Android: кнопка «Войти» не скрыта за клавиатурой телефона.
Клавиатура не загораживает кнопку «Войти» .

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

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

Снимки экрана формы входа на iPhone 7, 8 и 11. На iPhone 7 и 8 кнопка «Вход» скрыта за клавиатурой телефона, но не на iPhone 11.
Кнопка «Войти» : скрыта на iPhone 7 и 8, но не на iPhone 11.

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

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

Снимок экрана формы входа на веб-сайте Amazon: адрес электронной почты/телефон и пароль на двух отдельных «страницах».
Двухэтапный вход: адрес электронной почты или телефон, затем пароль.

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

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

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

Снимки экрана четырех этапов процесса входа в Chrome на компьютере: заполнение электронной почты, предложение электронной почты, менеджер паролей, автозаполнение при выборе.
Процесс автозаполнения входа в Chrome 84.

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

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

Включите браузер, чтобы он предлагал надежный пароль

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

Вот как Safari делает это на рабочем столе.

Скриншот менеджера паролей Firefox на рабочем столе.
Порядок предложения пароля в Safari.

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

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

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

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

Снимок экрана настольных компьютеров Firefox и Chrome для Android, показывающий запрос «Пожалуйста, заполните это поле» для недостающих данных.
Подскажите и обратите внимание на недостающие данные в Firefox для настольных компьютеров (версия 76) и Chrome для Android (версия 83).

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

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

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

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

Снимок экрана нестилизованной формы в Chrome для настольных компьютеров и Chrome для Android.

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

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

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

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

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

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

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

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

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

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

Обеспечьте достаточно места между входами

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

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

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

Помимо отступов добавьте рамку: на белом фоне хорошее общее правило — использовать #ccc или темнее.

Скриншот стилизованной формы в Chrome на Android.
Разборчивый текст, видимые границы ввода, достаточные отступы и поля.

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

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

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

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

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

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

Используйте JavaScript там, где это необходимо

Переключить отображение пароля

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

Форма входа в Google с переключателем «Показать пароль» и ссылкой «Забыли пароль».
Форма входа в Google: с переключателем «Показать пароль» и ссылкой «Забыли пароль» .

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

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.');
  }
}

Вот конечный результат:

Снимки экрана формы входа с кнопкой «Показать текст пароля» в Safari на Mac и iPhone 7.
Форма входа с кнопкой « Показать текст пароля » в Safari на Mac и iPhone 7.

Сделайте ввод пароля доступным

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

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

Аналитика и РУМ

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

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

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

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

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

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

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

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

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