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 e un modulo sicuro è essenziale.

Guarda un modulo di registrazione per scoprire come puoi aiutare gli utenti a registrarsi sul tuo sito web.

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

Dettagli account

Puoi aiutare gli utenti a compilare i dettagli dell'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 per il riempimento automatico.

Puoi anche aiutare gli utenti a inserire una password sicura offrendo un pulsante per visualizzare la password <button>. Scopri di più sul pattern per mostrare la password.

Proteggere il modulo di iscrizione

Non archiviare o trasmettere mai password in testo normale. Assicurati di aggiungere sale e hash alle password e non provare a inventare il tuo algoritmo di hashing.

Offri l'autenticazione a più fattori, soprattutto se memorizzi dati personali o sensibili. Best practice per l'OTP via SMS e Abilitare 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 suggerire agli utenti di inserire una nuova password diversa o avvisarli se la loro password viene compromessa.

Aiutare gli utenti ad accedere

Scopri come creare un modulo di accesso per assicurarti che gli utenti possano accedere al tuo sito web.

Rendi evidente la posizione dei pulsanti di registrazione e accesso. Assicurati che il modulo sia utilizzabile sui dispositivi touch:

  • Le dimensioni del target di tocco dei pulsanti sono almeno 48 px.
  • Il font-size degli elementi del modulo è abbastanza grande (20px è la dimensione ideale sui dispositivi mobili).
  • C'è spazio sufficiente (margin) tra i controlli del modulo e gli input sono abbastanza grandi (utilizza almeno padding: 15px su dispositivo mobile).

Aiutare gli utenti a compilare email e password

Aiutare i browser e i gestori delle password a compilare automaticamente i dettagli dell'account. Utilizza 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" per il campo email in modo da mostrare la tastiera sullo schermo appropriata sui dispositivi mobili.

Utilizza l'attributo required per il campo email e password in modo da avvisare di valori non validi quando l'utente invia il modulo. Valuta la possibilità di utilizzare la convalida in tempo reale per aiutare gli utenti a correggere i dati non validi non appena li inseriscono, anziché attendere l'invio del modulo.

Assicurati che gli utenti possano vedere la password inserita

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 un pulsante per mostrare la password <button>.

Assicurati che i moduli di accesso e registrazione siano utilizzabili

Testa regolarmente i moduli di accesso e registrazione con persone reali per assicurarti che l'autenticazione funzioni come previsto. Utilizza l'analisi e la misurazione utente reale (RUM) per raccogliere dati sul campo e strumenti come Lighthouse e PageSpeed Insights per eseguire i test autonomamente. Scopri di più sui test di usabilità e sulla raccolta dei dati di analisi.

Assicurati che i tuoi moduli funzionino su browser e piattaforme diversi. Prova 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

Assicurati che gli utenti possano modificare tutte le impostazioni dell'account, inclusi indirizzi email, password e nomi utente.

Rendi trasparente quali dati memorizzi e aiuta gli utenti a scaricare tutti i loro dati personali in qualsiasi momento. Assicurati che gli utenti possano eliminare il proprio account se lo 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

Semplificare l'aggiornamento della password per gli utenti.

Chiedi agli utenti la password attuale prima di modificarla e invia un'email relativa a una modifica della password con l'opzione per ripristinare e bloccare l'account.

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

Risorse