7 step per creare una Form: ecco cosa abbiamo imparato al WMExpo

Il 30 Settembre e il 1 Ottobre siamo stati presenti come media partner all’evento “Web Marketing Expo, l’eccellenza italiana del web marketing”. Un evento che si prefiggeva di lasciare ai partecipanti moltissimi stimoli sull’universo del web marketing attraverso gli speech di figure altamente competenti del settore. Sicuramente posso dire che l’aspettativa su questo evento non è stata delusa.

Fra più di trenta relatori e le centinaia di casi citati mi permetto di soffermarmi su una tematica che a me sta molto a cuore: la form. Spesso brutta, maltrattata e data per scontata quando invece potrebbe essere una risorsa incredibile. L‘intervento che abbiamo ritenuto più interessante a questo proposito è quello di Nicola Bonora, eccone i punti salienti.

Form:

State pensando di inserire una form per registrarsi al vostro sito o per iscriversi alla vostra newsletter? Sembrerebbe una cosa banale creare una form, basta pensare ai campi da inserire ed il gioco è fatto.

In realtà realizzare una form è un processo molto più complesso ed articolato, fatto di piccole accortezze che possono addirittura andare a stimolare la compilazione della form da parte degli utenti, permettendogli di regalarci le loro informazioni.

Innanzitutto dobbiamo pensare che la form deve essere utile, facile da usare e deve anche essere bella come tutti gli elementi di interfaccia con gli utenti.

Partendo con ordine guardiamo tutti gli elementi che possono fare la differenza in una form:

1. Come organizzare i dati:

A questo proposito viene suggerito il modello TTSS: taglia, tieni, sposta, spiega.

Taglia: chiediamoci per ogni campo se si ha davvero bisogno del dato, tuttavia non è così facile saperlo perché il bisogno può derivare dall’ interno o dall’esterno. Nel dubbio tagliateli! Ci dobbiamo, inoltre, poi chiedere se il dato è davvero sensibile non nel senso normativo ma se è un termine che può irritare l’utente, come il numero di telefono, nel caso bisogna valutare seriamente se toglierlo o tenerlo.
Tieni: teniamo i dati che sono fondamentali per noi e se è un dato che non va ad irritare eccessivamente il consumatore durante la compilazione.
Sposta: se un dato è sensibile chiediamoci se è un dato che ci serve ora in questo momento o se possiamo anche chiederlo successivamente. Infatti, se il nostro intento è quello di instaurare una relazione con l’utente tramite la form significa che la relazione continuerà nel tempo e quindi possiamo spostare la richiesta in un altro momento, magari a fronte di uno scambio.
Spiega: se ho bisogno proprio adesso di quei dati sensibili allora spiego all’utente perché proprio ora glieli chiedo, in questo modo vado a tranquillizzarlo.

2. La gestione dello spazio

In questo caso le dimensioni contano, eccome se contano! Perché lasciare un campo d’inserimento per il cap da 35 caratteri quando sappiamo benissimo che ne bastano 5? Cercare di usare in modo intelligente lo spazio della form, soprattutto nella versione mobile, fa sicuramente la differenza. Altro elemento da non trascurare è la continuità semantica. Associare il CAP al comune ci dà anche una continuità semantica e facilita la leggibilità complessiva della form.
È da tenere presente che su schermi grandi si può allineare anche a sinistra perché abbiamo più spazio a disposizione e allora si può abbassare l’altezza della form per aiutare la percezione complessiva così che l’utente sappia quanto impegno ha davanti a se.

3. Input dei dati:

Da mobile si tende a perdere la visione d’insieme, ma la si può comunque dare cercando di tenere l’utente il più possibile sulla stessa tipologia di inserimento dati, se poi possiamo comprimere in un’unica casella più dati è ancora meglio. Inoltre, possiamo facilitare l’inserimento dei dati impostando per ogni casella la tastiera corretta per quel tipo di dato (tastierino numerico se dobbiamo inserire il CAP ad esempio o quella con la @ se si deve inserire una mail). Ultima tendenza è quella di evitare il  dropdown questo perché per un unico campo si devono fare troppe azioni.

Su questo filone vi consiglio  Fuck Drop Downs un intero sito dedicato a creare una schiera di haters verso il drop down e credo che dopo averlo visitato e aver visto la presentazione degli autori non vorrete più vedere una tendina in vita vostra!

4. Dimensione delle aree:

L’ampiezza di 7×7 mm è l’ampiezza ideale dell’area toccabile di un bottone a prescindere che la dimensione dell’elemento toccabile sia più piccolo. Infatti, più è ampia l’area di selezione più è dimostrato che vengono utilizzati i bottoni e si evita che l’utente non riuscendo a premere il bottoni esca dalla form.

Perché parliamo di millimetri e non pixel? Perché la dimensione dei pixel sugli schermi retina è diversa da quelli non retina e di conseguenza la dimensione effettiva del bottone sarebbe diversa e il web designer deve interpolare questa dimensione e applicarla sui singoli dispositivi.

5. Call to action:

Decidere uno stile per la call to action primaria e se c’è anche per quella secondaria è fondamentale. È bene scegliere un solo bottone all’interno della pagina, più pulsanti all’interno della pagina vanno bene solo se hanno la stessa call to action perché la percezione dell’azione è corretta dal punto di vista dell’utente, altrimenti verrebbe disorientato. È sbagliato invece usare diverse call to action all’interno di una stessa pagina perché l’utente non saprebbe cosa deve fare e dove andare. Attenzione ai fantasmi e alle tentazioni artistiche in merito ai bottoni. Il bottone si deve leggere e deve essere chiaro che è un bottone, cioè che toccandolo l’utente fa succedere qualcosa.

6. Feedback e relazioni:

L’utente tenderà a sbagliare, anche se si fa una form perfetta. Ad esempio Facebook alla registrazione se trova un possibile errore o se pensa che ci si stia registrando con un nome che non è il vero nome dell’utente lo fa notare. Un altro esempio è Trenitalia che selezionando un orario di partenza, per una qualsiasi tratta, come ad esempio le 10.10 e cercando, erroneamente, un viaggio di ritorno alle 9.50 giustamente ci fa notare che non è possibile selezionare un viaggio di ritorno con orario antecedente a quello di partenza però tecnicamente sarebbe stato più semplice se avessero proposto un orologio per il viaggio di ritorno già settato dopo l’ora del viaggio di partenza.

7. Brand:

Se ci siamo messi in sicurezza prima con tutte queste tecniche di prevenzione abbiamo la possibilità di fare qualcosa di bello per parlare di noi stessi e della nostra azienda. Se stiamo realizzando una form cerchiamo di parlare di noi stessi come faremmo nelle altre forme di comunicazione. Creare una form animata che cambia mentre la si compila, che suggerisce modifiche con le animazioni può cambiare completamente la percezione della form.

Ad esempio Asos chiede un dato potenzialmente irritabile come la data di nascita che però fa percepire meno irritante spiegando che farà uno scherzetto il giorno del compleanno e nel momento in cui si completa l’inserimento del dato ti dice quanti giorni mancano al tuo compleanno. Queste sono micro interazioni che fanno davvero la differenza e che fanno venir voglia di compilare la form.

In conclusione:

Dopo tutto quello che è stato detto possiamo dunque riassumere così: le form devono essere form più leggibili, in linea con l’utente e più performanti.

Guardando due aziende che si dimostrano sempre un passo avanti alle altre quali Facebook e Apple, vediamo come questi concetti siano ben interpretati. Facebook inserisce già automaticamente i dati nelle form permettendo di far risparmiare all’utente tempo e fatica mentre Safari sta sperimentando lo screening della carta di credito anziché l’inserimento manuale.