UX pulsante Accedi con Google

Rendering del pulsante

Un pulsante personalizzato mostra le informazioni del profilo per la prima sessione Google che approva il tuo sito web. A una sessione Google approvata è associato un account sul tuo sito web che ha già eseguito l'accesso utilizzando Accedi con Google.

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

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

Un pulsante personalizzato offre agli utenti una rapida indicazione dello stato della sessione, sia sul lato Google sia sul tuo sito web, prima che facciano clic sul pulsante. Ciò è particolarmente utile per gli utenti finali che visitano il tuo sito web solo occasionalmente. Potrebbero dimenticare se un account è stato creato o meno e in che modo. Un pulsante personalizzato ricorda loro che Accedi con Google è già stato utilizzato in precedenza. 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:è presente una sola sessione per Google. La sessione approva il cliente e sul tuo sito web è presente un account corrispondente.

  

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

  

• Nessuna sessione: non esiste alcuna sessione da parte di Google o nessuna delle sessioni ha ancora approvato il client.

  

Il pulsante personalizzato viene visualizzato automaticamente se 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 hanno dei puntini di sospensione quando sono troppo lunghi per essere visualizzati all'interno del pulsante.

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

Percorsi dell'utente chiave

Punto chiave: la visualizzazione di un pulsante personalizzato o di un pulsante di testo generico non influisce sui flussi UX dopo il clic sul pulsante. L'account visualizzato nel pulsante personalizzato non viene selezionato automaticamente.

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

I percorsi degli utenti variano in base ai seguenti stati.

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

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

• Indica se l'Account Google selezionato ha approvato il tuo sito web all'inizio del percorso dell'utente. I seguenti termini vengono utilizzati per indicare i 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 in passato.

Percorso di un nuovo utente con sessione Google

1. Il pulsante Accedi con Google.

   

2. La pagina del selettore account.

   

3. La pagina relativa al consenso del nuovo utente.

   

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

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

Percorso dell'utente di ritorno con sessione Google

1. Il pulsante Accedi con Google.

   

2. La pagina del selettore account.

   

3. Dopo che l'utente sceglie 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 i percorsi degli utenti "Nessuna sessione Google" di seguito.

Percorso di un nuovo utente senza sessione Google

1. Il pulsante Accedi con Google.

   

2. La prima pagina in cui aggiungere una nuova sessione Google.

   

3. La seconda pagina in cui aggiungere una nuova sessione Google.

   

4. La pagina relativa al consenso del nuovo utente.

   

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

Percorso dell'utente di ritorno senza sessione Google

1. Il pulsante Accedi con Google.

   

2. La prima pagina in cui aggiungere una nuova sessione Google.

   

3. La seconda pagina in cui aggiungere una nuova sessione Google.

   

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