Дизайн пользовательского интерфейса ключей доступа

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

Компоненты дизайна

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

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

Целевая страница TrailBlazer с карточкой «Быстрее входите в систему с помощью ключей доступа».
Создайте межстраничное объявление с ключом доступа в приложении Trailblazer.

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

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

Создайте описательную подсказку ключа доступа

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

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

Скриншот страницы аккаунтов Google с сообщением о согласии на ввод ключей доступа.
Страница создания пароля в аккаунтах Google

Используйте канонический значок ключа доступа

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

Канонический значок ключа доступа.

Используйте значок ключей доступа в пользовательском интерфейсе:

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

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

Отображение «карточек доступа» в настройках учетной записи

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

Снимок экрана с настройками пароля на странице настроек безопасности Trailblazer.
Настройки ключа доступа на странице настроек безопасности Trailblazer отображают подробную информацию о каждом ключе доступа.

Следующий

Пути пользователя с ключами доступа