Best practice per il modulo di registrazione

Aiuta gli utenti a registrarsi, accedere e gestire i dati del proprio account con il minimo sforzo.

Se gli utenti hanno bisogno di accedere al tuo sito, è fondamentale progettare un buon modulo di iscrizione. Questo vale in particolar modo per le persone con connessioni deboli, su dispositivi mobili, in fretta o sotto stress. I moduli di registrazione mal studiati generano frequenze di rimbalzo elevate. Ogni rimbalzo potrebbe significare un utente perso e scontento, non solo un'opportunità di registrazione persa.

Ecco un esempio di modulo di registrazione molto semplice che illustra tutte le best practice:

Elenco di controllo

• Se puoi, evita di effettuare l'accesso.
• Spiega chiaramente come si crea un account.
• Spiega chiaramente come accedere ai dettagli dell'account.
• Elimina il disordine nei moduli.
• Valuta la durata della sessione.
• Aiuta i gestori delle password a suggerire e memorizzare le password in modo sicuro.
• Non consentire password compromesse.
• Consenti di incollare le password.
• Non memorizzare né trasmettere mai le password in testo normale.
• Non forzare gli aggiornamenti delle password.
• Semplifica la modifica o la reimpostazione delle password.
• Abilita accesso federato.
• Semplifica il passaggio da un account all'altro.
• Prova a offrire l'autenticazione a più fattori.
• Utilizza i nomi utente.
• Esegui test sul campo e nel lab.
• Esegui i test su un'ampia gamma di browser, dispositivi e piattaforme.

Evita di eseguire l'accesso se puoi

Prima di implementare un modulo di registrazione e chiedere agli utenti di creare un account sul tuo sito, valuta se è davvero necessario. Se possibile, evita di limitare le funzionalità dietro accesso.

Il miglior modulo di registrazione non è quello.

Se chiedi a un utente di creare un account, ti metti tra loro e che cosa sta cercando di fare. Stai chiedendo un favore e chiedi all'utente di fidarti di te e fornire i tuoi dati personali. Ogni password e elemento di dati che memorizzi comporta un "debito di dati" in termini di privacy e sicurezza, diventando un costo e una responsabilità per il tuo sito.

Se il motivo principale per cui chiedi agli utenti di creare un account è per salvare le informazioni tra le navigazioni o le sessioni di navigazione, valuta l'utilizzo dello spazio di archiviazione lato client. Per i siti di shopping, costringere gli utenti a creare un account per effettuare un acquisto è citato come uno dei motivi principali dell'abbandono del carrello degli acquisti. Devi impostare il pagamento senza registrazione come predefinito.

Rendere ovvio l'accesso

Spiega chiaramente come creare un account sul tuo sito, ad esempio facendo clic sul pulsante Accedi o Accedi in alto a destra nella pagina. Evita di utilizzare un'icona ambigua o espressioni vaghe ("Sali a bordo!", "Unisciti a noi") e non nascondere i dati di accesso in un menu di navigazione. L'esperto di usabilità Steve Krug ha riassunto questo approccio all'usabilità dei siti web: Non farmi pensare. Se hai bisogno di convincere altri membri del tuo team web, utilizza Analytics per mostrare l'impatto delle diverse opzioni.

Assicurati di collegare gli account degli utenti che si registrano tramite un provider di identità come Google e che si registrano anche utilizzando email e password. Questa operazione è semplice se riesci ad accedere all'indirizzo email di un utente dai dati del profilo del provider di identità e associa i due account. Il codice seguente mostra come accedere ai dati email per un utente che utilizza Accedi con Google.

// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log(`Email: ${profile.getEmail()}`);
}

Spiega chiaramente come accedere ai dettagli dell'account

Una volta che un utente ha eseguito l'accesso, indica chiaramente come accedere ai dettagli dell'account. In particolare, spiega chiaramente come modificare o reimpostare le password.

Elimina il disordine nelle forme

Nel flusso di registrazione, il tuo compito è ridurre al minimo la complessità e mantenere l'utente concentrato. Elimina il disordine. Non è il momento di distrazioni e tentazioni.

Al momento della registrazione, richiedi meno informazioni possibile. Raccogli dati utente aggiuntivi (ad es. nome e indirizzo) solo quando necessario e quando l'utente vede un chiaro vantaggio nel fornire questi dati. Tieni presente che ogni dato che comunichi e archivi comporta costi e responsabilità.

Non raddoppiare i tuoi input solo per assicurarti che gli utenti ricevano i loro dati di contatto corretti. Ciò rallenta la compilazione del modulo e non ha senso se i campi dei moduli vengono compilati automaticamente. Invia invece un codice di conferma all'utente dopo che ha inserito i suoi dettagli di contatto, quindi continua la creazione dell'account quando avrà risposto. Questo è un modello di registrazione comune: gli utenti sono abituati a farlo.

Ti consigliamo di prendere in considerazione l'accesso senza password inviando agli utenti un codice ogni volta che accedono su un nuovo dispositivo o browser. Siti come Slack e Medium utilizzano una versione di questo elemento.

Come per l'accesso federato, questo offre l'ulteriore vantaggio di non dover gestire le password utente.

Valuta la durata della sessione

Qualunque sia l'approccio adottato per quanto riguarda l'identità dell'utente, devi prendere una decisione attenta alla durata della sessione, ovvero per quanto tempo l'utente rimane connesso e che cosa potrebbe spingerlo a disconnetterlo.

Valuta se gli utenti utilizzano dispositivi mobili o computer e se condividono o meno su computer.

Aiuta i gestori delle password a suggerire e memorizzare le password in modo sicuro

Puoi aiutare i gestori delle password di terze parti e del browser integrato a suggerire e archiviare le password, in modo che gli utenti non debbano scegliere, ricordare o digitare le password autonomamente. I gestori delle password funzionano bene nei browser moderni, sincronizzando gli account su più dispositivi, in app web e specifiche della piattaforma e su nuovi dispositivi.

Ciò rende estremamente importante codificare correttamente i moduli di registrazione, in particolare l'utilizzo dei valori di completamento automatico corretti. Per i moduli di registrazione, utilizza autocomplete="new-password" per le nuove password e, se possibile, aggiungi valori di completamento automatico corretti ad altri campi del modulo, ad esempio autocomplete="email" e autocomplete="tel". Puoi aiutare i gestori delle password anche utilizzando diversi valori name e id nei moduli di registrazione e accesso, per l'elemento form stesso e per qualsiasi elemento input, select e textarea.

Devi inoltre utilizzare l'attributo type appropriato per fornire la tastiera corretta sui dispositivi mobili e attivare la convalida di base integrata da parte del browser. Scopri di più nelle best practice per i moduli di pagamento e indirizzo.

Assicurati che gli utenti inseriscano password sicure

L'opzione migliore è attivare i gestori delle password in modo che suggeriscano le password e incoraggia gli utenti ad accettare le password efficaci suggerite dai browser e dai gestori dei browser di terze parti.

Tuttavia, molti utenti vogliono inserire le proprie password, quindi devi implementare regole per la sicurezza delle password. Il National Institute of Standards and Technology degli Stati Uniti spiega come evitare password non sicure.

Non consentire password compromesse

A prescindere dalle regole che scegli per le password, non devi mai consentire le password esposte a causa di violazioni della sicurezza.

Dopo che un utente inserisce una password, devi verificare che non si tratti di una password già compromessa. Il sito have I Been Pwned fornisce un'API per il controllo delle password oppure puoi eseguirla come servizio autonomamente.

Il Gestore delle password di Google ti consente anche di controllare se le tue password esistenti sono state compromesse.

Se rifiuti la password proposta da un utente, spiega chiaramente il motivo del rifiuto. Mostra i problemi in linea e spiega come correggerli, non appena l'utente ha inserito un valore, non dopo che ha inviato il modulo di registrazione e ha dovuto attendere una risposta dal server.

Non vietare di incollare le password

Alcuni siti non consentono di incollare testo nelle password inserite.

Non consentire di incollare le password infastidisce gli utenti, incoraggia password facili da ricordare (e quindi più facili da compromettere) e, secondo organizzazioni come il National Cyber Security Centre del Regno Unito, potrebbe effettivamente ridurre la sicurezza. Gli utenti vengono a conoscenza del fatto che incollare non è consentito dopo aver provato a incollare la password. Pertanto, non consentire di incollare le password non evita le vulnerabilità degli appunti.

Non memorizzare o trasmettere mai le password in testo normale

Assicurati di salare e hash le password e non provare a inventare un tuo algoritmo di hashing.

Non forzare gli aggiornamenti delle password

Non forzare gli utenti ad aggiornare le loro password in modo arbitrario.

Forzare gli aggiornamenti delle password può essere costoso per i reparti IT, fastidioso per gli utenti e non ha un grande impatto sulla sicurezza. È probabile che incoraggi le persone a usare password non sicure e facili da ricordare o a conservare una copia fisica delle password.

Anziché forzare gli aggiornamenti delle password, dovresti monitorare l'attività insolita dell'account e avvisare gli utenti. Se possibile, dovresti anche controllare che non ci siano password compromesse a causa di violazioni dei dati.

Dovresti anche fornire ai tuoi utenti l'accesso alla cronologia degli accessi, mostrando loro dove e quando è stato eseguito l'accesso.

Semplifica la modifica o la reimpostazione delle password

Spiega chiaramente agli utenti dove e come aggiornare la password dell'account. Su alcuni siti è sorprendentemente difficile.

Naturalmente, dovresti anche fare in modo che gli utenti possano reimpostare facilmente la password se la dimenticano. L'Open Web Application Security Project fornisce indicazioni dettagliate su come gestire le password perse.

Per proteggere la tua attività e i tuoi utenti, è particolarmente importante aiutare gli utenti a cambiare la password se scoprono che è stata compromessa. Per semplificare questa operazione, devi aggiungere al tuo sito un URL /.well-known/change-password che reindirizza alla pagina di gestione delle password. In questo modo i gestori delle password possono indirizzare gli utenti direttamente alla pagina in cui possono cambiare la password del tuo sito. Questa funzionalità è ora implementata in Safari, Chrome e sarà presto disponibile in altri browser. Aiuta gli utenti a cambiare facilmente le password aggiungendo un URL noto per la modifica delle password: spiega come implementare questa funzionalità.

Dovresti anche semplificare l'eliminazione del loro account da parte degli utenti.

Offri l'accesso tramite provider di identità di terze parti

Molti utenti preferiscono accedere ai siti web utilizzando un indirizzo email e un modulo di registrazione con password. Tuttavia, dovresti anche consentire agli utenti di accedere tramite un provider di identità di terze parti, noto anche come accesso federato.

Questo approccio presenta diversi vantaggi. Per gli utenti che creano un account utilizzando l'accesso federato, non è necessario chiedere, comunicare o archiviare le password.

Potresti anche riuscire ad accedere a ulteriori informazioni del profilo verificato dall'accesso federato, ad esempio un indirizzo email. Ciò significa che l'utente non deve inserire questi dati e non sarà necessario eseguire personalmente la verifica. Inoltre, l'accesso federato può semplificare notevolmente l'esperienza degli utenti quando acquistano un nuovo dispositivo.

L'integrazione di Accedi con Google nella tua app web spiega come aggiungere l'accesso federato alle opzioni di registrazione. Sono disponibili molte altre piattaforme di identità.

Semplifica il passaggio da un account all'altro

Molti utenti condividono i dispositivi e passano da un account all'altro utilizzando lo stesso browser. Indipendentemente dal fatto che gli utenti accedano o meno all'accesso federato, dovresti semplificare il passaggio da un account all'altro.

Valuta la possibilità di offrire l'autenticazione a più fattori

L'autenticazione a più fattori garantisce che gli utenti forniscano l'autenticazione in più modi. Ad esempio, oltre a richiedere all'utente di impostare una password, potresti anche applicare la verifica utilizzando un passcode monouso inviato via email o SMS oppure utilizzando un codice monouso basato su app, un token di sicurezza o un sensore di impronte digitali. Le best practice per la OTP tramite SMS e l'abilitazione dell'autenticazione avanzata con WebAuthn spiegano come implementare l'autenticazione a più fattori.

Dovresti offrire (o applicare) l'autenticazione a più fattori se il tuo sito gestisce informazioni personali o sensibili.

Usa i nomi utente

Non insistere su un nome utente a meno che (o finché) non ne abbia bisogno. Consenti agli utenti di registrarsi e accedere solo con un indirizzo email (o numero di telefono) e una password o con un accesso federato, se preferiscono. Non forzare l'utente a scegliere e ricordare un nome utente.

Se il tuo sito richiede nomi utente, non imporre regole irragionevoli e non impedire agli utenti di aggiornare il proprio nome utente. Sul backend devi generare un ID univoco per ogni account utente, non un identificatore basato su dati personali come il nome utente.

Assicurati inoltre di utilizzare autocomplete="username" per i nomi utente.

Esegui test su una gamma di dispositivi, piattaforme, browser e versioni

Testa i moduli di registrazione sulle piattaforme più comuni per i tuoi utenti. La funzionalità dell'elemento del modulo può variare e le differenze nelle dimensioni dell'area visibile possono causare problemi di layout. BrowserStack consente test senza costi di progetti open source su una gamma di dispositivi e browser.

Implementa l'analisi e il monitoraggio degli utenti reali

Hai bisogno di dati sul campo e di prova controllati per capire l'esperienza degli utenti con i moduli di registrazione. Analytics e Real User Monitoring (RUM) forniscono dati relativi all'esperienza effettiva dei tuoi utenti, ad esempio il tempo necessario per il caricamento delle pagine di registrazione, i componenti dell'interfaccia con cui gli utenti interagiscono (o meno) e il tempo necessario agli utenti per completare la registrazione.

• Analisi della pagina: visualizzazioni di pagina, frequenze di rimbalzo e uscite per ogni pagina del flusso di registrazione.
• Analisi dell'interazione: le canalizzazioni all'obiettivo e gli eventi indicano il punto in cui gli utenti abbandonano la procedura di registrazione e la proporzione di utenti che fanno clic su pulsanti, link e altri componenti delle pagine di registrazione.
• Prestazioni del sito web: le metriche incentrate sull'utente possono indicare se il flusso di registrazione è lento o visivamente instabile.

Piccole modifiche possono fare una grande differenza per le percentuali di completamento dei moduli di iscrizione. Analytics e RUM consentono di ottimizzare e dare priorità alle modifiche, nonché di monitorare il sito per rilevare eventuali problemi non rilevati dai test locali.

Continua a imparare

• Best practice per il modulo di accesso
• Best practice relative ai moduli per i pagamenti e l'indirizzo
• 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 registrazione utilizzando l'API Credential Management
• Verificare i numeri di telefono sul web con l'API WebOTP

Foto di @ecowarriorprincess su Unsplash.