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

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Rendu du bouton

Un bouton personnalisé affiche les informations de profil de 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é via la fonctionnalité Se connecter avec Google.

Si un bouton personnalisé s'affiche, l'utilisateur connaît les éléments suivants:

  • Il y a au moins une session Google active.
  • Votre site Web contient un compte correspondant.

Un bouton personnalisé permet aux utilisateurs d'obtenir un aperçu rapide de l'état de la session, sur Google et sur votre site Web, avant qu'ils ne cliquent 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 comme suit:

  • Une seule session : une seule session est organisée par Google. Cette session approuve le client, et il existe un compte correspondant sur votre site Web.
Bouton personnalisé qui affiche le nom d'un seul compte Google.
  • Plusieurs sessions:Google organise plusieurs sessions. 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.
Bouton personnalisé avec une flèche de liste.
  • Aucune session : Google n'a aucune session ou aucune session n'a approuvé le client pour le moment.
Bouton "Se connecter avec Google" sans information personnalisée

Le bouton personnalisé s'affiche automatiquement lorsque l'état de la session convient, sauf si les paramètres de votre bouton ne permettent pas l'affichage du bouton personnalisé. Actuellement, le bouton personnalisé ne s'affiche pas si:

  • 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 trop longs lorsqu'ils sont trop longs pour être affichés dans le bouton.

Bouton personnalisé avec nom et adresse e-mail elliptiques.

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 différents états de session Google lorsque le parcours utilisateur commence.

    • Session Has-Google: il existe au moins une session active sur les sites Web Google.
    • Aucune session Google: 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 des nouveaux utilisateurs dans une session Google

  1. Bouton "Se connecter avec Google".

    Bouton "Se connecter avec Google" sans information personnalisée

  2. Page du sélecteur de compte.

    Page de sélection du compte associé à une session initiale

  3. Page "Consentement de l'utilisateur"

    Bouton "Se connecter avec Google" et connexion.

  4. Une fois l'utilisateur confirmé, un jeton d'identification 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). Veuillez vous reporter aux parcours utilisateur No-session Google ci-dessous.

Parcours habituel des utilisateurs ayant une session Google

  1. Bouton "Se connecter avec Google".

    Bouton personnalisé qui affiche 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'identification 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). Veuillez vous reporter au parcours utilisateur "Aucune session Google" ci-dessous.

Aucun nouveau parcours utilisateur

  1. Bouton "Se connecter avec Google".

    Bouton "Se connecter avec Google" sans information personnalisée

  2. Première page à ajouter une session Google.

    Adresse e-mail du compte Google

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

    Connexion au compte Google

  4. Page "Consentement de l'utilisateur"

    Bouton "Se connecter avec Google" et connexion.

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

Parcours d'utilisateurs connus sans session Google

  1. Bouton "Se connecter avec Google".

    Bouton "Se connecter avec Google" sans information personnalisée

  2. Première page à ajouter une session Google.

    Adresse e-mail du compte Google

  3. Deuxième page permettant d'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.