UX del botón Acceder con Google

Procesamiento 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ó mediante la opción 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 su sitio web.

Un botón personalizado les brinda a los usuarios una indicación rápida del estado de la sesión, tanto 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 su sitio web solo ocasionalmente. Es posible que olviden si se creó o no una cuenta y de qué manera. Un botón personalizado les recuerda que Acceder con Google ya se usó. 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 al 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 del lado de Google. Esas sesiones aprueban al cliente. La aprobación se indica mediante 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
  • Sin sesión: No hay sesión 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 mostrará automáticamente cuando el estado de la sesión sea apropiado, a menos que la configuración de tu botón no permita que se muestre el botón personalizado. Actualmente, el botón personalizado no se muestra si:

  • 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 acortará cuando sean demasiado largos para mostrarse dentro del botón.

Un botón personalizado con nombre y correo electrónico ajustados

Recorridos clave de los usuarios

Los recorridos del usuario 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 el 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.
    • Sin sesión de Google: 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.

    • Nuevo usuario: la cuenta seleccionada no aprobó su sitio web.
    • Usuario recurrente: La cuenta seleccionada aprobó su sitio web antes.

Recorrido del usuario nuevo de Google en la sesión

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

    Página del selector de cuentas de Has-Initial-Session

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

    Botón de acceso con el consentimiento de Google.

  4. Una vez que el usuario confirma, se comparte un token de ID con su sitio web.

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

Recorrido del usuario recurrente de Has-Google-session

  1. 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 nueva sesión de Google haciendo clic en el botón Usar otra cuenta. Consulta los recorridos de los usuarios que no realizan una sesión en Google a continuación.

Nuevo recorrido del usuario sin sesión de Google

  1. Botón Acceder con Google

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

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

    Correo electrónico de Cuenta de Google

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

    Acceso a la Cuenta de Google

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

    Botón de acceso con el consentimiento de Google.

  5. Una vez que el usuario confirma, se comparte un token de ID con su sitio web.

Recorrido del usuario recurrente sin sesión de Google

  1. Botón Acceder con Google

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

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

    Correo electrónico de Cuenta de Google

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

    Acceso a la Cuenta 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.