Credi davvero che il tuo form di registrazione sia perfetto?

Enrico Comentale
TIDE
Published in
6 min readDec 7, 2020

--

Alcuni semplici (ma spesso ignorati) consigli per realizzare form di registrazione che convertono, per davvero!

Form di registrazione, questi sconosciuti

Nulla di più banale, no? Un semplice form di registrazione, dove chiedere all’utente qualche dato per poter creare un account e navigare nel nostro sito (o app che sia).

Quanto potrà essere difficile?

La risposta è: più di quanto pensi!

Il form di registrazione può rappresentare un punto di caduta per i nostri utenti, una grave interruzione al loro task-flow, dissuadendoli da un acquisto che erano in procinto di fare, facendo scordare loro l’obiettivo iniziale per cui erano atterrati sulla nostra pagina o, ancora, facendo scemare l’interesse ad iscriversi sul nostro portale.

According to Google, 61% of users are unlikely to return to a site on mobile if they had trouble accessing it and 40% visit a competitor’s site instead.

In poche parole, il risultato è perdita di clienti, di visibilità e di credibilità (e di conseguenza soldi).

Diamo un’occhiata a qualche esempio online e vediamo insieme cosa funziona realmente e cosa no, e quali sono le best practice da adottare per un form di registrazione che converte per davvero ;)

1. Semplificare la vita dell’utente

Ilya Sabin on Dribbble

Beh, da dove partiamo? Visual carino e illustrazione in trend. Ma se fossi già registrato? Magari siamo arrivati qui per sbaglio, dovremmo chiudere la pagina per aprirne un’altra, perdendo tempo e voglia. Basterebbe un piccolo link con scritto “Già registrato?”, nulla di più.

Ok va bene questa era una casistica particolare, non facile da prevedere e noi siamo pignoli e questioniamo ogni piccola cosa.

Allora prendiamo un altro aspetto, più evidente forse: ma perché non rendere disponibile, per la registrazione, account social o Google? Il processo di registrazione viene condensato in pochi secondi e qualche click, l’utente non dovrà ricordarsi un’altra password e sarà già pronto per operare sul nostro sito. Gli abbiamo risparmiato un sacco di fatica, no?

Prossimo punto: non stressare l’utente chiedendo informazioni non necessarie. Ecco che il campo per la conferma password risulta essere non necessario, ma anzi controproducente. Già scrivere la password è un’azione delicata, a cui l’utente dedica non poco impegno cognitivo. Scriverla due volte vuol dire raddoppiare il carico di stress.

La conferma della password serve per assicurarsi che l’utente abbia scritto correttamente la sua chiave di sicurezza. Ma per ovviare a questo pericolo, è sufficiente avere la possibilità di mostrare la password appena inserita.

Ultima cosa: le icone poste all’interno dei campi input sono visivamente uguali al tasto per visualizzare la password. Non ottimale come scelta.

2. Gerarchia e chiarezza

Наталья Аношкина on Dribbble

Quali campi sono obbligatori e quali no? Tutti forse? Vedendo la CTA “create account” attiva, potrei pensare di continuare anche senza inserire gli altri dati. Certo, sicuramente dovrò compilare i restanti input form, ma perché non renderlo evidente? O almeno disabilitare il tasto per proseguire fin quando non sono compilati tutti i dati. Meglio che dare un errore bloccante all’utente che sperava non fosse necessario il numero di telefono. Che poi, sarà davvero necessario il numero di telefono? Sempre meglio evitare di dilungare il flusso di registrazione per chiedere info non necessarie o che possono essere collezionate in un secondo momento.

Come sopra, aborro l’esistenza del campo “Conferma la password”.

Ultima cosa, farei un check per quanto riguarda il contrasto tra intestazione campo input e sfondo bianco.

3. Anticipare e prevenire gli errori

Antonica on Dribbble

Finalmente lo stretto necessario per quanto riguarda le informazioni richieste: mail e password. Però anche qua si può far più attenzione per costruire un’esperienza utente migliore. Sicuramente questo form mi permette di essere registrato in poco tempo (tramite account social la registrazione sarebbe ancora più rapida ma ok la smetto), però in questo caso c’è un rischio effettivo che l’utente si registri con una password digitata male per errore. E questo è un problema non da poco per l’utente, che mai riuscirà ad accedere post registrazione. Soluzione? Come visto prima, basta rendere visibile la password.

4. L’utente deve sempre essere in controllo

Vlad Valov on Dribbble

Ok qui ci sono un po’ di pain point: qual è la differenza tra “client” e “worker”? Se mi sto registrando probabilmente per me è un concetto nuovo di cui non sono a conoscenza. Qualche info in più a riguardo non sarebbe male per aiutare l’utente nella selezione.

Successivamente guardiamo i campi input. Se per caso mi interrompo, per una chiamata o una mail, o perché “è salito il caffè” e lascio a metà una compilazione, come faccio a ricordarmi qual era la richiesta senza i titoli dei campi input visibili? Dovrei cancellare quanto scritto e cliccare al di fuori del campo per poter recuperare la richiesta. Ad esempio, devo mettere la mail o un username? O tutti e due? O pensiamo al fatto che ora molti browser propongono l’auto compilazione dei campi, a volte sbagliando. Senza le label visibili, l’utente non può controllare che quanto scritto rispecchi le richieste del form e, per farlo, dovrebbe cancellare ogni testo inserito. Poco pratico no? Anzi direi irritante.

Proseguendo, se odio la conferma password figuriamoci quella per la mail.

Finalmente qua viene proposto il log-in tramite Facebook. Ma forse, se davvero vogliamo farlo così poco evidente in dimensioni, è più utile metterlo ad inizio pagina, prima che l‘utente compili tutti i campi richiesti perdendo tempo inutilmente.

5. Contestualizzare, indirizzare e aiutare

Razy Hassan on Dribbble

Qua abbiamo qualcosa di veramente usabile! Partiamo dall’alto. Il tab “Sign in — Sign up” non è male, mi permette di cambiare subito form. I titoli dei campi input sono leggibili e non spariscono alla compilazione, ricordando all’utente cosa inserire dove.

Finalmente nessuna conferma password e, finalmente, la possibilità di visualizzare quanto digitato. Ottimale la check-list per la compilazione della password: se ci sono dei vincoli allora definiamoli subito e, perché no, forniamo supporto per la compilazione evidenziando cosa è stato soddisfatto e cosa ancora no.

Infine la registrazione rapida con Google, posizionata come bottone alternativo alla conferma. Direi che ci siamo finalmente!

Conclusione

L’usabilità dei form in generale (e quindi anche quelli di registrazione) non è un tema nuovo in ambito digitale, infatti non sono poche le linee guida definite da diverse istituzioni del design. Ci hanno anche scritto un libro!

Ma nonostante ciò, sono ancora molti i siti che tutt’ora presentano form non del tutto usabili, irritanti e poco user-friendly.

Questo articolo ovviamente non copre tutte le direttive esistenti, ma piuttosto punta a dare qualche consiglio per poter creare dei form usabili e piacevoli evitando piccoli errori come quelli visti sopra.

Se pensi che abbiamo scordato qualcosa o magari alcune dritte non ti convincono, lascia un commento!

That’s it! This is Digital Experience.

Se pensi anche tu che questo articolo sia una digital experience, lasciaci qualche 👏 claps 👏👏👏 e condividilo con la tua rete! 😊
TIDE è una community fatta da giovani esperti digital.

Hai una Digital Experience da raccontare? Proponi subito il tuo articolo, scrivendoci su thisisdigitalexperience@gmail.com

--

--

Enrico Comentale
TIDE

User Experience and Interaction Designer || Ux/Ui designer and Writer @TIDE || Plant Lover