UX do botão "Fazer login com o Google"

Renderização do botão

Um botão personalizado exibe informações de perfil da primeira sessão do Google que aprova seu site. Uma sessão do Google aprovada tem uma conta correspondente no seu site que já tenha feito login usando o recurso "Fazer login com o Google".

Se um botão personalizado for exibido, o usuário saberá o seguinte:

• Há pelo menos uma sessão ativa do Google.
• Há uma conta correspondente no seu site.

Um botão personalizado dá aos usuários uma indicação rápida do status da sessão, do Google e do seu site, antes de clicar no botão. Isso é especialmente útil para usuários finais que acessam seu site apenas de vez em quando. Elas podem esquecer se uma conta foi criada e de que forma. Um botão personalizado lembra que o Login com o Google já foi usado. Isso ajuda a evitar a criação desnecessária de contas duplicadas no seu site.

Para indicar o status da sessão, o botão personalizado é exibido das seguintes maneiras:

• Uma sessão: só há uma sessão no lado do Google. Essa sessão aprova o cliente, e há uma conta correspondente no seu site.

• Várias sessões:há várias sessões do Google. Essas sessões aprovam o cliente. A aprovação é indicada pela seta da lista ao lado da conta exibida. Pelo menos uma sessão tem uma conta correspondente no seu site.

• Nenhuma sessão: não há sessões do Google ou nenhuma delas aprovou o cliente ainda.

O botão personalizado será exibido automaticamente quando o status da sessão for adequado, a menos que as configurações do botão não permitam que ele seja exibido. Atualmente, o botão personalizado não é mostrado se:

• O atributo data-type é icon.
• O atributo data-size está definido como medium ou small.
• O atributo data-width está definido como um número menor que 200 px.

O nome ou endereço de e-mail aparecerá em reticências quando forem muito longos para serem exibidos no botão.

Importante:a ferramenta de desenvolvedor do Gerador de código pode ajudar você a criar o botão "Fazer login com o Google" de maneira interativa e gerar o código.

Principais jornadas do usuário

Importante: a exibição de um botão personalizado ou um botão de texto genérico não afeta os fluxos de UX após o clique no botão. A conta mostrada no botão personalizado não será selecionada automaticamente.

Importante: o fluxo do botão "Fazer login com o Google" não é compatível com o login automático. Uma ação do usuário é necessária para selecionar a sessão correta, mesmo quando há apenas uma sessão ativa do Google.

As jornadas do usuário variam de acordo com os status a seguir.

• Status da sessão nos sites do Google. Os termos a seguir são usados para indicar diferentes status de sessão do Google quando a jornada do usuário começa.

  • Has-Google-session: há pelo menos uma sessão ativa nos sites do Google.
  • Não na sessão do Google: não há uma sessão ativa nos sites do Google.

• Indica se a Conta do Google selecionada aprovou seu site quando a jornada do usuário começa. Os termos a seguir são usados para indicar diferentes status de aprovação.

  • Novo usuário: a conta selecionada não aprovou seu site.
  • Usuário recorrente: a conta selecionada já aprovou seu site.

A jornada do novo usuário na sessão do Google

1. Botão "Fazer login com o Google".

   

2. Página do seletor de conta.

   

3. A página de consentimento do novo usuário.

   

4. Depois que o usuário confirma, um token de ID é compartilhado com seu site.

Para adicionar uma nova sessão do Google, os usuários podem clicar no botão Usar outra conta. Consulte as jornadas do usuário Sem sessão do Google abaixo.

Jornada do usuário que retorna à sessão do Google

1. Botão "Fazer login com o Google".

   

2. Página do seletor de conta.

   

3. Depois que o usuário escolhe uma conta recorrente, um token de ID é compartilhado com seu site.

Para adicionar uma nova sessão do Google, os usuários podem clicar no botão Usar outra conta. Consulte as jornadas do usuário "Sem sessão do Google" abaixo.

Nova jornada do usuário em sessões que não são do Google

1. Botão "Fazer login com o Google".

   

2. A primeira página para adicionar uma nova sessão do Google.

   

3. A segunda página para adicionar uma nova sessão do Google.

   

4. A página de consentimento do novo usuário.

   

5. Depois que o usuário confirma, um token de ID é compartilhado com seu site.

Jornada do usuário recorrente em uma sessão do Google

1. Botão "Fazer login com o Google".

   

2. A primeira página para adicionar uma nova sessão do Google.

   

3. A segunda página para adicionar uma nova sessão do Google.

   

4. Depois que o usuário clica no botão Próxima, um token de ID é compartilhado com seu site.