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 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. Ele pode 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, você evita a criação 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 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 Google ou nenhuma das sessões aprovou o cliente ainda.

  

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 no botão.

Principais jornadas do usuário

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á sessão ativa nos sites do Google.

• 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.

Nova jornada do 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. A página do seletor de conta.

   

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 Use another account. 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.