UX du bouton "Se connecter avec Google"

Cette page décrit l'expérience utilisateur du bouton "Se connecter avec Google".

Rendu des boutons

Un bouton personnalisé affiche des 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 ce qui suit:

• Il y a au moins une session Google active.
• Un compte correspondant est associé à 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 Se connecter avec Google a déjà été utilisé. 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 un compte correspondant est disponible 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 à 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 est approprié, sauf si vos paramètres de 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.
• La valeur de l'attribut data-width est inférieure à 200 px.

Le nom ou l'adresse e-mail sont affichés sous forme d'ellipses lorsqu'ils sont trop longs pour s'afficher dans le 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: au moins une session active est 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 Utiliser un autre compte. Consultez les parcours utilisateur Sans session Google ci-dessous.

Parcours utilisateur connu avec 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 que l'utilisateur a confirmé, 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.

Principaux parcours utilisateur avec un compte Family Link

Les principaux parcours utilisateur généraux de la section précédente s'appliquent toujours. Ce qui suit montre que le flux supplémentaire sera présenté pour le compte Google de l'enfant lors de la connexion.

No-Google-session

1. Bouton "Se connecter avec Google"

   

2. Première page permettant d'ajouter une session Google enfant (adresse e-mail du compte Google enfant).

   

3. Deuxième page permettant d'ajouter une session Google enfant (mot de passe du compte Google enfant).

   

4. Première page permettant d'obtenir l'approbation du parent pour ajouter une session Google enfant.

   

5. Deuxième page permettant d'obtenir l'approbation du parent pour ajouter une session Google enfant.

   

6. Troisième page permettant d'obtenir l'approbation du parent pour ajouter une session Google enfant.

   

7. Première page permettant d'obtenir l'autorisation du parent pour connecter un compte Google enfant à l'application.

   

8. Deuxième page permettant d'obtenir l'autorisation du parent pour connecter un compte Google enfant à l'application.

   

9. Troisième page permettant d'obtenir l'autorisation du parent pour connecter un compte Google enfant à l'application.

   

10. Page finale permettant d'obtenir l'autorisation du parent pour connecter un compte Google enfant à l'application.

    

11. Une fois que le parent a cliqué sur le bouton Continuer, un jeton d'ID est partagé avec votre site Web.

Has-Google-session

1. Bouton "Se connecter avec Google"

   

2. Page du sélecteur de compte.

   

3. Première page permettant d'obtenir l'autorisation du parent pour connecter un compte Google enfant à l'application.

   

4. Deuxième page permettant d'obtenir l'autorisation du parent pour connecter un compte Google enfant à l'application.

   

5. Troisième page permettant d'obtenir l'autorisation du parent pour connecter un compte Google enfant à l'application.

   

6. Page finale permettant d'obtenir l'autorisation du parent pour connecter un compte Google enfant à l'application.

   

7. Une fois que le parent a cliqué sur le bouton Continuer, un jeton d'ID est partagé avec votre site Web.