Identità

Aiutare gli utenti a registrarsi

Il modulo di registrazione è spesso la prima interazione con un modulo sul tuo sito web. Un buon design del modulo di registrazione è fondamentale ed è essenziale creare un modulo sicuro.

Diamo un'occhiata a un modulo di registrazione e a come puoi aiutare gli utenti a registrarsi sul tuo sito web.

Mantieni il modulo di registrazione minimo e mostra solo i controlli del modulo richiesti per creare un account. Non raddoppiare i controlli del modulo per aiutare gli utenti a inserire correttamente i dettagli dell'account. Invia un'email di conferma.

Aiutare gli utenti a inserire i dettagli del proprio account

Puoi aiutare gli utenti a inserire i dettagli del proprio account utilizzando l'attributo autocomplete appropriato. Utilizza autocomplete="email" per il campo email e autocomplete="new-password" per un campo nuova password.

Scopri di più sui controlli di input di compilazione automatica.

Puoi anche aiutare gli utenti a inserire una password sicura offrendo <button> con richiesta di rivelazione della password.
Scopri di più sulla pattern rivelazione della password.

Verificare che il modulo di registrazione sia sicuro

Non memorizzare né trasmettere mai le password come testo normale. Assicurati di salare e sottoporre ad hashing le password e non cercare di inventare un tuo algoritmo di hashing.

Offri l'autenticazione a più fattori, soprattutto se archivi dati personali o sensibili. Le best practice per OTP SMS e come attivare l'autenticazione avanzata con WebAuthn spiegano come implementare l'autenticazione a più fattori.

Assicurati che gli utenti non utilizzino password compromesse. Ad esempio, utilizza l'API di have I Been Pwned per rilevare le password compromesse e suggerisci agli utenti di inserire una nuova password o avvisarli se la loro password viene compromessa.

Aiutare gli utenti ad accedere

Vediamo come creare un modulo di accesso per garantire che gli utenti possano accedere facilmente al tuo sito web.

Fai in modo che la posizione dei pulsanti di registrazione e accesso sia chiara. Assicurati che il modulo sia utilizzabile su dispositivi touch:

Le dimensioni del target dei tocchi dei pulsanti sono di almeno 48 px.
La dimensione font-size degli elementi del modulo è sufficientemente grande (20px quasi sui dispositivi mobili).
C'è abbastanza spazio (margin) tra i controlli del modulo e gli input sono abbastanza grandi (utilizza almeno padding: 15px su dispositivi mobili).

Aiuta gli utenti a inserire indirizzo email e password

Aiuta i browser e i gestori delle password a compilare automaticamente i dettagli dell'account. Usa autocomplete="email" per il campo email e autocomplete="current-password" per un campo password attuale.

Per aiutare gli utenti a compilare manualmente i dettagli dell'account, utilizza type="email" nel campo dell'email per mostrare la tastiera sullo schermo appropriata sui dispositivi mobili.

Utilizza l'attributo required per il campo dell'indirizzo email e della password in modo da poter avvisare in caso di valori non validi quando l'utente invia il modulo. Potresti utilizzare la convalida in tempo reale per aiutare gli utenti a correggere i dati non validi subito dopo averli inseriti, anziché attendere l'invio del modulo.

Assicurati che gli utenti possano vedere la password che hanno inserito

Il testo che inserisci per <input type="password"> è oscurato per impostazione predefinita, per rispettare la privacy degli utenti. Aiuta gli utenti a inserire la password, mostrando un <button> per attivare/disattivare la visibilità del testo inserito.

Scopri di più sull'implementazione di una rivelazione della password <button>.

Assicurati che i moduli di accesso e registrazione siano utilizzabili

Verifica regolarmente i tuoi moduli di accesso e registrazione con persone reali per assicurarti che l'autenticazione funzioni come previsto. Utilizza dati e analisi e Real User Measurement (RUM) per raccogliere dati sul campo e strumenti come Lighthouse e PageSpeed Insights per eseguire test in autonomia. Scopri di più sui test dell'usabilità e sulla raccolta dei dati di analisi.

Assicurati che i moduli funzionino in browser e piattaforme differenti. Testa il modulo su schermi di dimensioni diverse, utilizzando solo la tastiera o uno screen reader come VoiceOver su Mac o NVDA su Windows.

Aiutare gli utenti a modificare le impostazioni dell'account

Accertati che gli utenti possano modificare ogni impostazione account, inclusi indirizzi email, password e nomi utente.

Rendi trasparente i dati che archivi e aiuta gli utenti a scaricare tutti i loro dati personali in qualsiasi momento. Assicurati che gli utenti possano eliminare il proprio account, se questa è l'impostazione che desiderano. Funzionalità di gestione dell'account come queste potrebbero essere un requisito legale in alcune regioni.

Assicurarsi che gli utenti possano aggiornare le proprie password

Consentire agli utenti di aggiornare facilmente la propria password.

Chiedi agli utenti la password attuale prima di cambiarla e invia un'email relativa alla modifica della password con la possibilità di ripristinare e bloccare l'account.

Aggiungi l'opzione per richiedere una nuova password e valuta la possibilità di fornire un URL .well-known per richiedere una nuova password.