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.
Um botão personalizado que mostra o nome de uma única Conta do Google.
  • 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.
Um botão personalizado com uma seta de lista.
  • Nenhuma sessão: não há sessões do Google ou nenhuma delas aprovou o cliente ainda.
Um botão que diz "Fazer login com o Google" sem informações personalizadas.

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.

Um botão personalizado com nome e e-mails.

Principais jornadas do usuário

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

    Um botão que diz "Fazer login com o Google" sem informações personalizadas.

  2. Página do seletor de conta.

    Página do seletor de contas da sessão inicial

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

    Permissão e login com o botão "Fazer login com o Google"

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

    Um botão personalizado que mostra o nome de uma única Conta do Google.

  2. Página do seletor de conta.

    Seletor de Conta do Google

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

    Um botão que diz "Fazer login com o Google" sem informações personalizadas.

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

    E-mail da conta do Google

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

    Login na Conta do Google

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

    Permissão e login com o botão "Fazer login com o Google"

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

    Um botão que diz "Fazer login com o Google" sem informações personalizadas.

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

    E-mail da conta do Google

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

    Login na Conta do Google

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