Form Design

Designing usa­ble forms #

Ogni form è com­po­sto da tre livelli: per­cet­tivo (lay­out), col­lo­quiale (domande e rispo­ste) e rela­zio­nale (la strut­tura del com­pito). A un livello più meta­fo­rico pos­siamo con­si­de­rare un form come una tazza di caffé, dove la tazza è il livello per­cet­tivo, il caffé è il livello col­lo­quiale e l’acqua quello relazionale.

Alcune domande da porsi per miglio­rare l’usabilità di un form:

• livello rela­zio­nale:
  • per­ché stai facendo que­ste domande?
  • È que­sta la domanda adatta a que­sto punto?
  • Puoi otte­nere l’informazione richie­sta in qual­che altro modo?
  • Stai chie­dendo all’utente di fare qual­cosa che invece dovre­sti fare tu?
• Livello col­lo­quiale:
  • disponi le domande nell’ordine corretto;
  • rifletti sulla pro­ve­nienza delle risposte;
  • rag­gruppa gli argo­menti in base alle risposte;
  • for­ni­sci le rispo­ste chiuse, se pos­si­bile, ma lascia spa­zio per even­tuali rispo­ste per­so­na­liz­zate, se adeguato;
  • cali­bra lo spa­zio dedi­cato alla rispo­sta in base alla sua lun­ghezza prevista.
• Livello per­cet­tivo:
  • usa inte­sta­zioni e colori per rag­grup­pare le aree del form in argomenti;
  • non aspet­tarti che gli utenti leg­gano le istru­zioni, tuttavia;
  • fai in modo che le istru­zioni siano il più sin­te­ti­che possibile.

Quali ele­menti sce­gliere in un form? #

Ci sono quat­tro ele­menti disponibili:

1. drop–down;
2. pul­santi radio;
3. check box;
4. campi di testo.

non cal­co­liamo i link, i button e i submit.

1. Qual’è lo scopo principale?

Il form è inse­rito in una pagina di navi­ga­zione o di rac­colta dati? Se la pagina è di navi­ga­zione i drop–down sareb­bero da evi­tare per­ché non visua­lizza imme­dia­ta­mente tutte le opzioni ed è più labo­rioso di link. Tuttavia que­sto è il caso più banale dato che di solito i form ser­vono a rac­co­gliere infor­ma­zioni, no?

2. Sei domande

1. È più natu­rale, per l’utente, l’inserimento libero che la selezione?
2. È facile sba­gliare risposta?
3. È neces­sa­rio rileg­gere le opzioni per capire la domanda?
4. Quante opzioni ci sono?
5. È pos­si­bile sce­gliere più di un’opzione?
6. Le opzioni sono visi­va­mente distinguibili?

Le domanda sono abba­stanza banali, gli unici appunti da fare riguar­dano la rilet­tura delle opzioni e la distin­gui­bi­lità visiva. Il primo punto scon­si­glia di usare un drop-down e con­si­glia pul­santi radio o chec­k­box. Il secondo ci ricorda di fare atten­zione a ren­dere distin­gui­bili, per quanto pos­si­bile, le varie rispo­ste: meglio scri­vere “uno” e ”dieci” piut­to­sto che “01” e “10”.

3. L’impatto del form

Una volta ristretta la rosa di ele­menti per ogni campo, con­si­de­rato sin­go­lar­mente, biso­gna allar­gare l’analisi ai vari ele­menti nel loro insieme, all’interno del form. E quindi:

• evi­tare troppi ele­menti eterogenei;
• le opzioni siano poche e concise;
• curare l’ordine delle opzioni.

Evitate i form a due colonne #

• Tendono a con­fon­dere (qual’è l’ordine giusto?);
• sono poco accessibili.

Forse non era neces­sa­rio costruirci sopra un articolo…

Due punti o no?#

Non conta; l’importante è essere costanti nella scelta. Io tendo a usarli…

Usare i tab? #

Il con­si­glio è: un form per pagina o al mas­simo un topic per pagina se il form è molto lungo. In que­sto caso, infatti, l’utente può arri­vare ad un punto in cui non sa più esat­ta­mente a che punto si trova. Non tra­scu­riamo però l’uso del form: se viene usato molto, dalle stesse per­sone, que­sto pro­blema tende a pas­sare in secondo piano.

Web Form Design in the Wild Parte 1, parte 2

Questa serie di due arti­coli rac­co­glie alcuni con­si­gli rica­vati dall’analisi di alcuni form di siti “reali”, usati tutti i giorni: hotel, biglietti aerei e così via. Ovviamente rimando alla let­tura degli arti­coli per rica­vare il con­te­sto neces­sa­rio a met­tere nella giu­sta pro­spet­tiva i con­si­gli ripor­tati qui sotto.

1. Non nascon­dere i form che devono essere com­pi­lati. Nell’esempio descritto il link che sem­brava por­tare al form, in realtà con­du­ceva l’utente alla home page, lascian­do­gli poi il com­pito di tro­varlo da solo.
2. Sii espli­cito nell’esporre il motivo per cui richiedi la com­pi­la­zione di un form. Il titolo del form dava l’impressione che l’utente dovesse essere già registrato.
3. Usa i defaults, Luke! Soprattutto quando sono dati che sono già disponibili.
4. Non trat­tare i clienti come dei sem­plici record in un data­base. Questo è un punto dif­fi­cile da rispet­tare per­ché non è solo una que­stion tec­nica ma coin­volge anche le sfu­ma­ture legate alle parole usate e anche – per­ché no – all’aspetto visuale.
5. Accertati che i mes­saggi impor­tanti abbiano un’adeguata prio­rità visiva.
6. Fai in modo che sia facile rime­diare agli errori.
7. Fai atten­zione ai dati inse­riti che con­servi. Da inten­dersi in rela­zione ai default, non a pos­si­bili impli­ca­zioni legali.
8. Spiega la ragione per richie­dere dei dati appa­ren­te­mente inu­tili. L’esempio ripor­tato è quello di un form per acce­dere al wifi di un aero­porto; una situa­zione in cui c’è spesso poco tempo e poca dispo­ni­bi­lità a per­dersi nella burocrazia.
9. Prendi in con­si­de­ra­zione una vali­da­zione inline per gli inse­ri­menti che si pos­sono facil­mente sba­gliare. Non è bello dover sot­to­met­tere un form cin­que volte per tro­vare uno user­name non ancora usato. Attenzione alle pre­sta­zioni, però. La vali­da­zione via Ajax può stres­sare il backend.
10. Distingui visi­va­mente gli errori.
11. Rimuovi tutti gli inse­ri­menti non necessari.
12. Rendi rico­no­sci­bile il per­corso di com­ple­ta­mento di un form.
13. Rimuovi le azioni secon­da­rie ogni volta che puoi.

Label pla­ce­ment in forms #

Gli studi di eye-tracking sug­ge­ri­scono alcune linee guida per il dise­gno di un form:

• le eti­chette posi­zio­nate al di sopra del campo sono di solito quelle più effi­cienti, anche se richiedo qual­che atten­zione alla giu­sta distanza fra i vari campi;
• se le eti­chette sono messe accanto al campo, il testo andrebbe alli­neato a destra;
• le eti­chette in gras­setto ten­dono ad essere più dif­fi­cili da leg­gere ma dipende anche dallo stile gene­rale del form;
• le liste sareb­bero da usare con par­si­mo­nia visto che ten­dono ad atti­rare molto l’attenzione;
• non usare un’etichetta sepa­rata per le liste, usa il default al suo posto.

Per un esem­pio di ridi­se­gno di un form seguendo, in parte, que­ste indi­ca­zioni vedi “Better Web Forms: Redesigning eBay’s Registration”.

Campi con lun­ghezza limi­tata #

Dobbiamo distin­guere fra due situa­zioni: quella con testo molto breve, dove usiamo un input e quella con testo lungo abba­stanza da non potersi ragio­ne­vol­mente aspet­tare che l’utente possa tenere il conto, dove usiamo una textarea.

Input

Nel primo caso è di solito suf­fi­ciente spe­ci­fi­care la lun­ghezza mas­sima nell’html ed even­tual­mente aggiun­gere del testo espli­ca­tivo a lato.

Textarea

Nel secondo caso la que­stione è più arti­co­lata. Se siamo for­tu­nati, il campo del data­base che con­terrà il testo inse­rito non ha limiti pre­im­po­stati e pos­siamo lasciare l’utente libero di inse­rire quanto testo vuole. È un’opzione da tenere sem­pre in con­si­de­ra­zione dato che è abba­stanza ragio­ne­vole pen­sare che non ver­ranno mai inse­rite delle moli di testo vera­mente grandi.

Se invece abbiamo un testo lungo ma limi­tato, ad es. i clas­sici 256 carat­teri, l’approccio con­si­gliato dall’articolo è di lasciare pure che l’utente superi il limite mas­simo quando sta scri­vendo, in modo che possa riar­ran­giare il testo per ripor­tarlo alla lun­ghezza mas­sima con­sen­tita. Un mes­sag­gio vicino al campo lo infor­merà della situazione.