Best practice per il modulo di accesso

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

Se gli utenti hanno bisogno di accedere al tuo sito, è fondamentale progettare un modulo di accesso efficace. Questo vale in particolar modo per chi ha una connessione debole, che usa un dispositivo mobile, che va di fretta o che è sotto stress. I moduli di accesso mal progettati generano frequenze di rimbalzo elevate. Ogni rimbalzo potrebbe significare un utente perso e insoddisfatto, non solo un'opportunità di accesso mancato.

Ecco un esempio di modulo di accesso semplice che illustra 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 name e id valori stabili che non cambiano tra un caricamento pagina e l'altro o deployment sul sito web.
• Inserisci l'accesso nel proprio elemento <form>.
• Assicurati che il modulo venga inviato correttamente.
• Usa autocomplete="new-password" e id="new-password" per l'inserimento della password nel modulo di registrazione e per la nuova password in un modulo di reimpostazione della password.
• Utilizza autocomplete="current-password" e id="current-password" per inserire la password di accesso.
• Fornire la funzionalità Mostra password.
• Utilizza aria-label e aria-describedby per l'inserimento delle password.
• Non raddoppiare gli input.
• Progetta i moduli in modo che la tastiera del dispositivo mobile non copra input o pulsanti.
• Assicurati che i moduli siano utilizzabili sui dispositivi mobili: utilizza testo leggibile e assicurati che input e pulsanti siano sufficientemente grandi da poter essere utilizzati come touch target.
• Mantieni il branding e lo stile delle pagine di registrazione e di accesso.
• Test sul campo e nel lab: crea analisi delle pagine, analisi delle interazioni e misurazione delle prestazioni incentrata sugli utenti nel flusso di registrazione e accesso.
• Esegui test su browser e dispositivi diversi: il comportamento del modulo varia notevolmente da una piattaforma all'altra.

Utilizza codice HTML significativo

Utilizza gli elementi creati per il job: <form>, <label> e <button>. Queste abilitano la funzionalità integrata del browser, migliorano l'accessibilità e aggiungono significato al markup.

Utilizza <form>

Potresti avere la tentazione di aggregare gli input in un <div> e gestire l'invio dei dati di input puramente con JavaScript. In genere è meglio utilizzare un vecchio elemento <form> normale. Questo rende il tuo sito accessibile agli screen reader e ad altri dispositivi di assistenza, attiva una serie di funzionalità integrate nel browser, semplifica la creazione di un accesso funzionale di base per i browser meno recenti e può continuare a funzionare anche se JavaScript non funziona.

Utilizza <label>

Per etichettare un input, utilizza un elemento <label>!

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

Per due motivi:

• Toccando o facendo clic su un'etichetta, lo stato attivo si sposta sul relativo input. Associa un'etichetta a un input utilizzando l'attributo for dell'etichetta con name o id dell'input.
• Gli screen reader annunciano il testo dell'etichetta quando viene impostato lo stato attivo sull'etichetta o sull'input dell'etichetta.

Non utilizzare i segnaposto come etichette di input. Le persone possono dimenticarsi dell'input una volta 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 sei convinto, consulta gli articoli Non utilizzare l'attributo segnaposto e I segnaposto nei campi del modulo sono dannosi.

Probabilmente è meglio inserire le etichette sopra gli input. Ciò consente una progettazione coerente su dispositivi mobili e computer e, secondo una ricerca sull'IA di Google, consente agli utenti di analizzare più rapidamente. Ricevi etichette e input a larghezza intera e non devi modificare la larghezza dell'etichetta e dell'input per adattarla al testo dell'etichetta.

Apri l'etichetta Glitch in posizione etichetta su un dispositivo mobile per dargli un'occhiata.

Utilizza <button>

Utilizza <button> per i pulsanti. Gli elementi pulsante offrono un comportamento accessibile e funzionalità integrate per l'invio di moduli e possono essere facilmente definiti. Non ha senso usare un elemento <div> o un altro elemento che finge di essere un pulsante.

Assicurati che il pulsante di invio indichi la funzione corrispondente. Alcuni esempi sono Crea account o Accedi, non Invia o Avvia.

Assicurati che il modulo venga inviato correttamente

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

• Passa 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 sia segnalato nella risposta e gestito eliminando il modulo dal DOM e indicando che l'utente abbia avuto esito positivo.

Valuta la possibilità di disattivare il pulsante Accedi dopo che l'utente lo ha toccato o fatto clic. Molti utenti fanno clic sui pulsanti più volte anche su siti veloci e reattivi. che 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 perdersi qualcosa nel modulo, quindi provare a toccare ripetutamente il pulsante Accedi (disattivato) e pensare che non funzioni. Come minimo, se devi disattivare l'invio di moduli, spiega all'utente cosa manca quando fa clic sul pulsante di disattivazione.

Non raddoppiare gli input

Alcuni siti obbligano gli utenti a inserire indirizzi email o password due volte. Ciò potrebbe ridurre gli errori per alcuni utenti, ma comporta un lavoro aggiuntivo per tutti gli utenti e aumenta i tassi di abbandono. Inoltre, non ha senso chiedere due volte il browser per cui i browser compilano automaticamente gli indirizzi email o suggerire password efficaci. È preferibile consentire agli utenti di confermare il proprio indirizzo email (devi farlo comunque) e consentire loro di reimpostare facilmente la password, se necessario.

Sfruttare al meglio gli attributi degli elementi

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

Mantieni private le password, ma consenti agli utenti di vederle, se vogliono

Gli input delle password devono avere type="password" per nascondere il testo delle password e aiutare il browser a capire che si tratta di password. Tieni presente che i browser utilizzano una varietà di tecniche per comprendere i ruoli di input e decidere se proporre o meno di salvare le password.

Aggiungi un pulsante di attivazione/disattivazione Mostra password per consentire agli utenti di controllare il testo inserito e non dimenticare di aggiungere il link Password dimenticata. Vedi Attivazione della visualizzazione delle password.

Offri agli utenti di dispositivi mobili la tastiera giusta

Usa <input type="email"> per fornire agli utenti di dispositivi mobili una tastiera adeguata e attiva la convalida degli indirizzi email integrata di base dal browser... non è necessario JavaScript.

Se devi utilizzare un numero di telefono anziché un indirizzo email, <input type="tel"> attiva il tastierino del telefono sul dispositivo mobile. Se necessario, puoi anche utilizzare l'attributo inputmode: inputmode="numeric" è l'ideale per i numeri PIN. Tutto quello che hai mai voluto sapere sulla modalità input contiene più dettagli.

Fare in modo che la tastiera del dispositivo mobile non ostruisca il pulsante Accedi

Purtroppo, se non presti attenzione, le tastiere dei dispositivi mobili potrebbero coprire il modulo o, peggio ancora, ostruire parzialmente il pulsante Accedi. Gli utenti possono arrendersi prima di rendersi conto di quello che è successo.

Se possibile, evita che ciò accada visualizzando solo l'indirizzo email/telefono e la password e il pulsante Accedi nella parte superiore della pagina di accesso. Inserisci altri contenuti di seguito.

Esegui il test su una gamma di dispositivi

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

Valuta l'utilizzo di due pagine

Alcuni siti (inclusi Amazon e eBay) evitano il problema richiedendo indirizzo email/telefono e password su due pagine. Questo approccio semplifica anche l'esperienza: all'utente viene richiesto di eseguire un solo compito alla volta.

Idealmente, dovrebbe essere implementato con un singolo <form>. Utilizza JavaScript per visualizzare inizialmente solo l'input dell'email, poi nascondilo e mostra la password. Se devi obbligare l'utente a passare a una nuova pagina tra l'inserimento dell'indirizzo email e della password, il modulo nella seconda pagina deve contenere un elemento di input nascosto con il valore email, per consentire ai gestori delle password di archiviare il valore corretto. Stili moduli password riconosciuti da Chromium fornisce un esempio di codice.

Aiuta gli utenti a evitare di reinserire i dati

Puoi aiutare i browser a memorizzare correttamente i dati e 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 tasso di abbandono elevati.

Si compone di due parti:

1. Gli attributi autocomplete, name, id e type aiutano i browser a comprendere il ruolo degli input al fine di archiviare i dati che possono essere successivamente utilizzati 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 casualmente a ogni caricamento pagina o deployment del sito) e che siano in un <form> con un pulsante submit.

2. L'attributo autocomplete consente ai browser di compilare automaticamente gli input utilizzando i dati memorizzati.

Per gli input dell'email utilizza autocomplete="username", poiché username è riconosciuto dai gestori delle password nei browser moderni, anche se dovresti usare type="email" e id="email" e name="email".

Per l'inserimento delle password, utilizza i valori autocomplete e id appropriati per consentire ai browser di distinguere tra password nuove e attuali.

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.

Usa i criteri autocomplete="current-password" e id="current-password" per una password esistente

• Utilizza autocomplete="current-password" e id="current-password" per l'inserimento della password in un modulo di accesso o per l'inserimento della vecchia password dell'utente in un modulo di modifica della password. In questo modo comunichi al browser che vuoi che utilizzi la password corrente che ha memorizzato 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" …>

Supporta i gestori delle password

I vari browser gestiscono la compilazione automatica delle email e il suggerimento di password in modo leggermente diverso, ma gli effetti sono quasi gli stessi. Su Safari 11 e versioni successive su computer, ad esempio, viene visualizzato il gestore delle password e viene utilizzata l'autenticazione biometrica (impronta o riconoscimento facciale), se disponibile.

Chrome su computer mostra suggerimenti di email, mostra il gestore delle password e compila automaticamente le password.

Le password del browser e i sistemi di compilazione automatica non sono semplici da utilizzare. Gli algoritmi per stimare, archiviare 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 la sua euristica con un sistema di ricette".

Compilazione automatica: cosa dovrebbero sapere gli sviluppatori web, ma non sono disponibili 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 l'interfaccia utente del gestore delle password e suggerire una password efficace.

Ecco come fa Safari su computer.

Il suggerimento di password univoca efficace è disponibile in Safari sin dalla versione 12.0.

Grazie ai generatori di password integrati nel browser, utenti e sviluppatori non devono capire quale sia una "password efficace". Poiché i browser possono memorizzare le password in modo sicuro e compilarle automaticamente se necessario, non è necessario che gli utenti memorizzino o inseriscono le password. Incoraggiare gli utenti a sfruttare i generatori di password integrati nel browser significa anche che è più probabile che utilizzino una password univoca e efficace sul tuo sito e che sia meno propensa a riutilizzare una password che potrebbe essere compromessa altrove.

Contribuisci a evitare che gli input vengano accidentalmente mancanti

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

Progetta per dita e pollici

Le dimensioni predefinite del browser per quasi tutti gli elementi correlati a elementi e pulsanti di input sono troppo ridotte, soprattutto sui dispositivi mobili. Può sembrare scontato, ma è un problema comune con i moduli di accesso su molti siti.

Assicurati che gli input e i pulsanti siano abbastanza grandi

Le dimensioni predefinite e la spaziatura interna per input e pulsanti sono troppo piccole sui computer e peggio ancora sui dispositivi mobili.

In base alle linee guida sull'accessibilità di Android, la dimensione di destinazione consigliata per gli oggetti touchscreen è di 7-10 mm. Le linee guida per l'interfaccia Apple suggeriscono 48 x 48 px e il W3C suggeriscono almeno 44 x 44 pixel CSS. Di conseguenza, aggiungi almeno 15 px di spaziatura interna per inserire elementi e pulsanti per i dispositivi mobili e circa 10 px su desktop. Prova con un dispositivo mobile e un dito o pollice. Dovresti riuscire a toccare agevolmente tutti gli input e i pulsanti.

I target dei tocchi non hanno dimensioni adeguate. Il controllo di Lighthouse può aiutarti ad automatizzare il processo di rilevamento degli elementi di input troppo piccoli.

Progetta per i pollici

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

Il testo deve essere abbastanza grande

Come per le dimensioni e la spaziatura interna, la dimensione predefinita del carattere del browser per gli elementi e i pulsanti di input è troppo piccola, in particolare sui dispositivi mobili.

Le dimensioni dei caratteri nei browser su piattaforme diverse sono diverse, pertanto è difficile specificare una dimensione particolare che si adatti bene ovunque. Un breve sondaggio sui siti web più popolari mostra le dimensioni di 13-16 pixel su computer: corrispondere a 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 diverse dimensioni in pixel dei caratteri per diverse dimensioni dell'area visibile utilizzando le query supporti. 20px funziona direttamente sui dispositivi mobili, ma dovresti testarlo con amici o colleghi ipovedenti.

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

Fornisci spazio sufficiente tra gli input

Aggiungi un margine sufficiente per far funzionare gli input correttamente come i touch target. In altre parole, cerca di avere un margine di circa un dito.

Assicurati che gli input siano chiaramente visibili

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

Oltre alla spaziatura interna, aggiungi un bordo: su uno sfondo bianco, una buona regola generale è utilizzare #ccc o un bordo più scuro.

Utilizza le funzionalità integrate del browser per segnalare valori di input non validi

I browser dispongono di funzionalità integrate per eseguire la convalida di base del modulo 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. Usa :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.

Se necessario, utilizza JavaScript

Attiva/disattiva visualizzazione password

Aggiungi un pulsante di attivazione/disattivazione di Mostra password per consentire agli utenti di verificare il testo inserito. L'usabilità viene limitata quando gli utenti non riescono a visualizzare il testo inserito. Al momento non esiste un modo integrato per eseguire questa operazione, anche se sono previsti dei piani per l'implementazione. Dovrai usare JavaScript.

Il codice seguente 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>

Di seguito è riportato il codice CSS per creare il pulsante in 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:

Rendere accessibili le password

Utilizza aria-describedby per delineare le regole per le password fornendo l'ID dell'elemento che descrive i vincoli. Gli screen reader forniscono il testo dell'etichetta, il tipo di input (password) e 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 inavvertitamente rivelare 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 nel seguente Glitch:

In Creazione di moduli accessibili sono disponibili altri suggerimenti per rendere accessibili i moduli.

Convalida in tempo reale e prima dell'invio

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

Il passaggio 5 del modulo di accesso il codelab utilizza l'API di convalida del vincolo (ampiamente supportata) per aggiungere la convalida personalizzata mediante l'interfaccia utente integrata del browser per impostare lo stato attivo e visualizzare i prompt.

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

Analytics e RUM

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

I test di usabilità degli sconti possono essere utili per provare i cambiamenti, ma avrai bisogno di dati reali per capire davvero l'esperienza degli utenti con i moduli di registrazione e accesso:

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

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

Linee guida generali

Una UI e un'esperienza utente ben strutturate possono ridurre l'abbandono dei moduli di accesso:

• Non costringere gli utenti a cercare l'accesso. Inserisci un link al modulo di accesso nella parte superiore della pagina, utilizzando parole chiare come Accedi, Crea account o Registrati.
• Mantieni la concentrazione. I moduli di registrazione non sono un modo per distrarre gli utenti con offerte e altre funzionalità del sito.
• Riduci al minimo la complessità della procedura di registrazione. Raccogli altri dati utente, ad esempio 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, spiega chiaramente qual è la proposta di valore. Quali vantaggi traggono vantaggio dall'accesso? 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, dato che alcuni utenti potrebbero non utilizzare l'email.
• Consenti agli utenti di reimpostare facilmente la password e rendi evidente il link Hai dimenticato la password?.
• Link ai documenti relativi ai Termini di servizio e alle norme sulla privacy: indica chiaramente agli utenti sin dall'inizio in che modo proteggi i loro dati.
• Includi il logo e il nome della tua azienda o organizzazione nelle pagine di registrazione e di accesso e assicurati che la lingua, i caratteri e gli stili corrispondano al resto del sito. Alcuni moduli non sembrano appartenere allo stesso sito di altri contenuti, soprattutto se hanno un URL molto diverso.

Continua a imparare

• Crea moduli straordinari
• Best practice per la progettazione di moduli per dispositivi mobili
• Controlli modulo più efficaci
• Creare moduli accessibili
• Semplificazione del flusso di accesso utilizzando l'API Credential Management
• Verificare i numeri di telefono sul web con l'API WebOTP

Foto di Meghan Schiereck su Unsplash.