L'inserimento di illustrazioni ed elementi visivi avanzati durante l'introduzione delle passkey può contribuire ad alleggerire il carico cognitivo sugli utenti e a supportare i tuoi contenuti, rendendo al contempo l'esperienza più coinvolgente e comprensibile.
Componenti di progettazione
Le passkey hanno lo scopo di migliorare il tuo prodotto o servizio esistente e dovresti presentarle utilizzando un formato a cui gli utenti sono già abituati sulla tua piattaforma.
Ad esempio, se il tuo servizio utilizza gli interstitial per trasmettere aggiornamenti agli utenti, in modo simile al modo in cui gli Account Google introducono le passkey durante l'accesso, valuta la possibilità di usare un formato interstitial per introdurre le passkey.
![Pagina di destinazione di TrailBlazer con una scheda intitolata "Accedi più velocemente con le passkey"](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/trailblazer-landing-page.png?authuser=8&hl=it)
In alternativa, se in genere la tua piattaforma informa gli utenti delle modifiche all'account tramite finestre modali popup, barre di notifica o altri stili di avviso, utilizza i metodi di notifica familiari per introdurre il concetto di passkey. Questo approccio garantisce un'esperienza coerente e facile da usare durante l'implementazione della nuova funzionalità delle passkey.
![Popup che offre all'utente l'utilizzo di passkey per password più rapide e sicure.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/passkey-pop-up.png?authuser=8&hl=it)
Crea una richiesta di passkey descrittiva
Per le azioni correlate alle passkey, anziché solo pulsanti con un invito all'azione, crea prompt descrittivi avanzati che possano comunicare più informazioni agli utenti. tra cui illustrazioni, titolo, messaggi e invito all'azione.
Ad esempio, per creare una passkey per gli Account Google, è presente soltanto un pulsante "Crea passkey". È presente un interstitial con un invito all'azione "Semplifica l'accesso", una breve spiegazione delle passkey e un'illustrazione che include l'icona della passkey e vari metodi per sbloccare lo schermo di un dispositivo.
![Screenshot della pagina Account Google con messaggi di attivazione per le passkey.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/passkey-creation-page.png?authuser=8&hl=it)
Utilizzare l'icona della passkey canonica
FIDO alliance ha creato un'icona di passkey che devi usare per rappresentare le passkey. Se la utilizzi in modo coerente, aiuterai gli utenti a riconoscere le passkey e a semplificare le azioni correlate alle passkey.
![L'icona della passkey canonica.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/canonical-passkey-icon.png?authuser=8&hl=it)
Utilizza l'icona delle passkey nella tua UI:
- Rappresentare il concetto di passkey nell'onboarding o in altre richieste per incoraggiare gli utenti a creare passkey o eseguire l'upgrade a una passkey per un accesso più sicuro.
- Nei pulsanti o nei link che consentono agli utenti di accedere con una passkey.
- Nelle impostazioni, per identificare più facilmente le passkey che possono essere modificate o eliminate.
Il colore dell'icona può essere modificato in base alla combinazione di colori del prodotto, del brand o dell'interfaccia utente.
Visualizzare le "passkey" nelle impostazioni dell'account
A differenza delle password, che sono combinazioni tangibili di lettere, numeri e simboli, le passkey sono per lo più invisibili alle persone. Riserva lo spazio per una passkey nelle impostazioni dell'account. La scheda include l'icona della passkey, le informazioni sulla passkey come quando e su quale ecosistema è stata creata, quando è stata utilizzata l'ultima volta e le opzioni per la gestione della passkey. Se un utente ha due o più passkey, ogni passkey deve avere la propria.
![Screenshot delle impostazioni della passkey nella pagina delle impostazioni di sicurezza di Trailblazer.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/trailblazer-security-settings.png?authuser=8&hl=it)