Form e user experience

Home, pagina contatti, landing page, pagine dedicate a singoli servizi, questi sono solo alcuni esempi di dove può essere collocato un form. Pensare un form per ognuna di queste pagine non è mai banale. Si è dimostrato che quando un form segue le linee guida base di usabilità, il tempo di riempimento e notevolmente ridotto e esiste una probabilità doppia che questo venga inviato.

Vediamo alcune delle best practice di cui dobbiamo tenere conto quando progettiamo un form per il nostro sito:

• Essere breve. Ricordandoci però che essere breve non significa dover rinunciare a chiedere cose importanti. Si potrà decidere di rimuovere alcuni campi e di richiedere quelle informazioni solo in un secondo momento.
• Posizionamento delle etichette. Le etichette devono essere posizionate vicino ai campi che descrivono. Immediatamente sopra per la versione mobile e sopra o meglio accanto al campo per la versione desktop. Evitiamo anche una eccessiva spaziatura tra etichetta e campo.

• Layout a colonna singola. A livello visivo meglio sviluppare il form su colonna singola. Ci sono alcune eccezioni, esempio vi sono campi tra loro correlati: Nome e cognome, cap, città e regione.

• Utilizzare una sequenza che sia logica. Pensiamo alle carte di credito: numero di carta + data di scadenza + codice di sicurezza.

• Dimensione campi. La dimensione del campo dovrebbe essere legata a ciò che stiamo chiedendo, esempio: non sarà necessario un campo lunghissimo se chiediamo il cap o il numero telefonico.

• Scelta della tipologia del campo. Evitiamo di usare elenchi a tendina quando ci sono solo 2/3 opzioni, che possono essere visualizzate con pulsanti di opzione.

• Distinguere chiaramente i campi facoltativi da quelli obbligatori. Indichiamo in modo chiaro il tutto utilizzando le etichette.

• Spiegare con attenzione i requisiti richiesti per ogni campo. Esempio, nel campo password indichiamo precisamente la tipologia di caratteri che si possono utilizzare: maiuscole, simboli speciali.

• Messaggi di errore. Rendiamo i messaggi di errore ben visibili, usiamo colori a contrasto o spunte. Evitiamo così che gli utenti si possano bloccare su possibili errori.

• Evitare il tasto reset. Se questo viene cliccato per errore l’utente sarebbe costretto a compilare nuovamente tutto il form, e non tutti lo rifarebbero.

• Bottone invio chiaro. Usiamo un bottone d’invio chiaro, di dimensioni adeguate, anche il colore è importante. Ricordiamoci che rappresenta la nostra call to action.

Possiamo concludere dicendo che queste sono solo alcune delle cose da fare in fase di progettazione di un form, e che molto dipende anche dal contesto in cui ci troviamo.