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. Ciò vale in particolar modo per le persone con connessioni deboli, su dispositivi mobili, di fretta o sotto stress. I moduli di accesso mal progettati generano frequenze di rimbalzo elevate. Ogni rimbalzo potrebbe comportare la perdita e il disagio dell'utente, non solo la mancata opportunità di accesso.

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 il caricamento delle pagine e il deployment del sito web.
• Inserisci l'accesso in un proprio elemento <form>.
• Assicurati che l'invio del modulo sia andato a buon fine.
• Usa autocomplete="new-password" e id="new-password" per inserire la password nel modulo di registrazione e per la nuova password in un modulo di reimpostazione della password.
• Usa autocomplete="current-password" e id="current-password" per l'inserimento della password di accesso.
• Fornisci la funzionalità Mostra password.
• Usa aria-label e aria-describedby per l'inserimento delle password.
• Non raddoppiare gli input.
• Progetta i moduli in modo che la tastiera 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 accesso.
• Test sul campo e nel lab: crea analisi delle pagine, analisi delle interazioni e misurazione delle prestazioni incentrata sugli utenti nel tuo flusso di registrazione e accesso.
• 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>. Abilitano la funzionalità integrata del browser, migliorano l'accessibilità e aggiungono significato al markup.

Formato <form>

Potresti avere la tentazione di eseguire il wrapping degli input in un elemento <div> e di gestire l'invio dei dati di input esclusivamente con JavaScript. In genere è meglio utilizzare un elemento <form> normale e vecchio. Ciò rende il tuo sito accessibile a screen reader e altri dispositivi di assistenza, attiva una vasta gamma di funzionalità integrate nel browser, semplifica la creazione di accessi funzionali di base per i browser meno recenti e può continuare a funzionare anche in caso di errori di JavaScript.

Formato <label>

Per etichettare un input, utilizza una <label>.

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

Per due motivi:

• Toccando o facendo clic su un'etichetta, lo stato attivo viene spostato sull'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 l'etichetta o l'input dell'etichetta viene attivato.

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

Probabilmente è meglio applicare le etichette sopra gli input. Ciò consente una progettazione coerente su dispositivi mobili e desktop e, secondo la ricerca sull'IA di Google, consente agli utenti di analizzare più rapidamente. Riceverai etichette e input a larghezza intera e non devi regolare la larghezza dell'etichetta e dell'input per il testo dell'etichetta.

Apri glitch label-position su un dispositivo mobile per vedere tu stesso.

Formato <button>

Usa <button> per i pulsanti. Gli elementi pulsante offrono un comportamento accessibile e funzionalità integrate per l'invio di moduli, inoltre possono essere facilmente definiti. È inutile utilizzare un elemento <div> o un altro elemento che finge di essere un pulsante.

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

Assicurati che l'invio del modulo vada a buon fine

Aiuta i gestori delle password a comprendere che è stato inviato un modulo. Ci sono due modi per farlo:

• 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 l'esito positivo per l'utente.

Potresti 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 del cliente. Gli utenti potrebbero perdersi qualcosa nel modulo, quindi provare ripetutamente a toccare il pulsante Accedi (disattivato) e pensare 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 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 le percentuali di abbandono. Inoltre, fare due volte la richiesta non ha senso se i browser compilano automaticamente gli indirizzi email o suggeriscono password efficaci. È preferibile consentire agli utenti di confermare il proprio indirizzo email (dovrai farlo comunque) e facilitare la reimpostazione della password, se necessario.

Utilizzare al meglio gli attributi dell'elemento

È 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 il carattere type="password" per nascondere il testo delle password e consentire al browser di capire che l'input riguarda le 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.

Devi aggiungere 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 Attivare la visualizzazione della password.

Offri agli utenti di dispositivi mobili la tastiera giusta

Usa <input type="email"> per offrire agli utenti di dispositivi mobili una tastiera appropriata e abilita la convalida di base dell'indirizzo email integrata dal browser... senza JavaScript è richiesto.

Se devi utilizzare un numero di telefono anziché un indirizzo email, <input type="tel"> attiva il tastierino del telefono sui dispositivi mobili. Puoi anche utilizzare l'attributo inputmode dove necessario: inputmode="numeric" è l'ideale per i numeri PIN. Tutto quello che hai sempre voluto sapere sulla modalità di immissione contiene ulteriori dettagli.

Evitare che la tastiera mobile ostruisca il pulsante Accedi

Purtroppo, se non fai 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 sotto.

Esegui il test su un'ampia 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 vasta gamma di dispositivi e browser reali.

Considera l'uso di due pagine

Alcuni siti (inclusi Amazon e eBay) evitano il problema chiedendo email/telefono e password su due pagine. Inoltre, questo approccio semplifica l'esperienza, poiché all'utente viene assegnato un unico 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 forzare l'utente a passare a una nuova pagina tra l'inserimento di indirizzo email e 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 dei moduli per le 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 gli input di compilazione automatica, in modo che gli utenti non debbano ricordare di inserire i valori di indirizzo email e password. Questo è particolarmente importante sui dispositivi mobili e cruciale per gli input email, che generano alti tassi di abbandono.

Questo processo si compone di due parti:

1. Gli attributi autocomplete, name, id e type aiutano i browser a comprendere il ruolo degli input per archiviare dati che possono essere utilizzati in seguito per la compilazione automatica. Per consentire la memorizzazione dei dati per la compilazione automatica, i browser moderni richiedono inoltre 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 <modulo> con un pulsante submit.

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

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

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

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

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

Usa 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 la vecchia password dell'utente in un modulo di modifica della password. In questo modo indichi 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" …>

Assistenza per i gestori delle password

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

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

Le password del browser e i sistemi di compilazione automatica non sono semplici. Gli algoritmi per le previsioni, l'archiviazione e la visualizzazione dei valori non sono standardizzati e variano da una piattaforma all'altra. Ad esempio, come ha sottolineato Hidde de Vries: "Il gestore delle password di Firefox completa le sue euristiche con un sistema di ricette".

Compilazione automatica: cosa devono sapere gli sviluppatori web, ma non hanno molte più informazioni sull'uso di name e autocomplete. La specifica HTML elenca tutti i 59 valori possibili.

Attiva il browser per suggerire una password efficace

I browser moderni usano 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 univoche efficaci è disponibile in Safari sin dalla versione 12.0).

Grazie ai generatori di password integrati nei browser, utenti e sviluppatori non devono capire cos'è una "password efficace". Poiché i browser possono memorizzare le password in modo sicuro e compilarle automaticamente in base alle esigenze, non è necessario che gli utenti le ricordino o le inseriscano. Incoraggiare gli utenti a sfruttare i generatori di password integrati nel browser significa anche che è più probabile che usino una password univoca ed efficace sul tuo sito ed è meno probabile che riutilizzino una password che potrebbe essere compromessa altrove.

Aiuta a impedire agli utenti di mancare accidentalmente input

Aggiungi l'attributo required ai campi dell'indirizzo 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 tutto ciò che riguardano gli elementi e i pulsanti di input sono troppo piccole, 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 e la spaziatura interna predefinite 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 è 7-10 mm. Le linee guida dell'interfaccia Apple suggeriscono 48 x 48 px, mentre il W3C suggerisce almeno 44 x 44 pixel CSS. In questa base, aggiungi (almeno) circa 15 px di spaziatura interna per gli elementi di input e i pulsanti per i dispositivi mobili e circa 10 px per i computer. Prova a usare un dispositivo mobile reale e un dito o pollice vero. Dovresti riuscire a toccare senza problemi ogni input e pulsante.

I target dei tocchi non hanno dimensioni appropriate. 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 e vedrai molte immagini degli indici. Tuttavia, nel mondo reale molte persone usano i pollici per interagire con il telefono. I pollici sono più grandi degli indicatori e il controllo è meno preciso. Un motivo in più per i touch target di dimensioni adeguate.

Ingrandisci il testo

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

I browser di piattaforme diverse misurano i caratteri in modo diverso, quindi è difficile specificare una dimensione particolare del carattere che funzioni bene ovunque. Un breve sondaggio sui siti web popolari mostra le dimensioni di 13-16 pixel sui computer: far corrispondere queste dimensioni fisiche è un buon minimo per il testo sui dispositivi mobili.

Ciò significa che devi utilizzare dimensioni in pixel maggiori sui dispositivi mobili: il formato 16px su Chrome per computer è abbastanza leggibile, ma anche con una buona visione è 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 ti consigliamo di verificarlo con amici o colleghi ipovedenti.

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

Fornisci abbastanza spazio tra gli input

Aggiungi un margine sufficiente per far funzionare gli input allo stesso modo dei touch target. In altre parole, cerca di avere un margine di circa un dito.

Assicurati che gli input siano chiaramente visibili

Lo stile predefinito dei bordi 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 è usare #ccc o un bordo più scuro.

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

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

Utilizzare JavaScript dove necessario

Attiva/disattiva visualizzazione password

Dovresti aggiungere un pulsante di attivazione/disattivazione Mostra password per consentire agli utenti di controllare il testo inserito. La fruibilità è limitata quando gli utenti non possono visualizzare il testo che hanno inserito. Al momento non esiste un modo integrato per eseguire questa operazione, anche se sono previsti piani per 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 rendere 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:

Rendi accessibili le immissioni delle password

Utilizza aria-describedby per delineare le regole delle 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 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 funzioni ARIA in azione nel seguente Glitch:

La sezione Creazione di moduli accessibili offre altri suggerimenti su come 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 per eseguire una convalida più efficace mentre gli utenti inseriscono i dati e quando tentano di inviare il modulo.

Il passaggio 5 del codelab del modulo di accesso utilizza l'API di convalida del vincolo (ampiamente supportata) per aggiungere una convalida personalizzata mediante 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 è possibile misurare, non si può migliorare" è particolarmente vero per i moduli di registrazione e accesso. Devi impostare gli obiettivi, misurare il successo, migliorare il tuo sito e ripetere.

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

• Analisi della pagina: visualizzazioni di pagina di registrazione e accesso, frequenze di rimbalzo e uscite.
• Analisi dell'interazione: canalizzazioni dell'obiettivo (in cui gli utenti abbandonano il flusso di accesso?) ed eventi (quali azioni eseguono gli utenti quando interagiscono con i moduli?)
• Prestazioni del sito web: metriche incentrate sull'utente (i moduli di registrazione e accesso sono lenti per qualche motivo e, in tal caso, qual è la causa?).

Ti consigliamo inoltre di implementare i 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 formulazioni chiare, ad esempio Accedi, Crea account o Registrati.
• Punta alla massima concentrazione. I moduli di registrazione non sono un modo per distrarre le persone con offerte e altre funzionalità del sito.
• Riduci la complessità della procedura di registrazione. Raccogliere altri dati utente, ad esempio indirizzi o dettagli delle carte di credito, solo quando gli utenti vedono un chiaro vantaggio dalla fornitura di tali dati.
• Prima che gli utenti inizino a compilare il modulo di registrazione, spiega chiaramente 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 invece che con un indirizzo email, dato che alcuni potrebbero non utilizzare l'email.
• Consenti agli utenti di reimpostare facilmente la password e fai in modo che il link Non ricordi la tua password? sia ben visibile.
• Link ai documenti dei Termini di servizio e delle norme sulla privacy: spiega agli utenti sin dall'inizio come 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 lingua, caratteri e 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 del modulo più efficaci
• Creazione di moduli accessibili
• Semplificare il 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.