UX con il pulsante Accedi con Google

Rendering dei pulsanti

Un pulsante personalizzato mostra le informazioni del profilo per la prima sessione Google che approva il tuo sito web. Una sessione Google approvata ha un account corrispondente sul tuo sito web che ha eseguito l'accesso utilizzando Accedi con Google in precedenza.

Se viene visualizzato un pulsante personalizzato, l'utente sa quanto segue:

  • Esiste almeno una sessione Google attiva.
  • Sul tuo sito web è presente un account corrispondente.

Un pulsante personalizzato fornisce agli utenti un'indicazione rapida dello stato della sessione, sia da parte di Google sia sul tuo sito web, prima che facciano clic sul pulsante. Questo è particolarmente utile per gli utenti finali che visitano il tuo sito web solo occasionalmente. Potrebbe dimenticare se è stato creato un account o meno e in che modo. Un pulsante personalizzato gli ricorda che Accedi con Google è già stato utilizzato. In questo modo, contribuisce a evitare la creazione di account duplicati non necessari sul tuo sito web.

Per indicare lo stato della sessione, il pulsante personalizzato viene visualizzato nei seguenti modi:

  • Una sessione:esiste una sola sessione lato Google. Questa sessione approva il cliente e c'è un account corrispondente sul tuo sito web.

    Un pulsante personalizzato che mostra il nome di un singolo Account Google.

  • Sessioni multiple: sono presenti più sessioni da parte di Google. Queste sessioni approvano il client. L'approvazione è indicata dalla freccia dell'elenco accanto all'account visualizzato. Almeno una sessione ha un account corrispondente sul tuo sito web.

    Un pulsante personalizzato con una freccia a forma di elenco.

  • Nessuna sessione: non è presente alcuna sessione lato Google o nessuna delle sessioni ha ancora approvato il client.

    Un pulsante "Accedi con Google" senza informazioni personalizzate.

Il pulsante personalizzato viene visualizzato automaticamente quando lo stato della sessione è appropriato, a meno che le impostazioni del pulsante non ne consentano la visualizzazione. Il pulsante personalizzato non viene visualizzato se:

  • L'attributo data-type è icon.
  • L'attributo data-size è impostato su medium o small.
  • L'attributo data-width è impostato su un numero inferiore a 200 px.

Il nome o l'indirizzo email vengono visualizzati con i puntini di sospensione quando sono troppo lunghi per essere visualizzati all'interno del pulsante.

Un pulsante personalizzato con nome ed email ellittici.

Percorsi utente principali

I percorsi degli utenti variano in base ai seguenti stati.

  • Stato della sessione sui siti web di Google. I seguenti termini vengono utilizzati per indicare diversi stati della sessione Google all'inizio del percorso dell'utente.

    • Has-Google-session: è presente almeno una sessione attiva sui siti web di Google.
    • No-Google-session: nessuna sessione attiva sui siti web Google.
  • Se l'Account Google selezionato ha approvato il tuo sito web all'inizio del percorso dell'utente. I seguenti termini vengono utilizzati per indicare diversi stati di approvazione.

    • Nuovo utente: l'account selezionato non ha approvato il tuo sito web.
    • Utente di ritorno: l'account selezionato ha già approvato il tuo sito web.

Percorso del nuovo utente della sessione Has-Google

  1. Il pulsante Accedi con Google.

    Un pulsante "Accedi con Google" senza informazioni personalizzate.

  2. La pagina del selettore account.

    Pagina del selettore dell'account con sessione iniziale.

  3. La pagina per il consenso dei nuovi utenti

    Consenso e accesso tramite il pulsante Accedi con Google.

  4. Dopo la conferma dell'utente, un token ID viene condiviso con il tuo sito web.

Gli utenti possono aggiungere una nuova sessione Google facendo clic sul pulsante Usa un altro account. Consulta i percorsi utente Nessuna sessione Google di seguito.

Percorso dell'utente di ritorno con sessione Google

  1. Il pulsante Accedi con Google.

    Un pulsante personalizzato che mostra il nome di un singolo Account Google.

  2. La pagina del Selettore account.

    Selettore Account Google

  3. Dopo che l'utente ha scelto un account di ritorno, un token ID viene condiviso con il tuo sito web.

Gli utenti possono aggiungere una nuova sessione Google facendo clic sul pulsante Utilizza un altro account. Consulta le seguenti Customer Journey "Nessuna sessione Google".

Percorso del nuovo utente senza sessione Google

  1. Il pulsante Accedi con Google.

    Un pulsante "Accedi con Google" senza informazioni personalizzate.

  2. La prima pagina per aggiungere una nuova sessione Google.

    Email account Google

  3. La seconda pagina per aggiungere una nuova sessione Google.

    Accesso all'Account Google

  4. La pagina per il consenso dei nuovi utenti

    Consenso e accesso tramite il pulsante Accedi con Google.

  5. Dopo la conferma dell'utente, un token ID viene condiviso con il tuo sito web.

Percorso dell'utente di ritorno senza sessione Google

  1. Il pulsante Accedi con Google.

    Un pulsante "Accedi con Google" senza informazioni personalizzate.

  2. La prima pagina per aggiungere una nuova sessione Google.

    Email account Google

  3. La seconda pagina per aggiungere una nuova sessione Google.

    Accesso all'Account Google

  4. Dopo che l'utente fa clic sul pulsante Avanti, un token ID viene condiviso con il tuo sito web.