Best practice per il modulo di registrazione

Aiuta i tuoi utenti a registrarsi, accedere e gestire i dati dei loro account con il minimo sforzo.

Sam Dutton

Se gli utenti hanno bisogno di accedere al tuo sito, è fondamentale progettare un buon modulo di registrazione. Ciò vale in particolar modo per le persone con connessioni deboli, su dispositivi mobili, di fretta o sotto stress. I moduli di iscrizione ben strutturati hanno frequenze di rimbalzo elevate. Ogni rimbalzo potrebbe comportare la perdita e il disagio dell'utente, non solo la mancata opportunità di registrazione.

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

Elenco di controllo

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. Ove possibile, dovresti evitare di limitare le funzionalità dietro l'accesso.

Il miglior modulo di registrazione non è quello di nessun modulo.

Chiedendo a un utente di creare un account, sei tu a confrontarlo con gli obiettivi che sta cercando di raggiungere. Stai chiedendo un favore e chiedendo all'utente di fidarsi di te con dati personali. Ogni password e dato che memorizzi comporta un "debito di dati" in materia di privacy e sicurezza, che diventa un costo e una responsabilità per il tuo sito.

Se il motivo principale per cui chiedi agli utenti di creare un account è per salvare 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. Dovresti impostare il pagamento senza registrazione come predefinito.

Rendi ovvio l'accesso

Spiega chiaramente come creare un account sul tuo sito, ad esempio utilizzando un pulsante Accedi o Accedi in alto a destra nella pagina. Evita di utilizzare un'icona ambigua o una formulazione vaga ("Sali a bordo!", "Unisciti a noi") e non nascondere l'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 dati e analisi per mostrare l'impatto delle diverse opzioni.

Due screenshot di un sito web di e-commerce simulato visualizzato su uno smartphone Android. In quella a sinistra viene utilizzata per il link di accesso un'icona alquanto ambigua; quella a destra indica semplicemente "Accedi"
Rendi l'accesso ovvio. Un'icona può essere ambigua, ma il pulsante o il link Accedi è ovvio.
Screenshot dell'accesso a Gmail: una pagina che mostra il pulsante Accedi , quando selezionato porta a un modulo che contiene anche un link Crea account.
La pagina di accesso di Gmail contiene un link per creare un account.
Con dimensioni delle finestre superiori a quelle mostrate qui, Gmail mostra un link Accedi e un pulsante Crea un account.

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. È facile farlo se puoi accedere all'indirizzo email di un utente dai dati del profilo del provider di identità e associare i due account. Il codice seguente mostra come accedere ai dati email di un utente 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, chiarisci come accedere ai dettagli dell'account. In particolare, fai in modo che sia evidente come modificare o reimpostare le password.

Elimina il disordine nei moduli

Nel flusso di registrazione, il tuo compito è ridurre al minimo la complessità e mantenere l'attenzione dell'utente. Niente più confusione. Non è il momento di distrazioni e tentazioni!

Non distrarre gli utenti dal completamento della registrazione.

Al momento della registrazione, richiedi il minor numero possibile di informazioni. 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 abbiano i propri dati di contatto corretti. Ciò rallenta il completamento 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 dati di contatto, quindi continua con la creazione dell'account dopo che ha risposto. Questo è un modello di iscrizione 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 questa versione.

Accesso senza password su medium.com.

Come accade per l'accesso federato, questo metodo offre anche il vantaggio di non dover gestire le password degli utenti.

Valuta la durata delle sessioni

Qualunque sia l'approccio che adotti per quanto riguarda l'identità utente, devi prendere una decisione accurata sulla durata delle sessioni: per quanto tempo l'utente rimane connesso e che cosa potrebbe spingerlo a disconnetterlo.

Valuta se i tuoi utenti utilizzano dispositivi mobili o computer e se condividono su desktop o dispositivi.

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

Puoi aiutare i gestori delle password di terze parti e dei browser integrati 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 tra dispositivi, in app web e specifiche della piattaforma e per i nuovi dispositivi.

Per questo è estremamente importante programmare i moduli di registrazione in modo corretto, in particolare utilizzare i 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 valori name e id diversi nei moduli di registrazione e accesso, per l'elemento form stesso e per tutti gli elementi input, select e textarea.

Inoltre, dovresti 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ù nella pagina Best practice per i moduli relativi a pagamenti e indirizzi.

Assicurati che gli utenti inseriscano password sicure

Attivare i gestori delle password in modo che suggeriscano le password è l'opzione migliore, e dovresti incoraggiare gli utenti ad accettare le password efficaci suggerite dai browser e dai gestori dei browser di terze parti.

Tuttavia, poiché molti utenti preferiscono inserire le proprie password, devi implementare delle regole per la loro efficacia. 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 dovresti mai consentire le password che sono state esposte a violazioni della sicurezza.

Dopo che un utente ha inserito 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 incorporati e spiega come correggerli, non appena l'utente inserisce un valore, non dopo che ha inviato il modulo di registrazione e ha dovuto attendere una risposta dal server.

Indica chiaramente il motivo per cui una password viene rifiutata.

Non vietare di incollare la password

Alcuni siti non consentono di incollare del testo nelle password.

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 sanno che incollare non è consentito dopo aver provato a incollare la password. Pertanto, non consentire questo tipo di incollamento delle password non evita le vulnerabilità degli appunti.

Non memorizzare né trasmettere mai le password in testo normale

Assicurati di salare e sottoporre ad hashing 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. Potrebbe anche incoraggiare le persone a usare password non sicure e facili da ricordare.

Anziché forzare gli aggiornamenti delle password, dovresti monitorare le attività insolite dell'account e avvisare gli utenti. Se possibile, dovresti anche controllare le password che vengono compromesse a causa di violazioni dei dati.

Dovresti inoltre fornire agli utenti l'accesso alla cronologia di accesso al loro account, mostrando loro dove e quando si è verificato l'accesso.

Pagina Attività dell'account Gmail
Pagina Attività dell'account Gmail.

Semplificare la modifica o la reimpostazione delle password

Fai in modo che agli utenti sia chiaro dove e come aggiornare la password dell'account. Su alcuni siti è sorprendentemente difficile.

Naturalmente, dovresti anche consentire agli utenti di 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 azienda e i tuoi utenti, è particolarmente importante aiutare gli utenti a cambiare la loro password se scoprono che è stata compromessa. Per semplificare questa operazione, devi aggiungere un URL /.well-known/change-password al tuo sito che reindirizzi alla pagina di gestione delle password. In questo modo, i gestori delle password possono indirizzare gli utenti direttamente alla pagina in cui possono modificare la password del tuo sito. Questa funzionalità è ora implementata in Safari, Chrome e sarà presto disponibile su altri browser. Aiuta gli utenti a cambiare facilmente le password aggiungendo un URL noto per la modifica delle password. La procedura spiega come implementare questa funzionalità.

Inoltre, se è questo che desiderano gli utenti, dovresti anche semplificare l'eliminazione del proprio account.

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 della password. Tuttavia, dovresti anche consentire agli utenti di accedere tramite un provider di identità di terze parti, noto anche come login federato.

Pagina di accesso di WordPress
Pagina di accesso di WordPress, con opzioni di accesso a Google e Apple.

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

Potresti anche essere in grado di accedere a informazioni aggiuntive del profilo verificate dall'accesso federato, ad esempio un indirizzo email, il che significa che l'utente non deve inserire questi dati e non devi eseguire personalmente la verifica. L'accesso federato può inoltre semplificare notevolmente l'acquisto di un nuovo dispositivo per gli utenti.

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, il passaggio da un account all'altro dovrebbe essere semplice.

Gmail, mostra il passaggio da un account all'altro
Trasferimento dell'account su Gmail.

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 usando un codice monouso basato su app, un token di sicurezza o un sensore di impronte digitali. Le best practice per OTP SMS e Attivazione dell'autenticazione avanzata con WebAuthn spiegano come implementare l'autenticazione a più fattori.

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

Prenditi cura dei 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 oppure con un accesso federato, se lo preferiscono. Non obbligarli 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 dovresti 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à degli elementi del modulo può variare e le differenze nelle dimensioni dell'area visibile possono causare problemi di layout. BrowserStack consente di testare senza costi i progetti open source su una vasta gamma di dispositivi e browser.

Implementare l'analisi e il monitoraggio degli utenti reali

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

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 tuo sito per rilevare eventuali problemi non rilevati dai test locali.

Continua a imparare

Foto di @ecowarriorprincess su Unsplash.