Design da interface do usuário de chaves de acesso

Incorporar ilustrações e recursos visuais avançados ao apresentar as chaves de acesso pode ajudar a reduzir a carga cognitiva dos usuários e apoiar seu conteúdo, tornando a experiência mais envolvente e compreensível.

Componentes de design

As chaves de acesso são uma melhoria do seu produto ou serviço atual, e você deve apresentá-las usando um formato que os usuários já conhecem na sua plataforma.

Por exemplo, se o serviço usa anúncios intersticiais para transmitir atualizações aos usuários, semelhante a como as Contas do Google apresentam chaves de acesso aos usuários durante o login, considere usar um formato intersticial para apresentar as chaves de acesso.

Página de destino do TrailBlazer com um card chamado "Faça login mais rápido com chaves de acesso"
Crie um intersticial de chave de acesso no app Trailblazer.

Como alternativa, se a plataforma costuma informar os usuários sobre mudanças na conta usando modais pop-up, barras de notificação ou outros estilos de alerta, use esses métodos de notificação conhecidos para apresentar 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.

Um pop-up oferece ao usuário o uso de chaves de acesso para senhas mais rápidas e seguras.
Criar um pop-up de chave de acesso em um app bancário.

Criar um pedido de chave de acesso descritivo

Para ações relacionadas a chaves de acesso, em vez de apenas botões com uma call-to-action, crie solicitações descritivas detalhadas que possam transmitir mais informações aos usuários. Elas podem incluir ilustrações, um título, mensagens e uma call-to-action.

Por exemplo, para criar uma chave de acesso para Contas do Google, em vez de apenas um botão "Criar chave de acesso", há um intersticial com uma call-to-action para "Simplificar seu login", uma breve explicação sobre chaves de acesso e uma ilustração que inclui o ícone de chave de acesso e vários métodos de desbloqueio da tela de um dispositivo.

Captura de tela da página "Contas do Google" com uma mensagem de ativação das chaves de acesso.
Página de criação de chaves de acesso nas Contas do Google

Usar o ícone canônico de chave de acesso

A FIDO Alliance criou um ícone de chave de acesso que você deve usar ao representar chaves de acesso. Usar esse recurso de forma consistente ajuda os usuários a reconhecer as chaves de acesso e simplifica as ações relacionadas a elas.

Ícone canônico da chave de acesso.

Use o ícone de chaves de acesso na sua interface:

  • Para representar o conceito de chave de acesso em fluxos de integração ou outros avisos para incentivar os usuários a criar ou fazer upgrade para uma chave de acesso e ter um login mais seguro.
  • Em botões ou links que permitem que os usuários façam login com uma chave de acesso.
  • Nas configurações, para ajudar a identificar chaves de acesso que podem ser editadas ou excluídas.

A cor do ícone pode ser mudada para corresponder ao esquema de cores do seu produto, marca ou interface do usuário.

Mostrar "cards 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 praticamente invisíveis para as pessoas. Dedique espaço para um cartão de chaves de acesso nas configurações da conta. No card, inclua o ícone da chave de acesso, informações sobre ela, como quando e em qual ecossistema ela foi criada, quando foi usada pela última vez e opções para gerenciar a chave. Se alguém tiver duas ou mais chaves de acesso, cada uma delas vai ter um card próprio.

Captura de tela das configurações de chaves de acesso na página de configurações de segurança do Trailblazer.
As configurações de chaves de acesso na página de configurações de segurança do Trailblazer mostram informações detalhadas sobre cada chave.