UX del botón Acceder con Google

Renderización de botones

Un botón personalizado muestra 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 ya accedió con Acceder con Google.

Si se muestra un botón personalizado, el usuario sabrá 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 el lado de Google como en tu sitio web, antes de que hagan clic en el botón. Esto es particularmente útil para los usuarios finales que visitan tu sitio web solo ocasionalmente. Pueden olvidarse si se creó una cuenta o no y de qué manera. Un botón personalizado le recuerda que Acceder con Google ya se usó antes. 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 de Google. Esa sesión aprueba el cliente, y hay una cuenta correspondiente en tu sitio web.

    Un botón personalizado que muestra el nombre de una sola Cuenta de Google

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

    Un botón personalizado con una flecha de lista

  • Ninguna sesión: No hay ninguna sesión de parte de Google o ninguna de las sesiones aprobó al cliente todavía.

    Un botón que dice "Acceder con Google", sin información personalizada.

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 está configurado como medium o small.
  • El atributo data-width está configurado en un número inferior a 200 px.

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

Un botón personalizado con elipsis del nombre y el correo electrónico

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 un estado diferente 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 ninguna sesión activa en los sitios web de Google.
  • Indica si la Cuenta de Google seleccionada aprobó tu sitio web cuando comienza el recorrido del usuario. Los siguientes términos se usan para indicar un estado de aprobación diferente.

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

Recorrido de usuario nuevo de una sesión de Google

  1. El botón Acceder con Google

    Un botón que dice "Acceder con Google", sin información personalizada.

  2. La página del selector de cuentas

    Tiene una página del selector de cuentas de sesión inicial.

  3. La página de consentimiento del usuario nuevo.

    Consentimiento del botón Acceder con Google y acceso.

  4. Después de que el usuario confirma, se comparte un token de ID con tu sitio web.

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

Recorrido del usuario recurrente de una sesión de Google

  1. El botón Acceder con Google

    Un botón personalizado que muestra el nombre de una sola Cuenta de Google

  2. La página del selector de cuentas

    Selector de Cuentas de Google

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

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

Recorrido de usuario nuevo sin sesiones de Google

  1. El botón Acceder con Google

    Un botón que dice "Acceder con Google", sin información personalizada.

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

    Correo electrónico de Cuenta de Google

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

    Acceso con la Cuenta de Google

  4. La página de consentimiento del usuario nuevo.

    Consentimiento del botón Acceder con Google y acceso.

  5. Después de que el usuario confirma, se comparte un token de ID con tu sitio web.

Recorrido de usuario recurrente sin sesión de Google

  1. El botón Acceder con Google

    Un botón que dice "Acceder con Google", sin información personalizada.

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

    Correo electrónico de Cuenta de Google

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

    Acceso con la Cuenta de Google

  4. Una vez que el usuario hace clic en el botón Next, se comparte un token de ID con tu sitio web.