Best practice per il modulo di accesso

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

Sam Dutton

Se gli utenti hanno bisogno di accedere al tuo sito, è consigliabile che i moduli di accesso siano progettati in modo ottimale. in modo critico. Ciò è particolarmente vero per le persone con connessioni scadenti, sui dispositivi mobili, di fretta o sotto stress. I moduli di accesso progettati in modo scorretto generano frequenze di rimbalzo elevate. A ogni rimbalzo potrebbero verificarsi errori nell'utente, non solo in caso di mancato accesso. l'opportunità.

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

Elenco di controllo

• Utilizza elementi HTML significativi: <form>, <input>, <label> e <button>.
• Etichetta ogni input con un <label>.
• Usare gli attributi degli elementi per accedere al browser integrato funzionalità: type, name, autocomplete, required.
• Fornisci valori stabili degli attributi di input name e id che non cambiano tra i caricamenti delle pagine o i deployment dei siti web.
• Assegnare l'accesso nel proprio <form> .
• Assicurati che il modulo venga inviato correttamente.
• Utilizza autocomplete="new-password" e id="new-password" per la password inserita in un modulo di registrazione e 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.
• Fornisci la funzionalità Mostra password.
• Utilizza aria-label e aria-describedby per immissioni di password.
• Non raddoppiare gli input.
• Progettare i moduli in modo che la tastiera del dispositivo mobile non copra gli input o pulsanti.
• Assicurati che i moduli siano utilizzabili sui dispositivi mobili: utilizza testo leggibile e assicurati che gli input e i pulsanti siano sufficientemente grandi da funzionare come touch target.
• Mantieni il branding e lo stile nelle pagine di registrazione e di accesso.
• Test sul campo e in lab: creazione di analisi della pagina, analisi delle interazioni e misurazione del rendimento incentrata sugli utenti nel tuo le procedure di registrazione e accesso.
• Esegui test su browser e dispositivi: il comportamento del modulo può variare in modo significativo sulle varie piattaforme.

Utilizza codice HTML significativo

Utilizza gli elementi creati per il job: <form>, <label> e <button>. Questi consentono funzionalità integrate nel browser, migliorare l'accessibilità e dare un significato al tuo markup dei dati.

Utilizza <form>

Potresti avere la tentazione di aggregare gli input in un <div> e gestire i dati di input l'invio tramite JavaScript. In genere è preferibile utilizzare un modello di base <form> . In questo modo il sito diventa accessibile a screen reader e ad altri screen reader. dispositivi mobili, offre una gamma di funzionalità integrate nel browser, semplifica la creazione accesso funzionale di base per i browser meno recenti e continuerà a funzionare anche JavaScript non funziona.

Utilizza <label>

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

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

Due motivi:

• Il tocco o il clic su un'etichetta sposta lo stato attivo sul relativo input. Associare un'etichetta a un utilizzando l'attributo for dell'etichetta con l'attributo name o id dell'input.
• Gli screen reader enunciano il testo dell'etichetta quando l'etichetta o l'input dell'etichetta viene il focus.

Non utilizzare i segnaposto come etichette di input. Le persone sono soggette a dimenticare l'input è iniziato una volta iniziato a inserire il testo, soprattutto se ricevono distratta ("Ho inserito un indirizzo email, un numero di telefono o un account ID?"). Esistono molti altri potenziali problemi relativi ai segnaposto: consulta Non Usa il segnaposto Attributo e I segnaposto nei campi del modulo sono Dannosa non convinto.

Probabilmente è meglio posizionare le etichette sopra gli input. Ciò consente di avere coerenza design su dispositivi mobili e computer e, secondo l'IA di Google ricerca, consente una scansione più rapida da parte degli utenti. Ottieni etichette e input a larghezza intera e non è necessario regolare la larghezza dell'etichetta e dell'input per adattarla al testo dell'etichetta.

Apri il glitch label-position su una dispositivo mobile per vedere di persona.

Utilizza <button>

Utilizza <button> per i pulsanti. Gli elementi dei pulsanti offrono un comportamento accessibile e una forma integrata funzionalità di invio dei contenuti e possono essere facilmente definiti. Non ha senso l'utilizzo di <div> o di altri elementi che fingono di essere un pulsante.

Assicurati che il pulsante Invia indica la sua funzione. Alcuni esempi sono Crea account o Accedi, non Invia o Avvia.

Assicurati che l'invio del modulo sia andato a buon fine

Aiuta i gestori delle password a capire che è stato inviato un modulo. Esistono due metodi modi per farlo:

• Passa a un'altra pagina.
• Emula la navigazione con History.pushState() o History.replaceState(), e rimuovere il modulo per la password.

Con una richiesta XMLHttpRequest o fetch, assicurati che l'accesso sia andato a buon fine riportati nella risposta e gestiti tramite la compilazione del modulo anche dal DOM in quanto indicano il successo dell'utente.

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

Al contrario, non disattivare l'invio del modulo in attesa di input dell'utente. Ad esempio: Non disattivare il pulsante Accedi se gli utenti non hanno inserito i dati del cliente PIN. Gli utenti potrebbero perdersi qualcosa nel modulo, quindi provare a toccare ripetutamente (disattivato) Pulsante Accedi e pensa che non funzioni. Almeno se devi disattivare l'invio del modulo, spiegando all'utente cosa manca quando fai clic sul pulsante Disattivato.

Non raddoppiare gli input

Alcuni siti obbligano gli utenti a inserire due volte gli indirizzi email o le password. Ciò potrebbe ridurre errori per alcuni utenti, ma causa un lavoro extra per tutti gli utenti e aumenta abbandono prezzi. Chiedere due volte non ha senso neanche dove i browser compilano automaticamente gli indirizzi email o suggerire password efficaci. È meglio consentire agli utenti di confermare i propri indirizzi email (dovrai comunque farlo) e consenti loro di reimpostare facilmente la password, se necessario.

Sfruttare al meglio gli attributi degli elementi

È qui che avviene la magia. I browser hanno più funzionalità integrate utili che utilizzano attributi degli elementi di input.

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

Le password inserite devono avere type="password" per nascondere il testo della password e aiutare le a 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).

Dovresti 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. Consulta Attiva la visualizzazione della password.

Offri agli utenti di dispositivi mobili la tastiera giusta

Utilizza <input type="email"> per offrire agli utenti di dispositivi mobili una tastiera appropriata e abilita la convalida degli indirizzi e-mail integrata di base dal browser... no JavaScript obbligatorio.

Se devi utilizzare un numero di telefono invece di un indirizzo email, <input type="tel"> attiva un tastierino del telefono sul dispositivo mobile. Puoi utilizzare anche Attributo inputmode dove necessario: inputmode="numeric" è l'ideale per il PIN numeri. Tutto quello che vorresti sapere inputmode fornisce ulteriori dettagli.

Evita che la tastiera mobile nasconda il pulsante Accedi

Purtroppo, se non fai attenzione, le tastiere dei dispositivi mobili potrebbero coprire il modulo oppure peggio, nascondere parzialmente il pulsante Accedi. Gli utenti potrebbero arrendersi prima nella consapevolezza di quello che è successo.

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

Esegui test su una serie di dispositivi

Dovrete effettuare il test su una serie di dispositivi per il pubblico di destinazione e regolare di conseguenza. BrowserStack consente di test senza costi per l'open source progetti su una serie di dispositivi reali e browser.

Valuta l'uso di due pagine

Alcuni siti (tra cui Amazon e eBay) evitano il problema chiedendo email/telefono e password su due pagine. Questo approccio semplifica inoltre esperienza: l'utente deve svolgere una sola attività per volta.

Idealmente, questo dovrebbe essere implementato utilizzando un singolo <form>. Usa JavaScript per visualizzare inizialmente solo l'input dell'indirizzo email, quindi nasconderlo e mostrare l'inserimento della password. Se devi forzare l'utente a passare a una nuova pagina tra l'inserimento dell'email e la password, il modulo sulla seconda pagina deve contenere un elemento di input nascosto con valore email, per consentire ai gestori delle password di memorizzare il valore corretto. Password Stili di modulo riconosciuti da Chromium fornisce un esempio di codice.

Aiuta gli utenti a evitare di reinserire i dati

Puoi aiutare i browser ad archiviare correttamente i dati e gli input di compilazione automatica, in modo che gli utenti ricordati di inserire l'indirizzo email e la password. Ciò è particolarmente importante sui dispositivi mobili ed è fondamentale per l'inserimento di email, che ricevono alti tassi di abbandono.

Questo processo si articola in 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 input per Hanno un valore name o id stabile (non generato in modo casuale a ogni caricamento pagina o dell'implementazione del sito) ed essere in <form> con un pulsante submit.

2. L'attributo autocomplete consente ai browser di compilare correttamente gli input utilizzando e archiviare i dati archiviati.

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 utilizzare id="email" e name="email".

Per l'inserimento della password, usa i valori autocomplete e id appropriati per aiutare i browser la differenza tra le password nuove e quelle attuali.

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

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

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

• Usa autocomplete="current-password" e id="current-password" per l'inserimento della password in un modulo di accesso o l'inserimento della vecchia password dell'utente in un modulo di modifica della password. Questo indica browser che vuoi che usi 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

Diversi browser gestiscono in qualche modo la compilazione automatica delle email e il suggerimento della password in modo diverso, ma gli effetti sono praticamente gli stessi. In Safari 11 e versioni successive su computer, Ad esempio viene visualizzato Gestore delle password e poi i dati biometrici (impronta o riconoscimento facciale), se disponibile.

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

Le password del browser e i sistemi di compilazione automatica non sono semplici. Gli algoritmi per indovinare, memorizzare e visualizzare i valori non sono standardizzati e variano da una piattaforma all'altra. Ad esempio, come sottolineato da Hidde de Vries: "Il gestore delle password di Firefox completa la sua euristica con una sistema di ricette."

Compilazione automatica: cosa devono sapere gli sviluppatori web, non contiene molte più informazioni sull'utilizzo di name e autocomplete. Il codice HTML specifiche elenca tutti i 59 valori possibili.

Consenti al browser di suggerire una password efficace

I browser moderni usano l'euristica per decidere quando mostrare l'interfaccia utente del gestore delle password e suggerisci una password efficace.

Ecco come funziona Safari su computer.

(In Safari è disponibile un suggerimento per una password univoca efficace dalla versione 12.0).

Grazie ai generatori di password integrati nel browser, utenti e sviluppatori non hanno bisogno per capire quale sia una "password efficace" dall'indirizzo IP interno. Poiché i browser possono archiviare in modo sicuro le password e compilarle automaticamente in base alle necessità, gli utenti non dovranno o inserisci le password. Incoraggiare gli utenti a sfruttare i vantaggi del browser integrato generatori di password significa anche che è più probabile che utilizzino un indirizzo sul tuo sito e meno propensi a riutilizzare una password che potrebbe compromessi altrove.

Aiuta a evitare che gli utenti manchino 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 è richiesto JavaScript.

Progetta per dita e pollici

La dimensione predefinita del browser per quasi tutti gli elementi relativi agli elementi di input e i pulsanti sono troppo piccoli, soprattutto sui dispositivi mobili. Può sembrare ovvio, ma un problema comune con i moduli di accesso su molti siti.

Assicurati che gli ingressi e i pulsanti siano abbastanza grandi

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

In base all'accessibilità Android guida la dimensione target consigliata per gli oggetti touchscreen è 7-10 mm. Interfaccia Apple le linee guida suggeriscono che il formato è 48 x 48 px, mentre quello di W3C suggerisce almeno 44 x 44 pixel. Su questo aggiungi (almeno) circa 15 px di spaziatura interna agli elementi di input e ai pulsanti per dispositivi mobili e circa 10 px su computer. Prova con un dispositivo mobile reale e un dito o un pollice reale. Dovresti riuscire a toccare comodamente ciascuno dei tuoi input e pulsanti.

I target dei tocchi non sono dimensionati in modo appropriato Il controllo di Lighthouse può aiutarti ad automatizzare il processo di rilevamento degli elementi di input che sono troppo piccoli.

Progetta per i pollici

Cerca touch target e vedrai tante immagini di indici. Tuttavia, nel mondo reale le persone usano i pollici per interagire con i telefoni. I pollici sono più grandi di indici e il controllo è meno preciso. Ragione in più per una adeguata touch target di dimensioni ridotte.

Fai in modo che il testo sia abbastanza grande

Come per le dimensioni e la spaziatura interna, le dimensioni predefinite dei caratteri del browser per gli elementi di input e è troppo piccolo, soprattutto sui dispositivi mobili.

Le dimensioni dei caratteri dei browser su piattaforme diverse sono diverse, quindi è difficile specificare una particolare dimensione del carattere che funzioni bene ovunque. Un breve sondaggio sulle siti web popolari mostrano dimensioni di 13-16 pixel sul computer, corrispondenti alle dimensioni fisiche è un buon minimo per il testo su dispositivi mobili.

Ciò significa che devi utilizzare una dimensione pixel maggiore sui dispositivi mobili: 16px su Chrome per Il desktop è abbastanza leggibile, ma anche con una buona visione è difficile leggerlo 16px testo su Chrome per Android. Puoi impostare dimensioni in pixel dei caratteri diverse per le dimensioni dell'area visibile usando contenuti multimediali query. 20px funziona quasi direttamente sul dispositivo mobile, ma dovresti testarlo con gli amici o colleghi ipovedenti.

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

Lascia spazio sufficiente tra gli input

Aggiungi un margine sufficiente per far funzionare gli input e i touch target. In altre parole, mira per un margine di circa un dito.

Assicurati che i valori inseriti siano chiaramente visibili

Lo stile predefinito dei bordi per gli input li rende difficili da visualizzare. Sono quasi invisibile su alcune piattaforme come Chrome per Android.

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

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

I browser dispongono di 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 impostare lo stato attivo sull'input problematico.

Puoi utilizzare il selettore CSS :invalid per evidenziare i dati non validi. Utilizza le funzionalità di :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.

Usa JavaScript quando necessario

Attiva/disattiva visualizzazione password

Dovresti aggiungere un pulsante di attivazione/disattivazione Mostra password per consentire agli utenti di controllare il testo digitato. Usabilità ne risentiranno non possono vedere il testo inserito. Al momento, non esiste un modo integrato per farlo anche se sono in programma implementazione. Dovrai usare 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 come 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 l'inserimento delle password

Usa aria-describedby per delineare le regole per le password assegnando l'ID del che descrive i vincoli. Gli screen reader forniscono il testo dell'etichetta, 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 possono 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 nel seguente Glitch:

Nella pagina Creazione di moduli accessibili vengono forniti ulteriori suggerimenti per rendere i moduli accessibili.

Convalida in tempo reale e prima dell'invio

Gli elementi e gli attributi del modulo HTML hanno funzioni integrate per la convalida di base, ma dovresti anche usare JavaScript per eseguire una convalida più efficace mentre gli utenti inserendo i dati e quando tentano di inviare il modulo.

Passaggio 5 del modulo di accesso il codelab constraint Validation API (ovvero ampiamente supportate) per aggiungere convalida personalizzata tramite l'interfaccia utente del browser integrata per impostare lo stato attivo e visualizzare i prompt.

Scopri di più: Usa JavaScript per informazioni complesse in tempo reale degli utenti.

Analisi e RUM

"Quello che non si può misurare, non si può migliorare" è particolarmente vero per le iscrizioni e moduli di accesso. Occorre definire gli obiettivi, misurare il successo, migliorare il sito e ripetizioni.

Usabilità degli sconti test può essere è utile per provare le modifiche, ma è necessario disporre di dati reali per capire l'esperienza degli utenti con i moduli di registrazione e di accesso:

• Analisi della pagina: visualizzazioni della pagina di registrazione e accesso, frequenze di rimbalzo e uscire.
• Analisi delle interazioni: goal canalizzazioni (dove gli utenti abbandonino il flusso di accesso?) e eventi (Quali azioni eseguono gli utenti quando interagiscono con i tuoi moduli?)
• Rendimento del sito web: incentrato sull'utente metriche (le metriche di registrazione e accesso forma lenta per qualche motivo e, in tal caso, qual è la causa?).

Per provare questa funzione, ti consigliamo anche di implementare i test A/B i diversi approcci alla registrazione e all'accesso e le implementazioni graduali per convalidare modifiche a un sottoinsieme di utenti prima di rilasciarle per tutti gli utenti.

Linee guida generali

Una UI e una UX ben progettate possono ridurre l'abbandono dei moduli di accesso:

• Fai in modo che gli utenti non debbano perdere l'accesso. Inserisci un link al modulo di accesso in alto della pagina, con formulazioni chiare, quali Accedi, Crea account o Registrati.
• Mantieni la concentrazione! I moduli di registrazione non sono uno strumento utile per distrarre le persone con e altre funzionalità del sito.
• Riduci al minimo la complessità delle procedure di registrazione. Raccogliere altri dati utente, ad esempio indirizzi o i dati della carta di credito) solo quando gli utenti notano un chiaro vantaggio e i dati di Google Cloud.
• Prima che gli utenti inizino a compilare il modulo di registrazione, chiarisci il valore di Google Cloud. Quali sono i vantaggi dell'accesso? Fornisci agli utenti informazioni concrete incentivi per completare la registrazione.
• Se possibile, consenti agli utenti di identificarsi con un numero di cellulare anziché un indirizzo email, dato che alcuni utenti potrebbero non utilizzare l'email.
• Permetti agli utenti di reimpostare facilmente la password e imposta il password? ovvio.
• Link ai documenti relativi ai Termini di servizio e alle Norme sulla privacy: chiarisci a come proteggiamo i loro dati fin dall'inizio.
• Includi il logo e il nome della tua azienda o organizzazione nella registrazione e pagine di accesso e assicurati che la lingua, i caratteri e gli stili corrispondano al resto nel tuo sito. Alcuni moduli non sembrano appartenere allo stesso sito di altri soprattutto se hanno un URL significativamente diverso.

Continua a imparare

• Crea moduli straordinari
• Best practice per la progettazione di moduli per dispositivi mobili
• Controlli modulo più efficaci
• Creazione di 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.