UX du bouton "Se connecter avec Google"

Rendu des boutons

Un bouton personnalisé affiche les informations de profil pour la première session Google qui approuve votre site Web. Une session Google approuvée correspond à 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:

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

Un bouton personnalisé indique rapidement aux utilisateurs l'état de la session, à la fois du côté de Google et sur votre site Web, avant qu'ils ne cliquent dessus. Cela est particulièrement utile pour les utilisateurs finaux qui ne visitent votre site Web que de temps en temps. Il peut 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 comme suit:

• Une session:il n'y a qu'une seule session côté Google. Cette session approuve le client, et il existe un compte correspondant sur votre site Web.

  

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

  

• Aucune session:aucune session n'est active côté Google, ou aucune session n'a encore approuvé le client.

  

Le bouton personnalisé s'affiche automatiquement lorsque l'état de la session le convient, sauf si les paramètres de votre bouton ne permettent 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 une valeur inférieure à 200 pixels.

Le nom ou l'adresse e-mail sont tronqués lorsqu'ils sont trop longs pour être affichés à l'intérieur du bouton.

Important :L'outil de développement Générateur de code peut vous aider à concevoir le bouton Se connecter avec Google de manière interactive et à générer le code.

Principaux parcours utilisateur

Point clé :L'affichage d'un bouton personnalisé ou d'un bouton de texte générique n'a aucun impact sur les flux d'expérience utilisateur après le clic sur le bouton. Le compte affiché dans le bouton personnalisé n'est pas sélectionné automatiquement.

Important :Le flux du bouton "Se connecter avec Google" n'est pas compatible avec la connexion automatique. Une action de l'utilisateur est requise pour sélectionner la bonne session, même lorsqu'il n'y a qu'une seule session Google active.

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 différents états de session Google 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: 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.

Parcours utilisateur avec Has-Google-session

1. Bouton "Se connecter avec Google"

   

2. Page du sélecteur de compte.

   

3. Nouvelle page de consentement de l'utilisateur.

   

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

Les utilisateurs peuvent ajouter une session Google en cliquant sur le bouton Use another account (Utiliser un autre compte). Reportez-vous aux parcours utilisateur No-Google-session ci-dessous.

Parcours utilisateur connu ayant une session Google

1. Bouton "Se connecter avec Google"

   

2. Page du sélecteur de compte.

   

3. Une fois que l'utilisateur a choisi un compte existant, 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. Consultez les parcours utilisateur "Aucune session Google" ci-dessous.

Parcours utilisateur sans session Google

1. Bouton "Se connecter avec Google"

   

2. Première page permettant d'ajouter une session Google.

   

3. Deuxième page permettant d'ajouter une session Google.

   

4. Nouvelle page de consentement de l'utilisateur.

   

5. Une fois la confirmation effectuée par l'utilisateur, un jeton d'ID est partagé avec votre site Web.

Parcours utilisateur connu sans session Google

1. Bouton "Se connecter avec Google"

   

2. Première page permettant d'ajouter une session Google.

   

3. Deuxième page permettant d'ajouter une session Google.

   

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