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

Esta página descreve a experiência do usuário (UX) do botão "Fazer login com o Google".

Renderização do botão

Um botão personalizado mostra informações do perfil para a primeira sessão do Google que aprova seu site. Uma sessão aprovada do Google tem uma conta correspondente no seu site que já fez login usando o recurso Fazer login com o Google.

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

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

Um botão personalizado indica rapidamente o status da sessão, tanto no Google quanto no seu site, antes que os usuários cliquem nele. Isso é especialmente útil para usuários finais que visitam seu site apenas ocasionalmente. Eles podem esquecer se uma conta foi criada ou não e de que forma. Um botão personalizado lembra que o recurso "Fazer login com o Google" já foi usado. Assim, ele 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 é mostrado das seguintes maneiras:

• Uma sessão:há apenas uma sessão do 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 lado do Google. Essas sessões aprovam o cliente. A aprovação é indicada pela seta de 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ão do lado do Google ou nenhuma das sessões ainda aprovou o cliente.

  

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

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

O nome ou endereço de e-mail é mostrado como uma elipse quando é muito longo para ser exibido dentro do botão.

Importante: a ferramenta para desenvolvedores Code Generator pode ajudar você a projetar o botão "Fazer login com o Google" de forma interativa e gerar o código.

Principais jornadas do usuário

Importante: a exibição de um botão personalizado ou de texto genérico não tem nenhum impacto nos fluxos de UX depois que o botão é clicado. A conta exibida no botão personalizado não é selecionada automaticamente.

Ponto principal: o fluxo do botão "Fazer login com o Google" não oferece suporte ao 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 seguintes status.

• 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.
  • No-Google-session: não há uma sessão ativa nos sites do Google.

• Se a Conta do Google selecionada aprovou seu site quando a jornada do usuário começou. 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.

Jornada do novo usuário com sessão do Google

1. O botão "Fazer login com o Google".

   

2. Página do seletor de contas.

   

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

   

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

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

Jornada do usuário recorrente com sessão do Google

1. O botão "Fazer login com o Google".

   

2. Página do seletor de contas.

   

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

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

Jornada do novo usuário sem sessão do Google

1. O 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 nova página de consentimento do usuário.

   

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

Jornada do usuário recorrente sem sessão do Google

1. O 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.

Principais jornadas do usuário da conta do Family Link

As jornadas de usuário principais gerais da seção anterior ainda se aplicam. A imagem a seguir mostra o fluxo adicional que seria apresentado para a Conta do Google da criança ao fazer login.

No-Google-session

1. O botão "Fazer login com o Google".

   

2. A primeira página para adicionar uma nova sessão da Conta do Google para crianças (e-mail da Conta do Google da criança).

   

3. A segunda página para adicionar uma nova sessão da criança (senha da Conta do Google da criança).

   

4. A primeira página para receber a aprovação do responsável para adicionar uma nova sessão filha do Google.

   

5. A segunda página para receber a aprovação do familiar responsável para adicionar uma nova sessão filha do Google.

   

6. Terceira página para receber a aprovação dos pais para adicionar uma nova sessão filha do Google.

   

7. A primeira página para receber a aprovação do familiar responsável para fazer login com a Conta do Google de uma criança no app.

   

8. A segunda página para receber a aprovação do familiar responsável para fazer login com a Conta do Google de uma criança no app.

   

9. Terceira página para receber a aprovação do familiar responsável para fazer login de uma Conta do Google de uma criança no app.

   

10. Página final para receber a aprovação do familiar responsável para fazer login com a Conta do Google de uma criança no app.

    

11. Depois que o responsável clica no botão Continuar, um token de ID é compartilhado com seu site.

Has-Google-session

1. O botão "Fazer login com o Google".

   

2. Página do seletor de contas.

   

3. A primeira página para receber a aprovação do familiar responsável para fazer login com a Conta do Google de uma criança no app.

   

4. A segunda página para receber a aprovação do familiar responsável para fazer login com a Conta do Google de uma criança no app.

   

5. Terceira página para receber a aprovação do familiar responsável para fazer login de uma Conta do Google de uma criança no app.

   

6. Página final para receber a aprovação do familiar responsável para fazer login com a Conta do Google de uma criança no app.

   

7. Depois que o responsável clica no botão Continuar, um token de ID é compartilhado com seu site.