UX del botón Acceder con Google

En esta página, se describe la experiencia del usuario (UX) del botón Acceder con Google.

Renderización de botones

Un botón personalizado muestra la información del perfil de la primera sesión de Google que aprueba tu sitio web. Una sesión de Google aprobada tiene una cuenta correspondiente en tu sitio web que accedió con Acceder con Google anteriormente.

Si se muestra un botón personalizado, el usuario sabe lo siguiente:

• Hay al menos una sesión de Google activa.
• Hay una cuenta correspondiente en tu sitio web.

Un botón personalizado les brinda a los usuarios una indicación rápida del estado de la sesión, tanto en Google como en tu sitio web, antes de que hagan clic en él. Esto es útil, en especial, para los usuarios finales que visitan tu sitio web solo de forma ocasional. Es posible que olviden si se creó una cuenta o no, y de qué manera. Un botón personalizado le recuerda que ya usó Acceder con Google. Por lo tanto, ayuda a evitar la creación innecesaria de cuentas duplicadas en tu sitio web.

Para indicar el estado de la sesión, el botón personalizado se muestra de las siguientes maneras:

• Una sesión: Solo hay una sesión del lado de Google. Esa sesión aprueba al cliente y hay una cuenta correspondiente en tu sitio web.

  

• Varias sesiones: Hay varias sesiones del lado de Google. Esas sesiones aprueban al cliente. La flecha de la lista junto a la cuenta que se muestra indica la aprobación. Al menos una sesión tiene una cuenta correspondiente en tu sitio web.

  

• Sin sesión: No hay ninguna sesión del lado de Google o ninguna de las sesiones aún aprobó al cliente.

  

El botón personalizado se muestra automáticamente cuando el estado de la sesión es adecuado, a menos que la configuración del botón no permita que se muestre. El botón personalizado no se muestra en los siguientes casos:

• El atributo data-type es icon.
• El atributo data-size se establece en medium o small.
• El atributo data-width se establece en un número menor que 200 px.

El nombre o la dirección de correo electrónico se muestran con puntos suspensivos cuando son demasiado largos para mostrarse dentro del botón.

Recorridos clave de los usuarios

Los recorridos de los usuarios varían según los siguientes estados.

• Estado de la sesión en los sitios web de Google Los siguientes términos se usan para indicar diferentes estados de la sesión de Google cuando comienza el recorrido del usuario.

  • Has-Google-session: Hay al menos una sesión activa en los sitios web de Google.
  • No-Google-session: No hay una sesión activa en los sitios web de Google.

• Si la Cuenta de Google seleccionada aprobó tu sitio web cuando comienza el recorrido del usuario Los siguientes términos se usan para indicar diferentes estados de aprobación.

  • Usuario nuevo: La cuenta seleccionada no aprobó tu sitio web.
  • Usuario recurrente: La cuenta seleccionada ya aprobó tu sitio web.

Recorrido del usuario nuevo que tiene una sesión de Google

1. El botón Acceder con Google

   

2. La página del selector de cuentas

   

3. La nueva página de consentimiento del usuario

   

4. Después de que el usuario confirme, se compartirá un token de ID con tu sitio web.

Los usuarios pueden agregar una nueva sesión de Google haciendo clic en el botón Usar otra cuenta. Consulta los recorridos del usuario Sin sesión de Google a continuación.

Recorrido del usuario recurrente que tiene una sesión de Google

1. El botón Acceder con Google

   

2. La página del selector de cuentas

   

3. Después de que el usuario elige una cuenta que ya usó, se comparte un token de ID con tu sitio web.

Los usuarios pueden agregar una nueva sesión de Google haciendo clic en el botón Usar otra cuenta. Consulta los recorridos del usuario "Sin sesión de Google" a continuación.

Recorrido del usuario nuevo sin sesión de Google

1. El botón Acceder con Google

   

2. La primera página para agregar una nueva sesión de Google.

   

3. La segunda página para agregar una nueva sesión de Google.

   

4. La nueva página de consentimiento del usuario

   

5. Después de que el usuario confirme, se compartirá un token de ID con tu sitio web.

Recorrido del usuario recurrente sin sesión de Google

1. El botón Acceder con Google

   

2. La primera página para agregar una nueva sesión de Google.

   

3. La segunda página para agregar una nueva sesión de Google.

   

4. Después de que el usuario hace clic en el botón Siguiente, se comparte un token de ID con tu sitio web.

Recorridos clave de los usuarios de la cuenta de Family Link

Aún se aplican los recorridos clave generales de los usuarios de la sección anterior. A continuación, se muestra el flujo adicional que se presentaría para la Cuenta de Google de tu hijo o hija cuando acceda.

No-Google-session

1. El botón Acceder con Google

   

2. La primera página para agregar una nueva sesión de Google para niños (correo electrónico de la Cuenta de Google para niños)

   

3. La segunda página para agregar una nueva sesión de Google para tu hijo o hija (contraseña de la Cuenta de Google de tu hijo o hija)

   

4. La primera página para obtener la aprobación del padre o la madre para agregar una nueva sesión de Google para el hijo o la hija

   

5. La segunda página para obtener la aprobación del padre o la madre para agregar una nueva sesión de Google para niños.

   

6. La tercera página para obtener la aprobación del padre o la madre para agregar una nueva sesión de Google para niños.

   

7. La primera página para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.

   

8. Segunda página para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.

   

9. La tercera página para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.

   

10. La página final para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.

    

11. Después de que el progenitor hace clic en el botón Continuar, se comparte un token de ID con tu sitio web.

Has-Google-session

1. El botón Acceder con Google

   

2. La página del selector de cuentas

   

3. La primera página para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.

   

4. Segunda página para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.

   

5. La tercera página para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.

   

6. La página final para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.

   

7. Después de que el progenitor hace clic en el botón Continuar, se comparte un token de ID con tu sitio web.