Incorporar ilustraciones y recursos visuales llamativos cuando se introducen llaves de acceso también puede ayudar a aclarar la carga cognitiva para los usuarios y respaldar tu contenido mientras haces que la experiencia sea más atractiva y comprensible.
Componentes de diseño
El objetivo de las llaves de acceso es una mejora de tu producto o servicio existente, y debes presentarlas con un formato al que los usuarios ya están acostumbrados en tu plataforma.
Por ejemplo, si tu servicio usa anuncios intersticiales para transmitir actualizaciones a los usuarios, de manera similar a la manera en que las Cuentas de Google introducen las llaves de acceso a los usuarios cuando acceden, considera usar un formato intersticial para introducirlas.
![Página de destino de TrailBlazer con una tarjeta titulada "Accede más rápido con llaves de acceso"](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/trailblazer-landing-page.png?authuser=19&hl=es)
Como alternativa, si tu plataforma suele informar a los usuarios sobre los cambios de cuenta a través de modales emergentes, barras de notificaciones y otros estilos de alerta, emplea esos métodos de notificación conocidos para introducir el concepto de llaves de acceso. Este enfoque garantiza una experiencia coherente y fácil de usar a medida que lanzas la nueva función de llave de acceso.
![Ventana emergente que ofrece al usuario el uso de llaves de acceso para obtener contraseñas más rápidas y seguras.](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/passkey-pop-up.png?authuser=19&hl=es)
Crea un mensaje descriptivo para la llave de acceso
En el caso de las acciones relacionadas con las llaves de acceso, en lugar de solo botones con un llamado a la acción, crea mensajes descriptivos que puedan transmitir más información a los usuarios. Estas pueden incluir ilustraciones, un título, mensaje y un llamado a la acción.
Por ejemplo, para crear una llave de acceso para Cuentas de Google, en lugar de un botón "Crear llave de acceso", hay un intersticial con un llamado a la acción para "Simplifica el acceso", una breve explicación de las llaves de acceso y una ilustración que incluye el ícono de la llave de acceso y varios métodos para desbloquear la pantalla de un dispositivo.
![Captura de pantalla de la página Cuentas de Google con mensajes para habilitar las llaves de acceso.](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/passkey-creation-page.png?authuser=19&hl=es)
Usa el ícono de la llave de acceso canónica
La alianza FIDO creó un ícono de llave de acceso que debes usar cuando las representes. Si se usa de manera coherente, ayudará a los usuarios a reconocer las llaves de acceso y optimizar sus acciones relacionadas.
![El ícono de la llave de acceso canónica.](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/canonical-passkey-icon.png?authuser=19&hl=es)
Usa el ícono de llaves de acceso en tu IU:
- Representar el concepto de la llave de acceso en la integración o en otros mensajes para alentar a los usuarios a crear llaves de acceso o actualizar a una llave de acceso para acceder de forma más segura
- En botones o vínculos que permitan a los usuarios acceder con una llave de acceso
- Dentro de la configuración para ayudar a identificar las llaves de acceso que se pueden editar o borrar.
Puedes cambiar el color de los íconos para que coincida con el esquema de colores de tu producto, marca o interfaz de usuario.
Mostrar "tarjetas de llaves de acceso" en la configuración de la cuenta
A diferencia de las contraseñas, que son combinaciones tangibles de letras, números y símbolos, las llaves de acceso son invisibles para las personas. Espacio exclusivo para una tarjeta de llaves de acceso en la configuración de la cuenta. Dentro de la tarjeta, se incluye el ícono de la llave de acceso, información sobre la llave de acceso, como cuándo y en qué ecosistema se creó, cuándo se usó por última vez y opciones para administrarla. Si alguien tiene dos o más llaves de acceso, cada una debe tener su propia tarjeta.
![Captura de pantalla de la configuración de la llave de acceso en la página de configuración de seguridad de Trailblazer.](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/trailblazer-security-settings.png?authuser=19&hl=es)