UX pulsante Accedi con Google

Rendering dei pulsanti

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

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

• È presente almeno una sessione Google attiva.
• Esiste un account corrispondente sul tuo sito web.

Un pulsante personalizzato offre agli utenti un'indicazione rapida dello stato della sessione, sia su Google che sul tuo sito web, prima di fare clic sul pulsante. Ciò è particolarmente utile per gli utenti finali che visitano il tuo sito web solo occasionalmente. Possono dimenticare se un account è stato creato o meno e in che modo. Un pulsante personalizzato ricorda che è già stato utilizzato Accedi con Google. Pertanto, consente di 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: c'è solo una sessione da parte di Google. Questa sessione approva il cliente e nel tuo sito web è presente un account corrispondente.

• Più sessioni: esistono più sessioni lato Google. Queste sessioni approvano il client. L'approvazione è indicata dalla freccia elenco accanto all'account visualizzato. Almeno una sessione ha un account corrispondente sul tuo sito web.

• Nessuna sessione: non esiste una sessione da parte di Google, oppure nessuna delle sessioni ha ancora approvato il cliente.

Il pulsante personalizzato verrà visualizzato automaticamente quando lo stato della sessione è appropriato, a meno che le impostazioni del pulsante non ne consentano la visualizzazione. Al momento, 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 saranno ellittici quando sono troppo lunghi per essere visualizzati all'interno del pulsante.

Punto chiave: lo strumento per sviluppatori Code Generator può aiutarti a progettare il pulsante Accedi con Google in modo interattivo e a generare il codice.

Principali percorsi dell'utente

Punto chiave:indica se un pulsante personalizzato o un pulsante di testo generico non ha alcun impatto sui flussi UX dopo aver fatto clic sul pulsante. L'account visualizzato nel pulsante personalizzato non verrà selezionato automaticamente.

Punto chiave: il flusso del pulsante Accedi con Google non supporta l'accesso automatico. Per selezionare la sessione giusta, è richiesta un'azione utente, anche quando è attiva una sola sessione Google.

I percorsi degli utenti variano in base ai seguenti stati.

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

  • Has-Google-session: sui siti web di Google è presente almeno una sessione attiva.
  • Sessione senza Google: non esiste una sessione attiva sui siti web di Google.

• Indica se l'Account Google selezionato ha approvato il sito web all'inizio del percorso dell'utente. I seguenti termini vengono utilizzati per indicare uno stato di approvazione diverso.

  • 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 sulla sessione Google

1. Il pulsante Accedi con Google.

   

2. La pagina del selettore account.

   

3. La pagina Consenso dei nuovi utenti.

   

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

Gli utenti possono aggiungere una nuova sessione di Google facendo clic sul pulsante Utilizza un altro account. Fai riferimento ai percorsi dell'utente No-Google-session di seguito.

Percorso di ritorno della sessione Has Google

1. Il pulsante Accedi con Google.

   

2. La pagina del selettore account.

   

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. Fai riferimento ai percorsi utente "No-Google-session" di seguito.

Percorso dei nuovi utenti senza sessione Google

1. Il pulsante Accedi con Google.

   

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

   

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

   

4. La pagina Consenso dei nuovi utenti.

   

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.

   

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

   

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

   

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