Expérience utilisateur avec le bouton "Se connecter avec Google"

Rendu du bouton

Un bouton personnalisé affiche les informations de profil pour la première session Google qui approuve votre site Web. Une session Google approuvée est associée à un compte sur votre site Web qui s'est déjà connecté à l'aide de la fonctionnalité Se connecter avec Google.

Si un bouton personnalisé s'affiche, l'utilisateur sait ce qui suit:

  • Au moins une session Google est active.
  • Il existe un compte correspondant sur votre site Web.

Un bouton personnalisé permet aux utilisateurs de connaître rapidement l'état de leur session, tant du côté de Google que de votre site Web, avant de cliquer sur le bouton. Cela est particulièrement utile pour les utilisateurs finaux qui ne consultent votre site Web qu'occasionnellement. Ils peuvent oublier si un compte a été créé ou non, et de quelle manière. Un bouton personnalisé leur rappelle que la fonctionnalité Se connecter avec Google a déjà été utilisée. Cela permet d'éviter la création inutile de comptes en double sur votre site Web.

Pour indiquer l'état de la session, le bouton personnalisé s'affiche de la manière suivante:

  • Une seule session:il n'y a qu'une seule session côté Google. Le client est approuvé au cours de cette session, et un compte correspondant s'affiche sur votre site Web.

    Bouton personnalisé affichant le nom d'un seul compte Google

  • Sessions multiples:Google compte plusieurs sessions. Ces sessions approuvent le client. L'approbation est indiquée par la flèche de la liste à côté du compte affiché. Au moins une session est associée à un compte sur votre site Web.

    Bouton personnalisé avec une flèche de liste.

  • Aucune session:il n'existe aucune session du côté de Google ou aucune des sessions n'a encore approuvé le client.

    Bouton "Se connecter avec Google" sans informations personnalisées.

Le bouton personnalisé s'affiche automatiquement lorsque l'état de la session convient, sauf si les paramètres du bouton n'autorisent pas son affichage. Le bouton personnalisé ne s'affiche pas dans les cas suivants:

  • L'attribut data-type est icon.
  • L'attribut data-size est défini sur medium ou small.
  • L'attribut data-width est défini sur un nombre inférieur à 200 px.

Le nom ou l'adresse e-mail apparaît avec des points de suspension s'ils sont trop longs pour être affichés à l'intérieur du bouton.

Bouton personnalisé avec des points de suspension pour le nom et l'adresse e-mail.

Principaux parcours utilisateur

Les parcours utilisateur varient en fonction des états suivants.

  • État de la session sur les sites Web Google. Les termes suivants sont utilisés pour indiquer un état de session Google différent au début du parcours utilisateur.

    • Has-Google-session: il y a au moins une session active sur les sites Web Google.
    • No-Google-session: il n'y a aucune session active sur les sites Web Google.
  • Indique si le compte Google sélectionné a approuvé votre site Web au début du parcours utilisateur. Les termes suivants sont utilisés pour indiquer différents états d'approbation.

    • Nouvel utilisateur: le compte sélectionné n'a pas approuvé votre site Web.
    • Utilisateur connu: le compte sélectionné a déjà approuvé votre site Web.

Nouveau parcours utilisateur avec une session Google

  1. Bouton "Se connecter avec Google"

    Bouton "Se connecter avec Google" sans informations personnalisées.

  2. Page du sélecteur de compte

    Page du sélecteur de compte associé à la session initiale.

  3. Nouvelle page "Consentement de l'utilisateur".

    Bouton "Se connecter avec Google" : consentement et connexion.

  4. Une fois l'utilisateur confirmé, un jeton d'ID est partagé avec votre site Web.

Les utilisateurs peuvent ajouter une session Google en cliquant sur le bouton Utiliser un autre compte. Reportez-vous aux parcours utilisateur Sans session Google ci-dessous.

Parcours utilisateur connu pour la session Google associée

  1. Bouton "Se connecter avec Google"

    Bouton personnalisé affichant le nom d'un seul compte Google

  2. Page du sélecteur de compte

    Sélecteur de compte Google

  3. Une fois que l'utilisateur a choisi un compte connu, un jeton d'ID est partagé avec votre site Web.

Les utilisateurs peuvent ajouter une session Google en cliquant sur le bouton Utiliser un autre compte. Reportez-vous aux parcours utilisateur "Sans session Google" ci-dessous.

Parcours du nouvel utilisateur sans session Google

  1. Bouton "Se connecter avec Google"

    Bouton "Se connecter avec Google" sans informations personnalisées.

  2. Première page pour laquelle ajouter une session Google.

    Adresse e-mail du compte Google

  3. Deuxième page pour ajouter une session Google.

    Connexion au compte Google

  4. Nouvelle page "Consentement de l'utilisateur".

    Bouton "Se connecter avec Google" : consentement et connexion.

  5. Une fois l'utilisateur confirmé, un jeton d'ID est partagé avec votre site Web.

Parcours utilisateur connu sans session Google

  1. Bouton "Se connecter avec Google"

    Bouton "Se connecter avec Google" sans informations personnalisées.

  2. Première page pour laquelle ajouter une session Google.

    Adresse e-mail du compte Google

  3. Deuxième page pour ajouter une session Google.

    Connexion au compte Google

  4. Une fois que l'utilisateur a cliqué sur le bouton Suivant, un jeton d'ID est partagé avec votre site Web.