A incorporação de ilustrações e recursos visuais avançados ao introduzir chaves de acesso também pode alimentar a carga cognitiva dos usuários e apoiar seu conteúdo, tornando a experiência mais envolvente e compreensível.
Componentes de design
O objetivo das chaves de acesso é melhorar seu produto ou serviço atual, e você precisa apresentar essas chaves usando um formato que os usuários já conhecem na sua plataforma.
Por exemplo, se o serviço usa intersticiais para transmitir atualizações aos usuários, de maneira semelhante à maneira como as Contas do Google apresentam chaves de acesso aos usuários durante o login, considere usar um formato intersticial para introduzir chaves de acesso.
![Página de destino do TrailBlazer com um card chamado "Faça login mais rápido com chaves de acesso"](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/trailblazer-landing-page.png?authuser=5&hl=pt-br)
Como alternativa, se a plataforma normalmente informa os usuários sobre mudanças na conta por pop-ups, barras de notificação ou outros estilos de alerta, use esses métodos de notificação conhecidos para introduzir o conceito de chaves de acesso. Essa abordagem garante uma experiência consistente e fácil de usar ao lançar o novo recurso de chave de acesso.
![Pop-up oferecendo ao usuário a opção de usar chaves de acesso para criar senhas mais rápidas e seguras.](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/passkey-pop-up.png?authuser=5&hl=pt-br)
Criar uma solicitação de chave de acesso descritiva
Para ações relacionadas a chaves de acesso, em vez de apenas botões com uma call-to-action, crie comandos descritivos avançados que possam transmitir mais informações aos usuários. Eles podem incluir ilustrações, um título, mensagem e uma call-to-action.
Por exemplo, para criar uma chave de acesso para Contas do Google, em vez do botão "Criar chave de acesso", há um intersticial com uma call-to-action para "Simplifique seu login", uma breve explicação das chaves de acesso e uma ilustração que inclui o ícone da chave de acesso e vários métodos de desbloqueio da tela de um dispositivo.
![Captura de tela da página das Contas do Google com mensagens de ativação para chaves de acesso.](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/passkey-creation-page.png?authuser=5&hl=pt-br)
Usar o ícone de chave de acesso canônica
A Aliança FIDO criou um ícone de chave de acesso (link em inglês) que precisa ser usado para representar chaves de acesso. O uso consistente ajuda os usuários a reconhecer chaves de acesso e simplificar as ações relacionadas a elas.
![Ícone da chave de acesso canônica.](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/canonical-passkey-icon.png?authuser=5&hl=pt-br)
Use o ícone de chaves de acesso na interface:
- Para representar o conceito de chave de acesso na integração ou em outras solicitações para incentivar os usuários a criar chaves de acesso ou fazer upgrade para uma chave de acesso para um login mais seguro.
- Em botões ou links que permitem aos usuários fazer login com uma chave de acesso.
- Nas configurações, para ajudar a identificar as chaves de acesso que podem ser editadas ou excluídas.
A cor do ícone pode ser alterada para combinar com o esquema de cores do seu produto, marca ou interface do usuário.
Mostrar "cartões de chaves de acesso" nas configurações da conta
Ao contrário das senhas, que são combinações tangíveis de letras, números e símbolos, as chaves de acesso são, em grande parte, invisíveis para as pessoas. Dedique espaço para um cartão de chaves de acesso nas configurações da conta. Dentro do cartão, há o ícone da chave de acesso, informações sobre a chave de acesso, como quando e em qual ecossistema ela foi criada, quando foi usada pela última vez e opções para gerenciar a chave de acesso. Se alguém tiver duas ou mais chaves de acesso, cada uma vai precisar ter um cartão próprio.
![Captura de tela das configurações da chave de acesso na página de configurações de segurança do Trailblazer.](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/trailblazer-security-settings.png?authuser=5&hl=pt-br)