Diseño de la interfaz de usuario de llaves de acceso

Incorporar ilustraciones y recursos visuales enriquecidos cuando se presentan las llaves de acceso también puede ayudar a reducir la carga cognitiva de los usuarios y respaldar tu contenido, a la vez que hace que la experiencia sea más atractiva y comprensible.

Componentes de diseño

Las llaves de acceso están diseñadas para mejorar 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 comunicar actualizaciones a los usuarios, de manera similar a cómo las Cuentas de Google les presentan las llaves de acceso durante el acceso, considera usar un formato intersticial para presentar las llaves de acceso.

Página de destino de TrailBlazer con una tarjeta titulada "Accede más rápido con llaves de acceso"
Crea un anuncio intersticial de llave de acceso en la app de Trailblazer.

Como alternativa, si tu plataforma suele informar a los usuarios sobre los cambios en la cuenta a través de ventanas emergentes modales, barras de notificaciones o cualquier otro estilo de alerta, emplea esos métodos de notificación conocidos para presentar 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 usar llaves de acceso para contraseñas más rápidas y seguras.
Ventana emergente para crear una llave de acceso en una app bancaria.

Crea un mensaje descriptivo para la llave de acceso

Para las acciones relacionadas con las llaves de acceso, en lugar de solo botones con un llamado a la acción, crea mensajes descriptivos enriquecidos que puedan transmitir más información a los usuarios. Pueden incluir ilustraciones, un título, mensajes y un llamado a la acción.

Por ejemplo, para crear una llave de acceso para Cuentas de Google, en lugar de solo un botón “Crear llave de acceso”, hay un intersticial con un llamado a la acción para “Simplificar tu acceso”, una breve explicación de las llaves de acceso y una ilustración que incluye el ícono de 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 el mensaje de aceptación para las llaves de acceso.
Página de creación de llaves de acceso en Cuentas de Google

Usa el ícono canónico de la llave de acceso

La FIDO Alliance creó un ícono de llave de acceso que debes usar cuando representes llaves de acceso. Usarlo de forma coherente ayudará a los usuarios a reconocer las llaves de acceso y a optimizar las acciones relacionadas con ellas.

Es el ícono canónico de la llave de acceso.

Usa el ícono de llaves de acceso en tu IU:

  • Representar el concepto de llave de acceso en la incorporación o en otras indicaciones para alentar a los usuarios a crear llaves de acceso o actualizar a una para acceder de forma más segura
  • En botones o vínculos que permiten a los usuarios acceder con una llave de acceso
  • En la configuración, para ayudar a identificar las llaves de acceso que se pueden editar o borrar

El color del ícono se puede cambiar 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 en gran medida invisibles para las personas. Dedica espacio a una tarjeta de llaves de acceso en la configuración de la cuenta. Dentro de la tarjeta, 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.
La configuración de llaves de acceso en la página de configuración de seguridad de Trailblazer muestra información detallada sobre cada llave de acceso.