Best practice per il modulo di registrazione

Aiuta gli utenti a registrarsi, accedere e gestire i dettagli dei propri account con il minimo sforzo.

Sam Dutton

Se gli utenti hanno bisogno di accedere al tuo sito, è consigliabile che i moduli di iscrizione 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 registrazione progettati in modo scorretto generano frequenze di rimbalzo elevate. Ogni rimbalzo potrebbe tradursi in un utente perso e insoddisfatto, non solo in un tentativo di mancata registrazione. l'opportunità.

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

Elenco di controllo

• Evita l'accesso, se puoi.
• Spiega chiaramente come creare un account.
• Spiega chiaramente come accedere ai dettagli dell'account.
• Elimina l'ingombro dei moduli.
• Considera la durata della sessione.
• Aiuta i gestori delle password a suggerire e archiviare le password in modo sicuro.
• Non consentire password compromesse.
• Consenti di incollare le password.
• Non memorizzare o trasmettere mai le password in testo normale.
• Non forzare gli aggiornamenti della password.
• Semplifica la modifica o la reimpostazione delle password.
• Attiva accesso federato.
• Semplifica il passaggio da un account all'altro.
• Valuta la possibilità di offrire l'autenticazione a più fattori.
• Fai attenzione ai nomi utente.
• Esegui test sul campo e in laboratorio.
• Esegui test su una vasta gamma di browser, dispositivi e piattaforme.

Se puoi, evita l'accesso

Prima di implementare un modulo di registrazione e chiedere agli utenti di creare un account sul tuo sito, valuta la possibilità di se ne hai davvero bisogno. Ove possibile, dovresti evitare di bloccare le funzionalità dietro l'accesso.

Il miglior modulo di registrazione è nessun modulo di registrazione.

Chiedendo a un utente di creare un account, sei tra questi e i suoi obiettivi. Chiedi un favore e chiedi all'utente di fidarti dei tuoi dati personali. Ogni password e ogni elemento di dati archiviati comporta un "debito di dati" relativo a privacy e sicurezza, diventando un costo e una responsabilità nel tuo sito.

Se il motivo principale per cui chiedi agli utenti di creare un account è salvare le informazioni tra le navigazioni sessioni di navigazione, valuta la possibilità di utilizzare lo spazio di archiviazione lato client. Da shopping siti, costringere gli utenti a creare un account per effettuare un acquisto è citato come uno dei motivi principali degli acquisti l'abbandono del carrello. Dovresti impostare il pagamento senza registrazione come predefinito.

Rendi l'accesso ovvio

Spiega in modo chiaro come creare un account sul tuo sito, ad esempio con Login o Sign in (Accedi). in alto a destra nella pagina. Evita di utilizzare un'icona ambigua o espressioni vaghe ("Inizia!", "Unisciti a noi") e non nascondere l'accesso in un menu di navigazione. Ha riassunto l'esperto di usabilità Steve Krug questo approccio all'usabilità dei siti web: Non farmi pensare! Per Per convincere altri membri del tuo team web, utilizza Analytics per mostrare l'impatto di le opzioni di CPU e memoria disponibili.

Assicurati di collegare gli account degli utenti che si registrano tramite un provider di identità come Google e che anche registrarsi usando e-mail e password. È facile farlo se puoi accedere all'indirizzo email di un utente dai dati del profilo del provider di identità e abbinare i due account. Il codice seguente mostra come accedere ai dati dell'email per un utente che ha eseguito l'accesso 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 effettuato l'accesso, spiega chiaramente come accedere ai dettagli dell'account. In particolare, fai in modo che ovviamente su come modificare o reimpostare le password.

Riduci l'ingombro dei moduli

Durante la procedura di registrazione, il tuo compito è ridurre al minimo la complessità e mantenere alta l'attenzione dell'utente. Elimina la confusione. Non è tempo di distrazioni e tentazioni!

Al momento della registrazione, chiedi il meno possibile. Raccogliere dati utente aggiuntivi (come nome e indirizzo) solo quando è necessario e quando l'utente vede un chiaro vantaggio dal fornire questi dati. Ricorda che ogni dato che comunichi e archivi comporta costi e responsabilità.

Non raddoppiare gli input solo per assicurarti che gli utenti abbiano i dati di contatto corretti. Questo rallenta la compilazione dei moduli e non ha senso se i campi dei moduli vengono compilati automaticamente. Invia invece una conferma il codice all'utente dopo aver inserito i dati di contatto, quindi passa alla creazione dell'account una volta ricevuta la risposta. Questo è un modello di registrazione comune: gli utenti sono abituati.

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 ne utilizzano una versione.

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

Considera la durata della sessione

Qualunque sia l'approccio da adottare per identificare l'utente, dovrai prendere una decisione accurata riguardo alla sessione lunghezza: per quanto tempo un utente rimane connesso e cosa potrebbe portarlo a disconnetterlo.

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

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

Puoi aiutare i gestori delle password di terze parti e dei browser integrati a suggerire e memorizzare le password, gli utenti non devono scegliere, ricordare o digitare le password da soli. I gestori delle password funzionano bene browser moderni, la sincronizzazione degli account tra dispositivi, applicazioni web e specifiche per le piattaforme, e per i nuovi dispositivi.

Per questo è estremamente importante programmare correttamente i moduli di registrazione, in particolare l'uso valori di completamento automatico. Per i moduli di registrazione, usa autocomplete="new-password" per le nuove password e aggiungi se possibile, correggi i valori di completamento automatico in altri campi del modulo, ad esempio autocomplete="email" e autocomplete="tel". Puoi anche agevolare i gestori delle password usando name e id diversi nei moduli di registrazione e di accesso, per l'elemento form stesso, nonché per eventuali input e select e textarea.

Devi anche utilizzare l'attributo type appropriato per fornire la tastiera giusta sui dispositivi mobili e abilitare la convalida integrata di base da parte del browser. Per saperne di più, consulta Best practice per i moduli di pagamento e indirizzo.

Assicurati che gli utenti inseriscano password sicure

L'attivazione dei gestori delle password in modo che suggerisca le password è l'opzione migliore e ti consigliamo di agli utenti di accettare le password efficaci suggerite dai browser e dai gestori del browser di terze parti.

Tuttavia, poiché molti utenti desiderano inserire le proprie password, dovrai implementare delle regole per le password forza maggiore. Il National Institute of Standards and Technology spiega come evitare le password non sicure.

Non consentire password compromesse

Indipendentemente dalle regole che scegli per le password, non devi mai consentire le password che sono state esposte in violazioni della sicurezza.

Dopo che un utente ha inserito una password, devi verificare che non si tratti di una password già esistente. compromessi. Il sito have I Been Pwned fornisce un'API per la password la verifica o puoi eseguirlo autonomamente come servizio.

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

Se rifiuti la password proposta da un utente, spiega in modo specifico il motivo del rifiuto. Mostra i problemi in linea e spiega come risolverli. non appena l'utente inserisce un valore, non dopo aver inviato il modulo di registrazione e aver dovuto attendere una risposta dal tuo server.

Non vietare di incollare le password

Alcuni siti non consentono di incollare il testo negli input delle password.

Non consentire di incollare le password infastidisce gli utenti, incoraggia gli utenti a creare password facili da ricordare (e quindi potrebbe essere più facile da compromettere) e, secondo organizzazioni come l'organizzazione Centro sicurezza informatica, potrebbe effettivamente ridurre la sicurezza. Gli utenti vengono a conoscenza del fatto che non è consentito incollare solo dopo aver provato a incollare la password, quindi non consentire di incollare le password non evita vulnerabilità negli appunti.

Non memorizzare o trasmettere mai le password in testo normale

Assicurati di salire e sottoporre ad hashing le password e non provare a inventare un tuo algoritmo di hashing.

Non forzare gli aggiornamenti delle password

Non costringere gli utenti ad aggiornare arbitrariamente le password.

Forzare gli aggiornamenti delle password può essere costoso per i reparti IT, fastidio per gli utenti e non richiede impatto sulla sicurezza. Inoltre, è probabile che incoraggi le persone per usare password non sicure e facili da ricordare o per conservare un archivio fisico delle password.

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

Devi inoltre fornire agli utenti l'accesso alla cronologia di accesso al loro account, mostrando loro dove e quando è stato eseguito l'accesso.

Semplifica la modifica o la reimpostazione delle password

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

Naturalmente dovresti anche consentire agli utenti di reimpostare facilmente la propria password se la dimenticano. L'Open Web Application Security Project fornisce indicazioni dettagliate su come gestire i dispositivi persi di sicurezza.

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

Dovresti anche consentire agli utenti di eliminare facilmente il proprio account, se è quello che vogliono.

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

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

Questo approccio offre diversi vantaggi. Per gli utenti che creano un account utilizzando l'accesso federato, non hanno bisogno di chiedere, comunicare o memorizzare password.

Potresti anche essere in grado di accedere a ulteriori informazioni del profilo verificato tramite l'accesso federato, ad esempio come indirizzo email, il che significa che l'utente non deve inserire questi dati e tu non devi farlo tu stesso la verifica. L'accesso federato può inoltre rendere molto più semplice per gli utenti quando ricevono un nuovo dispositivo.

Integrazione di Accedi con Google nell'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 dispositivi e passano da un account all'altro utilizzando lo stesso browser. Se gli utenti accedono accesso federato o meno, è consigliabile semplificare il passaggio da un account all'altro.

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

L'autenticazione a più fattori significa garantire che gli utenti forniscano l'autenticazione in più di un modo. Ad esempio, oltre a richiedere all'utente di impostare una password, potresti anche imporre utilizzando un passcode monouso inviato tramite email o SMS oppure un passcode monouso basato su app. un codice di sicurezza, un token di sicurezza o un sensore di impronte digitali. Best practice per OTP via SMS e Attivare l'autenticazione avanzata con WebAuthn spiegare come implementare l'autenticazione a più fattori.

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

Fai attenzione ai nomi utente

Non insistere per un nome utente a meno che (o finché) non ti serva uno. Consenti agli utenti di registrarsi e accedere con solo un indirizzo email (o numero di telefono) e una password o un accesso federato se lo preferiscono. Non costringerli a scegliere e ricordare un nome utente.

Se il tuo sito richiede nomi utente, non imporne di regole irragionevoli e non bloccare gli utenti di non aggiornare il proprio nome utente. Sul tuo 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 serie 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 progetti open source su una vasta gamma di dispositivi e browser.

Implementazione di analisi e monitoraggio degli utenti reali

Ti servono dati sul campo e dati di laboratorio per capire l'esperienza degli utenti con i moduli di registrazione. Analisi e Real User Monitoring (RUM) forniscono dati sull'esperienza effettiva degli utenti, ad esempio quanto tempo richiedono le pagine di registrazione caricamento, quali componenti dell'interfaccia utente interagiscono o meno con gli utenti e quanto tempo impiegano gli utenti per completarli .

• Analisi della pagina: visualizzazioni di pagina, frequenze di rimbalzo e uscite per ogni pagina del flusso di registrazione.
• Analisi delle interazioni: canalizzazioni all'obiettivo ed eventi indicano dove gli utenti abbandonano la procedura di registrazione e la percentuale di utenti che fanno clic sui pulsanti; e altri componenti delle pagine di registrazione.
• Rendimento del sito web: metriche incentrate sugli utenti può indicare se il flusso di registrazione si carica lentamente o è visivamente instabile.

Piccole modifiche possono fare una grande differenza per le percentuali di completamento dei moduli di registrazione. Analisi e RUM ti consentono di ottimizzare e assegnare la priorità alle modifiche, nonché di monitorare il sito alla ricerca di problemi esposti dai test locali.

Continua a imparare

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

Foto di @ecowarriorprincess su Unsplash.