Un visitatore arriva sul tuo sito e clicca su "Accedi". Si aspetta un accesso senza intoppi. Invece trova un modulo che lo frustra. I requisiti della password sono nascosti fino all'invio. Il campo della password è piccolo e scomodo da usare. Non c'è l'opzione "Mostra password", quindi non può verificare cosa ha scritto. Sbaglia la password. Clicca su "Password dimenticata" e finisce in un flusso di reimpostazione confuso. Pochi minuti dopo si arrende e non torna più.
I moduli di accesso e di reimpostazione della password sono punti di contatto cruciali. Questi moduli stanno tra un visitatore che torna e il suo account. Se l'esperienza è scadente, non se ne va e basta. Pensa che il tuo sito non sia affidabile. In questo capitolo vediamo come costruire moduli di accesso e reimpostazione della password sicuri, intuitivi e rispettosi del tempo dell'utente.
Di quali campi ha bisogno un modulo di accesso?
Un modulo di accesso ha bisogno esattamente di tre cose. Primo, un modo per identificare chi è la persona. Secondo, un modo per verificarne l'identità. Terzo, un modo per restare connessi. Questo significa tre campi come minimo.
Il campo email
Usa l'email, non il nome utente. L'email è più semplice. Gli utenti dimenticano i nomi utente. Non dimenticano il loro indirizzo email. Fai in modo che questo campo accetti un indirizzo email ed etichettalo chiaramente come "Indirizzo email". Usa l'HTML `type="email"` così le tastiere dei telefoni mostrano il simbolo @ e la convalida dell'email avviene in automatico. Nell'attributo HTML aggiungi `autocomplete="username"`, così browser e gestori di password sanno che qui va l'identificativo di accesso e possono compilarlo in automatico per gli utenti che hanno salvato le credenziali.
Il campo password
Usa `type="password"` così il testo è nascosto. Aggiungi `id="current-password"` e `autocomplete="current-password"` così i gestori di password possono identificare questo campo e compilare in automatico le password salvate. Permetti di incollare. Gli esperti di sicurezza concordano che disattivare l'incolla nei campi password non previene gli attacchi. Dà fastidio solo a chi usa i gestori di password.
Rendi il campo password largo almeno 10 caratteri a vista. Un campo piccolo sembra stretto. Gli utenti dubitano che la loro password lunga ci stia. Un campo più largo dà sicurezza e riduce gli errori di invio.
Interruttore per mostrare la password
Includi un interruttore "Mostra password" o "Svela password" (di solito un'icona a forma di occhio o una casella). Quando è attivo, il campo password diventa `type="text"` così gli utenti possono vedere ciò che hanno scritto. Non è un rischio per la sicurezza. È una funzione di usabilità che riduce gli errori di invio e la frustrazione. Gli utenti digitano le password con attenzione e vogliono verificarle prima di premere invia.
Casella "Ricordami" (facoltativa ma consigliata)
Una casella "Ricordami su questo dispositivo" o "Resta connesso" è facoltativa, ma migliora l'esperienza. Quando è spuntata, la sessione dura più a lungo oppure il browser conserva un token di accesso persistente (in modo sicuro). Così gli utenti non devono accedere a ogni visita. Per gli account a basso rischio è sicuro. Per gli account ad alta sicurezza (finanziari, sanitari, pannelli di amministrazione) salta questa opzione o richiedi una nuova autenticazione per le azioni sensibili.
Se includi una casella "Ricordami", sii esplicito su cosa fa. "Ricordami per 30 giorni" è più chiaro di un semplice "Ricordami".
Link "Password dimenticata"
Metti un link "Password dimenticata?" direttamente sotto il campo password o a destra. Non è facoltativo. Gli utenti dimenticano le password. Offri un percorso evidente per reimpostarla. Se non trovano il link, lasciano il sito e magari non tornano più.
Come dovrebbe funzionare un modulo di reimpostazione della password?
Un flusso di reimpostazione della password ha più passaggi. Ogni passaggio conta. Ogni passaggio è un punto in cui gli utenti possono confondersi e abbandonare.
Passaggio uno: richiedere la verifica via email
Il flusso di reimpostazione inizia quando un utente clicca su "Password dimenticata" nel modulo di accesso. Arriva su una pagina che dice qualcosa come "Inserisci il tuo indirizzo email per reimpostare la password." Compare un solo campo email. Tutto qui. Nessun campo in più. Nessuna richiesta di nome utente o domande di sicurezza. Solo l'email.
Il pulsante dovrebbe dire qualcosa di chiaro e orientato all'azione. "Invia il link di reimpostazione" o "Ricevi le istruzioni" dice cosa succede dopo. "Invia" è vago.
Passaggio due: inviare il link di reimpostazione via email
Quando inviano la loro email, il tuo sistema manda subito una email di reimpostazione della password. L'email dovrebbe arrivare in pochi secondi, non in minuti. La velocità conta. Se l'email ci mette 10 minuti, gli utenti pensano che non abbia funzionato e riprovano, o peggio, se ne vanno.
L'email di reimpostazione contiene un link univoco (o un codice da inserire nella pagina successiva). Quel link dovrebbe scadere dopo un tempo stabilito, di solito 24 ore. Un link che non scade mai è un rischio per la sicurezza se qualcuno ottiene accesso alla loro email.
Passaggio tre: verificare il link e mostrare il modulo di reimpostazione
Quando cliccano sul link di reimpostazione nell'email, arrivano al modulo di reimpostazione della password. Questa pagina dovrebbe confermare con chiarezza cosa sta succedendo: "Reimposta la tua password" o "Crea una nuova password". Nessun dubbio sul fatto di essere nel posto giusto.
Mostra l'indirizzo email per cui stanno reimpostando la password. "Stai reimpostando la password per example@email.com." Li rassicura che stanno reimpostando l'account giusto.
Passaggio quattro: indicare chiaramente i requisiti della password prima dell'invio
Mostra i requisiti della password nel modulo di reimpostazione PRIMA che provino a inviare. Non farli indovinare. "La tua password deve avere almeno 12 caratteri, includere una lettera maiuscola, un numero e un carattere speciale." Sii specifico. Mostra esempi di ciò che è valido.
Un indicatore di robustezza della password (una barra che mostra debole, media, forte) aiuta gli utenti a capire se la loro password rispetta i requisiti senza inviare e ricevere un errore. Alcuni utenti lo trovano utile. Altri lo trovano frustrante se i requisiti non sono chiari. Se usi un indicatore di robustezza, abbinalo a requisiti scritti in modo esplicito.
Passaggio cinque: campo password e conferma
Chiedi una nuova password. Poi chiedi di confermarla scrivendola di nuovo. Questo passaggio di conferma intercetta gli errori di battitura. Lo svantaggio è che un campo di conferma aggiunge attrito. Le ricerche mostrano che togliere il campo di conferma della password aumenta i tassi di completamento. Se lo tieni, fai in modo che entrambi i campi abbiano un interruttore "Svela password", così possono verificare che i due inserimenti coincidano prima di inviare.
Passaggio sei: conferma immediata e passi successivi
Quando reimpostano con successo la password, mostra un messaggio di successo. "La tua password è stata reimpostata. Ora puoi accedere con la nuova password." Poi offri un link per tornare al modulo di accesso o un pulsante che dice "Vai all'accesso", così non devono navigare o cercare.
Invia anche una email di conferma. "La tua password è stata reimpostata di recente. Se non sei stato tu, clicca qui per mettere in sicurezza il tuo account." Li avvisa se qualcun altro ha reimpostato la password e dà loro un modo per annullare.
Dove vanno i moduli di accesso sul tuo sito?
I moduli di accesso non sono decorativi. Devono essere trovabili senza doverli cercare.
Header o navigazione
Il posto più visibile è l'header. Un link (o pulsante) "Accedi" in alto a destra sul tuo sito è dove gli utenti se lo aspettano. Quando ci cliccano, portali a una pagina di accesso dedicata oppure apri una finestra modale con il modulo di accesso. Gli utenti mobili si aspettano l'opzione di accesso nel menu a hamburger. Non nasconderla mai dietro più livelli di navigazione.
Pagina di accesso dedicata
Crea una pagina dedicata `/login` o `/sign-in`. Questa pagina contiene il modulo di accesso e nient'altro. Niente articoli del blog. Niente testi di marketing. Solo il modulo e l'eventuale testo di aiuto necessario. Una pagina pulita e mirata converte meglio che incorporare il modulo di accesso in una pagina generica.
Pagina di reimpostazione della password
Il modulo di reimpostazione della password dovrebbe stare a un URL dedicato come `/reset-password` o `/forgot-password`. Questa pagina è raggiungibile solo dal modulo di accesso o da un link nell'email di reimpostazione. Non dovrebbe essere indicizzata dai motori di ricerca. Aggiungi `noindex` a questa pagina nel tuo HTML o in robots.txt, così Google non cerca di posizionarla.
Errori comuni nel design dei moduli di accesso
Anche i moduli di accesso fatti con buone intenzioni hanno spesso problemi che peggiorano l'esperienza degli utenti.
Troppi campi prima dell'accesso
Alcuni siti chiedono nome utente, email, telefono e risposta di sicurezza nel modulo di accesso stesso. Non farlo. L'accesso non è la registrazione. Chiedi solo email e password. Tutto il resto è attrito in più.
Requisiti della password nascosti o poco chiari
Se i requisiti della password sono nascosti fino all'invio, gli utenti si frustrano. Inseriscono una password. Premono invia. Compare un errore: "La password deve avere 12 caratteri e includere un numero." Ora devono riprovare. Mostra i requisiti subito.
Nessuna opzione per mostrare la password
Gli utenti non vedono ciò che hanno scritto. Inviano. Sbagliano. Riprovano. Sbagliano di nuovo. Un semplice interruttore evita questa frustrazione.
Messaggi di errore confusi
Non dire mai agli utenti "Accesso non valido". Non aiuta. Stanno usando l'email sbagliata? La password sbagliata? L'account non è attivato? Sii specifico. "Nessun account trovato per questo indirizzo email" o "La password non è corretta" dice loro cosa correggere. Oppure, se vuoi restare vago per motivi di sicurezza, offri un percorso di recupero. "Email e password non corrispondono. Riprova o reimposta la password."
Il link di reimpostazione scade troppo presto
Un link di reimpostazione che scade in 15 minuti frustra gli utenti. Controllano l'email dopo il lavoro. Il link non funziona più. Devono ricominciare. Dai loro almeno 24 ore.
Il flusso di reimpostazione porta a una pagina confusa
Alcuni flussi di reimpostazione portano gli utenti a una pagina che non dice chiaramente cosa fare. Cliccano sul link di reimpostazione. Arrivano su una pagina con un testo poco chiaro e senza modulo. Pensano che qualcosa sia andato storto. Rendilo ovvio. "Reimposta la password per example@email.com" con un campo password e un pulsante di invio.
Considerazioni sulla sicurezza per accesso e reimpostazione della password
Un modulo di accesso è una parte del tuo sito fondamentale per la sicurezza. Proteggilo come si deve.
Usa HTTPS per tutto il traffico di accesso
La tua pagina di accesso deve essere servita tramite HTTPS, non HTTP. HTTPS crittografa i dati in transito, così gli hacker non possono leggere email e password mentre viaggiano verso il tuo server. Non è negoziabile. Se il tuo sito non ha un certificato SSL, procuratelo. La maggior parte dei provider di hosting oggi offre certificati SSL gratuiti.
Convalida la robustezza della password sul server
La convalida nel browser aiuta gli utenti, ma non farci affidamento da sola. La convalida JavaScript può essere aggirata. Convalida la password sul tuo server. Controlla che rispetti i tuoi requisiti. Accetta solo password che rispettano i tuoi standard di robustezza.
Applica hash e salt alle password nel database
Non conservare mai le password in chiaro. Usa un algoritmo di hashing sicuro (come bcrypt o Argon2) con salt. Anche se qualcuno viola il tuo database, non può leggere le password. Una password con hash corretto non può essere ricostruita risalendo alla password originale.
Limita la frequenza dei tentativi di accesso
Se qualcuno prova ad accedere 10 volte in un minuto, bloccalo. Il rate limiting previene gli attacchi a forza bruta, in cui gli hacker provano migliaia di combinazioni di password. Dopo alcuni tentativi falliti, fai una pausa di 15 minuti prima di consentire altri tentativi.
Fai scadere in fretta i token di reimpostazione
Un token di reimpostazione della password che funziona per 24 ore è lo standard. I token che funzionano per 7 giorni o più aumentano il rischio che un account email compromesso porti a un account del sito compromesso. Tieni i token di breve durata.
Registra l'attività di accesso per individuare le frodi
Tieni un registro dei tentativi di accesso riusciti e falliti. Se qualcuno accede da un nuovo paese o a un orario insolito, segnalalo. Alcuni sistemi inviano un'email quando un account accede da un nuovo dispositivo. Avvisa il titolare dell'account se qualcun altro vi ha avuto accesso.
Moduli di accesso su mobile: cosa cambia?
Il mobile cambia il modo in cui devono funzionare i moduli di accesso.
Aree di tocco e dimensione dei pulsanti
Su mobile le dita non sono precise come i cursori. Pulsanti e campi di input devono essere più grandi. Il pulsante di invio dovrebbe essere alto almeno 44 pixel. I campi di input dovrebbero essere abbastanza alti per scrivere comodamente. Punta a un'altezza di 44-48 pixel.
Tastiere mobili e tipi di input
Usa `type="email"` per il campo email. Dice ai dispositivi mobili di mostrare la tastiera per le email con i simboli @ e . Senza, gli utenti devono cambiare modalità di tastiera. Usa `type="password"` per il campo password, così la tastiera corrisponde. Questo piccolo dettaglio fa risparmiare tocchi e frustrazione.
Compilazione automatica e gestori di password
I browser mobili e le app per gestire le password possono compilare in automatico le credenziali di accesso. Assicurati che i tuoi attributi HTML lo supportino. Includi `autocomplete="username"` nel campo email e `autocomplete="current-password"` nel campo password. È una grande comodità su mobile, dove scrivere è più lento.
Layout del modulo su schermi piccoli
Impila i campi in verticale. Non mettere email e password affiancate sullo schermo di un telefono. Un campo per riga. Il modulo dovrebbe usare tutta la larghezza con margini adeguati. Un modulo che sembra stretto su mobile non viene completato.
Evita la sovrapposizione con la tastiera mobile
Quando compare la tastiera mobile, copre metà dello schermo. Assicurati che il pulsante di accesso sia visibile sopra la tastiera, oppure offri un modo per chiudere facilmente la tastiera. Alcuni siti mostrano il pulsante solo dopo che la tastiera si chiude. Frustra gli utenti. Tieni il pulsante visibile.
Domande frequenti
Quanti requisiti devo chiedere per la password?
Devo mostrare un indicatore di robustezza della password?
E se qualcuno dimentica la password E il suo indirizzo email?
Mi serve l'autenticazione a due fattori nel modulo di accesso?
Ogni quanto qualcuno dovrebbe reimpostare la password?
È meglio chiedere il nome utente o l'indirizzo email?
Come WEMASY ti aiuta con i moduli di accesso e di reimpostazione della password
Il creatore di moduli di WEMASY supporta flussi di accesso e di reimpostazione della password sicuri. Crea un modulo di accesso con campi email e password. Aggiungi con un clic un interruttore per mostrare la password. Imposta i requisiti della password (lunghezza, maiuscole, numeri, caratteri speciali). Usa la logica condizionale per mostrare o saltare una casella "Ricordami" in base alle tue esigenze di sicurezza. Collegati al sistema di autenticazione di WEMASY o integra provider di autenticazione esterni tramite API. WEMASY gestisce in automatico l'hashing delle password, il rate limiting e la gestione delle sessioni. Le email di reimpostazione della password vengono inviate in modo sicuro dal tuo dominio. I token di reimpostazione scadono dopo 24 ore. Scopri cosa è incluso nei piani WEMASY.