Intégrer des illustrations et des visuels attrayants lors de l'introduction de clés d'accès peut également alléger la charge cognitive des utilisateurs et soutenir votre contenu tout en rendant l'expérience plus engageante et compréhensible.
Composants de conception
Les clés d'accès visent à améliorer votre produit ou service existant. Vous devez les présenter dans un format auquel les utilisateurs sont déjà habitués sur votre plate-forme.
Par exemple, si votre service utilise des interstitiels pour informer les utilisateurs, de la même manière que les comptes Google invitent les utilisateurs à utiliser des clés d'accès lors de la connexion, envisagez d'utiliser un format interstitiel pour les introduire.
![Page de destination de TrailBlazer avec une fiche intitulée "Connectez-vous plus rapidement avec des clés d'accès"](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/trailblazer-landing-page.png?authuser=0000&hl=fr)
Si votre plate-forme informe généralement les utilisateurs des modifications apportées à leur compte via des fenêtres pop-up, des barres de notification ou d'autres styles d'alerte, utilisez ces méthodes de notification familières pour introduire le concept des clés d'accès. Cette approche garantit une expérience cohérente et conviviale lorsque vous déployez la nouvelle fonctionnalité de clé d'accès.
![Pop-up proposant à l'utilisateur d'utiliser des clés d'accès pour obtenir des mots de passe plus rapides et plus sûrs.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/passkey-pop-up.png?authuser=0000&hl=fr)
Créer une invite de clé d'accès descriptive
Pour les actions liées aux clés d'accès, créez des invites descriptives enrichies qui fournissent davantage d'informations aux utilisateurs au lieu de n'utiliser que des boutons contenant une incitation à l'action. Il peut s'agir d'illustrations, d'un titre, de messages et d'une incitation à l'action.
Par exemple, pour créer une clé d'accès pour des comptes Google, seul un bouton "Créer une clé d'accès" est disponible. Il comporte un interstitiel comportant une incitation à l'action "Simplifiez votre connexion", une brève description des clés d'accès et une illustration incluant l'icône de clé d'accès et différentes méthodes de déverrouillage de l'écran d'un appareil.
![Capture d'écran de la page des comptes Google avec un message d'activation pour les clés d'accès.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/passkey-creation-page.png?authuser=0000&hl=fr)
Utiliser l'icône de clé d'accès canonique
FIDO Alliance a créé une icône de clé d'accès que vous devez utiliser pour représenter les clés d'accès. Une utilisation cohérente permet aux utilisateurs de reconnaître les clés d'accès et de simplifier les actions qui leur sont associées.
![Icône de clé d'accès canonique.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/canonical-passkey-icon.png?authuser=0000&hl=fr)
Utilisez l'icône de clés d'accès dans votre interface utilisateur:
- Pour représenter le concept de clé d'accès lors de l'intégration ou d'autres invites afin d'encourager les utilisateurs à créer des clés d'accès ou à passer à une clé d'accès pour une connexion plus sécurisée.
- Dans les boutons ou les liens permettant aux utilisateurs de se connecter avec une clé d'accès
- Dans les paramètres, pour identifier les clés d'accès pouvant être modifiées ou supprimées
Vous pouvez modifier la couleur de l'icône pour qu'elle corresponde au jeu de couleurs de votre produit, de votre marque ou de votre interface utilisateur.
Afficher des "cartes de clé d'accès" dans les paramètres du compte
Contrairement aux mots de passe, qui sont des combinaisons tangibles de lettres, de chiffres et de symboles, les clés d'accès sont en grande partie invisibles. Accordez de l'espace à une fiche de clés d'accès dans les paramètres du compte. Elle contient l'icône de la clé d'accès, des informations la concernant, telles que la date et l'écosystème dans lesquels elle a été créée, la date de sa dernière utilisation et des options de gestion. Si une personne possède plusieurs clés d'accès, chacune d'elles doit avoir sa propre carte.
![Capture d'écran des paramètres de clé d'accès sur la page des paramètres de sécurité d'un Trailblazer.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/trailblazer-security-settings.png?authuser=0000&hl=fr)