UX pulsante Accedi con Google

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

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.
Un pulsante personalizzato che mostra il nome di un singolo Account Google.
  • 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.
Un pulsante personalizzato con una freccia elenco.
  • Nessuna sessione: non esiste una sessione da parte di Google, oppure nessuna delle sessioni ha ancora approvato il cliente.
Un pulsante "Accedi con Google" senza informazioni personalizzate.

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.

Un pulsante personalizzato con nome e indirizzo email.

Principali percorsi dell'utente

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.

    Un pulsante "Accedi con Google" senza informazioni personalizzate.

  2. La pagina del selettore account.

    Pagina del selettore account in una sessione iniziale

  3. La pagina Consenso dei nuovi utenti.

    Pulsante Consenso e accesso di 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 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.

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

Percorso dei nuovi utenti 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 di Google.

    Email account Google

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

    Accesso all'Account Google

  4. La pagina Consenso dei nuovi utenti.

    Pulsante Consenso e accesso di 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 di Google.

    Email account Google

  3. La seconda pagina per aggiungere una nuova sessione di 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.