Рекомендации по форме регистрации

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

Сэм Даттон

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

Вот пример очень простой формы регистрации, демонстрирующей все лучшие практики:

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

По возможности избегайте входа в систему

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

Лучшая форма регистрации — отсутствие формы регистрации!

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

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

Сделайте вход в систему очевидным

Сделайте очевидным, как создать учетную запись на вашем сайте, например, с помощью кнопки «Войти» или «Войти» в правом верхнем углу страницы. Избегайте использования двусмысленных значков или неопределенных формулировок («Входите на борт!», «Присоединяйтесь к нам») и не скрывайте вход в систему в навигационном меню. Эксперт по юзабилити Стив Круг резюмировал этот подход к юзабилити веб-сайта: «Не заставляйте меня думать!» Если вам нужно убедить других в вашей веб-команде, используйте аналитику , чтобы показать влияние различных вариантов.

Два снимка экрана макета сайта электронной коммерции, просматриваемого на телефоне Android. Слева используется значок для ссылки входа, который несколько двусмыслен; справа просто написано «Войти»
Сделайте вход очевидным. Значок может быть неоднозначным, но кнопка или ссылка «Войти » очевидны.
Скриншоты входа в Gmail: одна страница, на которой отображается кнопка «Войти», при нажатии на которую открывается форма, в которой также есть ссылка «Создать учетную запись».
На странице входа в Gmail есть ссылка для создания учетной записи.
При размерах окна больше показанных здесь Gmail отображает ссылку « Войти» и кнопку «Создать учетную запись» .

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

// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log(`Email: ${profile.getEmail()}`);
}

Сделайте очевидным, как получить доступ к данным учетной записи

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

Избавьтесь от беспорядка

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

Не отвлекайте пользователей от завершения регистрации.

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

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

Вы можете рассмотреть возможность входа без пароля, отправляя пользователям код каждый раз, когда они входят в систему на новом устройстве или в новом браузере. Такие сайты, как Slack и Medium, используют версию этого.

Вход без пароля на medium.com.

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

Учитывайте продолжительность сеанса

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

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

Помогите менеджерам паролей безопасно предлагать и хранить пароли

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

Это делает крайне важным правильное кодирование форм регистрации, в частности, использование правильных значений автозаполнения. Для форм регистрации используйте autocomplete="new-password" для новых паролей и добавляйте правильные значения автозаполнения в другие поля формы, где это возможно, например autocomplete="email" и autocomplete="tel" . Вы также можете помочь менеджерам паролей, используя разные значения name и id в формах регистрации и входа, для самого элемента form , а также для любых элементов input , select и textarea .

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

Убедитесь, что пользователи вводят безопасные пароли

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

Однако многие пользователи хотят вводить собственные пароли, поэтому необходимо внедрить правила для надежности пароля. Национальный институт стандартов и технологий США объясняет , как избежать небезопасных паролей .

Не допускайте компрометации паролей

Какие бы правила вы ни выбрали для паролей, никогда не следует допускать использования паролей, которые были раскрыты в результате нарушений безопасности .

После того, как пользователь ввел пароль, вам нужно проверить, что это не пароль, который уже был скомпрометирован. Сайт Have I Been Pwned предоставляет API для проверки пароля, или вы можете запустить его как службу самостоятельно.

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

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

Объясните, почему пароль отклонен.

Не запрещайте вставку пароля

Некоторые сайты не позволяют вставлять текст в поля ввода пароля.

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

Никогда не храните и не передавайте пароли в виде открытого текста.

Обязательно используйте соль и хэширование паролей — и не пытайтесь изобрести свой собственный алгоритм хэширования !

Не заставляйте обновлять пароль

Не заставляйте пользователей произвольно обновлять свои пароли.

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

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

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

Страница активности учетной записи Gmail
Страница активности аккаунта Gmail .

Сделайте так, чтобы изменение или сброс паролей были простыми

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

Конечно, вам следует также упростить для пользователей процедуру сброса пароля, если они его забыли. Open Web Application Security Project предоставляет подробные инструкции о том, как обращаться с утерянными паролями .

Чтобы обеспечить безопасность вашего бизнеса и пользователей, особенно важно помочь пользователям сменить пароль, если они обнаружат, что он был скомпрометирован. Чтобы упростить это, вам следует добавить URL-адрес /.well-known/change-password на свой сайт, который перенаправляет на страницу управления паролями. Это позволяет менеджерам паролей напрямую направлять ваших пользователей на страницу, где они могут изменить свой пароль для вашего сайта. Эта функция теперь реализована в Safari, Chrome и появится в других браузерах. Помогите пользователям легко менять пароли, добавив известный URL-адрес для смены паролей, объясняет, как это реализовать.

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

Предложите вход через сторонних поставщиков удостоверений

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

Страница входа в WordPress
Страница входа в WordPress с опциями входа через Google и Apple.

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

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

Интеграция Google Sign-In в ваше веб-приложение объясняет, как добавить федеративный вход в ваши параметры регистрации. Доступно множество других платформ идентификации.

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

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

Gmail, показывающий переключение аккаунтов
Переключение аккаунта в Gmail.

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

Многофакторная аутентификация означает, что пользователи должны пройти аутентификацию более чем одним способом. Например, помимо требования к пользователю установить пароль, вы также можете принудительно выполнить верификацию с помощью одноразового кода доступа, отправленного по электронной почте или в текстовом сообщении SMS, или с помощью одноразового кода на основе приложения, ключа безопасности или датчика отпечатков пальцев. Рекомендации по SMS OTP и Включение строгой аутентификации с помощью WebAuthn объясняют, как реализовать многофакторную аутентификацию.

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

Будьте осторожны с именами пользователей

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

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

Также обязательно используйте autocomplete="username" для имен пользователей.

Тестируйте на разных устройствах, платформах, браузерах и версиях

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

Внедрение аналитики и мониторинга реальных пользователей

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

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

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

Фото @ecowarriorprincess на Unsplash .