Best practice per i moduli di accesso

Utilizza le funzionalità del browser multipiattaforma per creare moduli di accesso sicuri, accessibili e facili da usare.

Sam Dutton

Se gli utenti devono accedere al tuo sito, un buon design del modulo di accesso è fondamentale. Questo è particolarmente vero per le persone con connessioni scadenti, su dispositivi mobili, che hanno fretta o sono sotto stress. I moduli di accesso progettati male hanno frequenze di rimbalzo elevate. Ogni rimbalzo potrebbe significare un utente perso e scontento, non solo un'opportunità di accesso mancata.

Ecco un esempio di un semplice modulo di accesso che mostra tutte le best practice:

Elenco di controllo

• Utilizza elementi HTML significativi: <form>, <input>, <label> e <button>.
• Etichetta ogni input con un <label>.
• Utilizza gli attributi degli elementi per accedere alle funzionalità integrate del browser: type, name, autocomplete, required.
• Assegna agli attributi di input name e id valori stabili che non cambiano tra i caricamenti pagina o i deployment del sito web.
• Inserisci l'accesso nel relativo elemento <form>.
• Assicurati che l'invio del modulo vada a buon fine.
• Utilizza autocomplete="new-password" e id="new-password" per l'inserimento della password in un modulo di registrazione e per la nuova password in un modulo di reimpostazione della password.
• Utilizza autocomplete="current-password" e id="current-password" per l'inserimento della password di accesso.
• Fornire la funzionalità Mostra password.
• Utilizza aria-label e aria-describedby per gli input delle password.
• Non raddoppiare gli input.
• Progetta i moduli in modo che la tastiera mobile non oscuri gli input o i pulsanti.
• Assicurati che i moduli siano utilizzabili su dispositivi mobili: utilizza un testo leggibile e assicurati che gli input e i pulsanti siano abbastanza grandi da funzionare come touch target.
• Mantieni il branding e lo stile nelle pagine di registrazione e di accesso.
• Esegui test sia sul campo che in laboratorio: integra l'analisi delle pagine, l'analisi delle interazioni e la misurazione delle prestazioni incentrate sugli utenti nel flusso di registrazione e accesso.
• Esegui test su browser e dispositivi: il comportamento dei moduli varia in modo significativo tra le piattaforme.

Utilizza codice HTML significativo

Utilizza elementi creati per l'attività: <form>, <label> e <button>. Questi elementi attivano la funzionalità integrata del browser, migliorano l'accessibilità e aggiungono significato al markup.

Utilizza <form>

Potresti avere la tentazione di inserire gli input in un <div> e gestire l'invio dei dati di input esclusivamente con JavaScript. In genere è meglio utilizzare un semplice elemento <form>. In questo modo, il tuo sito è accessibile agli screen reader e ad altri dispositivi di assistenza, viene abilitata una serie di funzionalità integrate del browser, è più semplice creare un accesso funzionale di base per i browser meno recenti e il sito può continuare a funzionare anche se JavaScript non funziona.

Utilizza <label>

Per etichettare un input, utilizza un <label>.

<label for="email">Email</label>
<input id="email" …>

Per due motivi:

• Un tocco o un clic su un'etichetta sposta lo stato attivo sul relativo input. Associa un'etichetta a un input utilizzando l'attributo for dell'etichetta con l'attributo name o id dell'input.
• Gli screen reader annunciano il testo dell'etichetta quando l'etichetta o l'input dell'etichetta ricevono lo stato attivo.

Non utilizzare i segnaposto come etichette di input. Le persone tendono a dimenticare lo scopo dell'input una volta che hanno iniziato a inserire il testo, soprattutto se si distraggono ("Stavo inserendo un indirizzo email, un numero di telefono o un ID account?"). Esistono molti altri potenziali problemi con i segnaposto: se non ti convincono, consulta Don't Use The Placeholder Attribute e Placeholders in Form Fields Are Harmful.

Probabilmente è meglio inserire le etichette sopra gli input. In questo modo, il design è coerente su dispositivi mobili e computer e, secondo la ricerca di Google AI, consente agli utenti di scansionare più rapidamente. In questo modo, le etichette e gli input vengono visualizzati a larghezza intera e non è necessario regolare la larghezza delle etichette e degli input per adattarli al testo delle etichette.

Apri la demo label-position su un dispositivo mobile per vedere di persona.

Utilizza <button>

Utilizza <button> per i pulsanti. Gli elementi dei pulsanti forniscono un comportamento accessibile e una funzionalità di invio dei moduli integrata e possono essere facilmente personalizzati. Non ha senso utilizzare un elemento <div> o un altro elemento che finge di essere un pulsante.

Assicurati che il pulsante di invio indichi la sua funzione. Ad esempio, Crea account o Accedi, non Invia o Inizia.

Assicurati che l'invio del modulo vada a buon fine

Aiuta i gestori delle password a capire che un modulo è stato inviato. Puoi farlo in due modi:

• Naviga a un'altra pagina.
• Emula la navigazione con History.pushState() o History.replaceState() e rimuovi il modulo della password.

Con una richiesta XMLHttpRequest o fetch, assicurati che l'accesso riuscito venga segnalato nella risposta e gestito rimuovendo il modulo dal DOM e indicando l'esito positivo all'utente.

Valuta la possibilità di disattivare il pulsante Accedi dopo che l'utente lo ha toccato o selezionato. Molti utenti fanno clic sui pulsanti più volte, anche su siti veloci e reattivi. Questo rallenta le interazioni e aumenta il carico del server.

Al contrario, non disattivare l'invio del modulo in attesa dell'input dell'utente. Ad esempio, non disattivare il pulsante Accedi se gli utenti non hanno inserito il PIN cliente. Gli utenti potrebbero dimenticare di compilare un campo del modulo e provare a toccare ripetutamente il pulsante Accedi (disattivato), pensando che non funzioni. Come minimo, se devi disattivare l'invio del modulo, spiega all'utente cosa manca quando fa clic sul pulsante disattivato.

Non raddoppiare gli input

Alcuni siti obbligano gli utenti a inserire due volte l'indirizzo email o la password. Questo potrebbe ridurre gli errori per alcuni utenti, ma comporta un lavoro aggiuntivo per tutti gli utenti e aumenta i tassi di abbandono. Inoltre, chiedere due volte non ha senso se i browser compilano automaticamente gli indirizzi email o suggeriscono password efficaci. È meglio consentire agli utenti di confermare il proprio indirizzo email (cosa che dovrai fare comunque) e semplificare la reimpostazione della password, se necessario.

Sfrutta al meglio gli attributi degli elementi

È qui che avviene la magia. I browser dispongono di diverse funzionalità integrate utili che utilizzano gli attributi degli elementi di input.

Mantieni private le password, ma consenti agli utenti di visualizzarle se lo desiderano

Gli input delle password devono avere type="password" per nascondere il testo della password e aiutare il browser a capire che l'input è per le password. (Tieni presente che i browser utilizzano una serie di tecniche per comprendere i ruoli di input e decidere se offrire o meno la possibilità di salvare le password.)

Dovresti aggiungere un pulsante di attivazione/disattivazione Mostra password per consentire agli utenti di controllare il testo inserito e non dimenticare di aggiungere un link Password dimenticata. Consulta Attiva la visualizzazione della password.

Fornisci agli utenti di dispositivi mobili la tastiera giusta

Utilizza <input type="email"> per fornire agli utenti di dispositivi mobili una tastiera appropriata e attivare la convalida di base degli indirizzi email integrata nel browser… non è necessario JavaScript.

Se devi utilizzare un numero di telefono anziché un indirizzo email, <input type="tel"> attiva una tastiera telefonica sui dispositivi mobili. Puoi anche utilizzare l'attributo inputmode dove necessario: inputmode="numeric" è ideale per i numeri PIN. Everything You Ever Wanted to Know About inputmode contiene maggiori dettagli.

Impedisci alla tastiera mobile di ostruire il pulsante Accedi

Purtroppo, se non presti attenzione, le tastiere mobile potrebbero coprire il modulo o, peggio, ostruire parzialmente il pulsante Accedi. Gli utenti potrebbero arrendersi prima di capire cosa è successo.

Se possibile, evita questo problema mostrando solo i campi di immissione dell'indirizzo email (o del numero di telefono) e della password e il pulsante Accedi nella parte superiore della pagina di accesso. Inserisci altri contenuti sotto.

Esegui test su una serie di dispositivi

Dovrai eseguire test su una serie di dispositivi per il tuo pubblico di destinazione e apportare le modifiche necessarie. BrowserStack consente di eseguire test senza costi per i progetti open source su una serie di dispositivi e browser reali.

Valuta l'utilizzo di due pagine

Alcuni siti (tra cui Amazon ed eBay) evitano il problema chiedendo l'indirizzo email (o il numero di telefono) e la password su due pagine. Questo approccio semplifica anche l'esperienza: l'utente deve eseguire una sola operazione alla volta.

Idealmente, questo dovrebbe essere implementato con un singolo <form>. Utilizza JavaScript per visualizzare inizialmente solo l'input dell'email, quindi nascondilo e mostra l'input della password. Se devi obbligare l'utente ad andare su una nuova pagina tra l'inserimento dell'indirizzo email e della password, il modulo nella seconda pagina deve avere un elemento di input nascosto con il valore dell'indirizzo email, per consentire ai gestori delle password di memorizzare il valore corretto. Stili dei moduli per le password supportati da Chromium fornisce un esempio di codice.

Aiuta gli utenti a evitare di reinserire i dati

Puoi aiutare i browser a memorizzare i dati correttamente e a compilare automaticamente gli input, in modo che gli utenti non debbano ricordarsi di inserire i valori di email e password. Questo è particolarmente importante sui dispositivi mobili e fondamentale per gli input email, che registrano tassi di abbandono elevati.

Ci sono due parti:

1. Gli attributi autocomplete, name, id e type aiutano i browser a comprendere il ruolo degli input per archiviare i dati che possono essere utilizzati in un secondo momento per la compilazione automatica. Per consentire la memorizzazione dei dati per la compilazione automatica, i browser moderni richiedono anche che gli input abbiano un valore name o id stabile (non generato in modo casuale a ogni caricamento pagina o deployment del sito) e che siano in un <form> con un pulsante submit.

2. L'attributo autocomplete aiuta i browser a compilare automaticamente gli input utilizzando i dati memorizzati.

Per gli input email, utilizza autocomplete="username", poiché username viene riconosciuto dai gestori delle password nei browser moderni, anche se dovresti utilizzare type="email" e potresti voler utilizzare id="email" e name="email".

Per gli input delle password, utilizza i valori autocomplete e id appropriati per aiutare i browser a distinguere tra password nuove e correnti.

Usa autocomplete="new-password" e id="new-password" per una nuova password

• Utilizza autocomplete="new-password" e id="new-password" per l'inserimento della password in un modulo di registrazione o per la nuova password in un modulo di modifica della password.

Utilizza autocomplete="current-password" e id="current-password" per una password esistente

• Utilizza autocomplete="current-password" e id="current-password" per l'input della password in un modulo di accesso o per l'input della vecchia password dell'utente in un modulo di modifica della password. In questo modo, il browser capisce che vuoi utilizzare la password corrente memorizzata per il sito.

Per un modulo di registrazione:

<input type="password" autocomplete="new-password" id="new-password" …>

Per l'accesso:

<input type="password" autocomplete="current-password" id="current-password" …>

Supporto dei gestori delle password

I diversi browser gestiscono la compilazione automatica delle email e i suggerimenti per le password in modo leggermente diverso, ma gli effetti sono molto simili. Su Safari 11 e versioni successive su computer, ad esempio, viene visualizzato il Gestore delle password e poi viene utilizzata l'autenticazione biometrica (riconoscimento facciale o dell'impronta), se disponibile.

Chrome su computer mostra i suggerimenti per l'indirizzo email, il Gestore delle password e la compilazione automatica della password.

I sistemi di password e compilazione automatica dei browser non sono semplici. Gli algoritmi per indovinare, memorizzare e visualizzare i valori non sono standardizzati e variano da piattaforma a piattaforma. Ad esempio, come sottolineato da Hidde de Vries: "Il Gestore delle password di Firefox integra le sue euristiche con un sistema di formule".

Compilazione automatica: cosa dovrebbero sapere gli sviluppatori web, ma non sanno contiene molte altre informazioni sull'utilizzo di name e autocomplete. La specifica HTML elenca tutti i 59 valori possibili.

Consenti al browser di suggerire una password efficace

I browser moderni utilizzano l'euristica per decidere quando mostrare la UI del gestore delle password e suggerire una password efficace.

Ecco come funziona Safari su computer.

(Il suggerimento di password efficaci e univoche è disponibile in Safari dalla versione 12.0).

I generatori di password integrati nel browser evitano a utenti e sviluppatori di dover capire cosa sia una "password efficace". Poiché i browser possono memorizzare le password in modo sicuro e compilarle automaticamente quando necessario, gli utenti non devono ricordarle o inserirle. Incoraggiare gli utenti a utilizzare i generatori di password integrati nel browser significa anche che è più probabile che utilizzino una password efficace e univoca sul tuo sito e meno probabile che riutilizzino una password che potrebbe essere compromessa altrove.

Aiuta gli utenti a non perdere accidentalmente gli input

Aggiungi l'attributo required ai campi email e password. I browser moderni richiedono e impostano automaticamente lo stato attivo per i dati mancanti. Non è necessario JavaScript.

Progetta per le dita

La dimensione predefinita del browser per quasi tutto ciò che riguarda gli elementi di input e i pulsanti è troppo piccola, soprattutto sui dispositivi mobili. Può sembrare ovvio, ma è un problema comune con i moduli di accesso su molti siti.

Assicurati che gli input e i pulsanti siano abbastanza grandi

Le dimensioni e il padding predefiniti per gli input e i pulsanti sono troppo piccoli su computer e ancora peggio su dispositivi mobili.

Secondo le indicazioni sull'accessibilità di Android, le dimensioni target consigliate per gli oggetti touchscreen sono 7-10 mm. Le linee guida per l'interfaccia di Apple suggeriscono 48 x 48 px, mentre il W3C suggerisce almeno 44 x 44 pixel CSS. Su questa base, aggiungi (almeno) circa 15 px di spaziatura interna agli elementi di input e ai pulsanti per i dispositivi mobili e circa 10 px per i computer. Prova a farlo con un dispositivo mobile reale e un dito o un pollice reale. Dovresti riuscire a toccare comodamente tutti gli input e i pulsanti.

Il controllo di Lighthouse Le dimensioni dei target di pressione non sono adeguate può aiutarti ad automatizzare il processo di rilevamento degli elementi di input troppo piccoli.

Progetta per i pollici

Cerca touch target e vedrai molte immagini di indici. Tuttavia, nel mondo reale, molte persone usano i pollici per interagire con gli smartphone. I pollici sono più grandi degli indici e il controllo è meno preciso. Un motivo in più per avere touch target di dimensioni adeguate.

Usa un testo abbastanza grande

Come per le dimensioni e il padding, la dimensione predefinita dei caratteri del browser per gli elementi di input e i pulsanti è troppo piccola, in particolare sui dispositivi mobili.

I browser su piattaforme diverse dimensionano i caratteri in modo diverso, quindi è difficile specificare una dimensione del carattere particolare che funzioni bene ovunque. Una rapida indagine sui siti web più popolari mostra dimensioni di 13-16 pixel su computer: l'utilizzo di queste dimensioni fisiche è un buon minimo per il testo sui dispositivi mobili.

Ciò significa che devi utilizzare una dimensione in pixel maggiore sui dispositivi mobili: 16px su Chrome per computer è abbastanza leggibile, ma anche con una buona vista è difficile leggere il testo 16px su Chrome per Android. Puoi impostare dimensioni dei pixel dei caratteri diverse per dimensioni dell'area visibile diverse utilizzando le query supporti. 20px è un valore corretto per i dispositivi mobili, ma dovresti testarlo con amici o colleghi con problemi di vista.

Il controllo di Lighthouse Il documento non utilizza dimensioni dei caratteri leggibili può aiutarti ad automatizzare il processo di rilevamento del testo troppo piccolo.

Prevedi uno spazio sufficiente tra gli input

Aggiungi un margine sufficiente per far sì che gli input funzionino bene come target di tocco. In altre parole, cerca di lasciare un margine di circa un dito.

Assicurati che gli input siano chiaramente visibili

Lo stile predefinito del bordo degli input li rende difficili da vedere. Sono quasi invisibili su alcune piattaforme, come Chrome per Android.

Oltre al padding, aggiungi un bordo: su uno sfondo bianco, una buona regola generale è utilizzare #ccc o un colore più scuro.

Utilizza le funzionalità integrate del browser per avvisare l'utente della presenza di valori di input non validi

I browser dispongono di funzionalità integrate per eseguire la convalida di base dei moduli per gli input con un attributo type. I browser avvisano quando invii un modulo con un valore non valido e impostano lo stato attivo sull'input problematico.

Puoi utilizzare il selettore CSS :invalid per evidenziare i dati non validi. Utilizza :not(:placeholder-shown) per evitare di selezionare input senza contenuti.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

Prova diversi modi per evidenziare gli input con valori non validi.

Utilizza JavaScript dove necessario

Attiva/disattiva visualizzazione password

Devi aggiungere un pulsante di attivazione/disattivazione Mostra password per consentire agli utenti di controllare il testo inserito. L'usabilità ne risente quando gli utenti non riescono a vedere il testo che hanno inserito. Al momento non esiste un modo integrato per farlo, anche se è prevista l'implementazione. Dovrai utilizzare JavaScript.

Il seguente codice utilizza un pulsante di testo per aggiungere la funzionalità Mostra password.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

Ecco il CSS per far sembrare il pulsante un testo normale:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

E il codice JavaScript per mostrare la password:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

Ecco il risultato finale:

Rendi accessibili gli input delle password

Utilizza aria-describedby per delineare le regole per le password assegnandogli l'ID dell'elemento che descrive i vincoli. Gli screen reader forniscono il testo dell'etichetta, il tipo di input (password) e poi la descrizione.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

Quando aggiungi la funzionalità Mostra password, assicurati di includere un aria-label per avvisare che la password verrà visualizzata. In caso contrario, gli utenti potrebbero rivelare inavvertitamente le password.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

Puoi vedere entrambe le funzionalità ARIA in azione nella seguente demo:

La pagina Creare moduli accessibili contiene altri suggerimenti per rendere i moduli accessibili.

Convalida in tempo reale e prima dell'invio

Gli elementi e gli attributi dei moduli HTML hanno funzionalità integrate per la convalida di base, ma devi anche utilizzare JavaScript per eseguire una convalida più efficace mentre gli utenti inseriscono i dati e quando tentano di inviare il modulo.

Il passaggio 5 del codelab sul modulo di accesso utilizza l'API Constraint Validation (che è ampiamente supportata) per aggiungere la convalida personalizzata utilizzando l'interfaccia utente del browser integrata per impostare lo stato attivo e visualizzare i prompt.

Scopri di più: Utilizza JavaScript per una convalida in tempo reale più complessa.

Analytics e RUM

"Ciò che non puoi misurare, non puoi migliorare" è particolarmente vero per i moduli di registrazione e di accesso. Devi impostare gli obiettivi, misurare il successo, migliorare il tuo sito e ripetere.

I test di usabilità scontati possono essere utili per provare le modifiche, ma avrai bisogno di dati reali per capire davvero in che modo gli utenti utilizzano i moduli di registrazione e di accesso:

• Analisi delle pagine: visualizzazioni di pagina, frequenze di rimbalzo e uscite dalle pagine di registrazione e accesso.
• Analisi delle interazioni: canalizzazioni degli obiettivi (dove gli utenti abbandonano il flusso di accesso o registrazione?) ed eventi (quali azioni intraprendono gli utenti quando interagiscono con i tuoi moduli?)
• Rendimento del sito web: metriche incentrate sugli utenti (i moduli di registrazione e accesso sono lenti per qualche motivo e, in tal caso, qual è la causa?).

Potresti anche prendere in considerazione l'implementazione di test A/B per provare diversi approcci alla registrazione e all'accesso, nonché di rilasci graduali per convalidare le modifiche su un sottoinsieme di utenti prima di rilasciarle a tutti gli utenti.

Linee guida generali

Una UI e una UX ben progettate possono ridurre l'abbandono del modulo di accesso:

• Non costringere gli utenti a cercare il pulsante di accesso. Inserisci un link al modulo di accesso nella parte superiore della pagina, utilizzando diciture di facile comprensione come Accedi, Crea account o Registrati.
• Mantieni la concentrazione. I moduli di registrazione non sono il posto giusto per distrarre gli utenti con offerte e altre funzionalità del sito.
• Riduci al minimo la complessità della registrazione. Raccogli altri dati utente (come indirizzi o dati della carta di credito) solo quando gli utenti vedono un chiaro vantaggio nel fornire questi dati.
• Prima che gli utenti inizino a compilare il modulo di registrazione, chiarisci qual è la proposta di valore. Quali vantaggi ottengono accedendo? Offri agli utenti incentivi concreti per completare la registrazione.
• Se possibile, consenti agli utenti di identificarsi con un numero di cellulare anziché con un indirizzo email, poiché alcuni utenti potrebbero non utilizzare l'email.
• Semplifica la reimpostazione della password per gli utenti e rendi evidente il link Hai dimenticato la password?
• Link ai documenti relativi ai Termini di servizio e alle norme sulla privacy: spiega chiaramente agli utenti fin dall'inizio come proteggi i loro dati.
• Includi il logo e il nome della tua azienda o organizzazione nelle pagine di registrazione e accesso e assicurati che la lingua, i caratteri e gli stili corrispondano al resto del sito. Alcuni moduli non sembrano appartenere allo stesso sito degli altri contenuti, soprattutto se hanno un URL molto diverso.

Continua a imparare

• Create Amazing Forms
• Best practice per la progettazione di moduli per dispositivi mobili
• Controlli dei moduli più efficaci
• Creazione di moduli accessibili
• Semplificazione del flusso di accesso utilizzando l'API Credential Management
• Verifica i numeri di telefono sul web con l'API WebOTP