Включение иллюстраций и насыщенных визуальных эффектов при вводе ключей доступа также может помочь облегчить когнитивную нагрузку на пользователей и поддержать ваш контент, одновременно делая его более интересным и понятным.
Компоненты дизайна
Ключи доступа предназначены для улучшения вашего существующего продукта или услуги, и вам следует представить их в формате, к которому пользователи уже привыкли на вашей платформе.
Например, если ваша служба использует межстраничные объявления для передачи обновлений пользователям, подобно тому, как учетные записи Google знакомят пользователей с ключами доступа во время входа в систему, рассмотрите возможность использования формата межстраничных объявлений для представления ключей доступа.
![Целевая страница TrailBlazer с карточкой «Быстрее входите в систему с помощью ключей доступа».](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/trailblazer-landing-page.png?authuser=4&hl=ru)
В качестве альтернативы, если ваша платформа обычно информирует пользователей об изменениях в учетной записи через всплывающие окна, панели уведомлений или другие стили оповещений, используйте эти знакомые методы уведомления, чтобы представить концепцию ключей доступа. Такой подход обеспечивает единообразие и удобство использования при развертывании новой функции пароля.
![Всплывающее окно, предлагающее пользователю использовать ключи доступа для более быстрого и безопасного ввода паролей.](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/passkey-pop-up.png?authuser=4&hl=ru)
Создайте описательную подсказку ключа доступа
Для действий, связанных с ключами доступа, вместо кнопок с призывом к действию создавайте подробные описательные подсказки, которые могут донести до пользователей больше информации. Они могут включать иллюстрации, заголовок, сообщение и призыв к действию.
Например, при создании ключа доступа для учетных записей Google вместо кнопки «Создать ключ доступа» отображается межстраничное объявление с призывом к действию «Упростить вход в систему», кратким объяснением ключей доступа и иллюстрацией, включающей значок ключа доступа и различные способы разблокировки экрана устройства.
![Скриншот страницы аккаунтов Google с сообщением о согласии на ввод ключей доступа.](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/passkey-creation-page.png?authuser=4&hl=ru)
Используйте канонический значок ключа доступа
Альянс FIDO создал значок ключа доступа, который следует использовать при представлении ключей доступа. Его последовательное использование поможет пользователям распознавать ключи доступа и оптимизировать действия, связанные с ключами доступа.
![Канонический значок ключа доступа.](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/canonical-passkey-icon.png?authuser=4&hl=ru)
Используйте значок ключей доступа в пользовательском интерфейсе:
- Чтобы представить концепцию ключа доступа при регистрации или других подсказках, чтобы побудить пользователей создавать ключи доступа или перейти на ключ доступа для более безопасного входа.
- В кнопках или ссылках, позволяющих пользователям входить в систему с помощью ключа доступа.
- В настройках, помогающих определить ключи доступа, которые можно редактировать или удалять.
Цвет значка можно изменить, чтобы он соответствовал цветовой схеме вашего продукта, бренда или пользовательского интерфейса.
Отображение «карточек доступа» в настройках учетной записи
В отличие от паролей, которые представляют собой осязаемые комбинации букв, цифр и символов, ключи доступа практически невидимы для людей. Выделите место для карты доступа в настройках учетной записи. Внутри карты находится значок ключа доступа, информация о ключе доступа, например, когда и в какой экосистеме он был создан, когда он использовался в последний раз, а также варианты управления ключом доступа. Если у кого-то есть два или более ключа доступа, у каждого ключа должна быть своя карта.