Alcuni con­si­gli sulla pro­get­ta­zione dei form.

Layout dei form

Quando il form dev’essere com­pi­lato velo­ce­mente e con dati che sono fami­liari all’utente, la dispo­si­zione più adatta è quella con eti­chette ver­ti­cali.
Vantaggi: pro­ces­sa­mento rapido; legame visivo fra eti­chette e campi. Svantaggi: incre­mento dello spa­zio ver­ti­cale.
Le eti­chette andreb­bero evi­den­ziate con l’uso del grassetto.

Se i dati da com­pi­lare non sono fami­liari, l’uso di eti­chette alli­neate a sini­stra rende più sem­plice capire cosa viene richie­sto: l’utente può con­cen­trarsi sulle eti­chette senza essere inter­rotto dai campi.
Vantaggi: facile scan­sione delle eti­chette; spa­zio ver­ti­cale ridotto. Svantaggi: il legame visivo fra l’etichetta e il campo viene indebolito.

Un’alternativa è quella di alli­neare a destra le eti­chette.
Vantaggi: legame visivo fra eti­chetta e campo; spa­zio ver­ti­cale ridotto. Svantaggi: minore leg­gi­bi­lità delle etichette.

Uso di ele­menti visuali

I van­taggi del lay­out alli­neato a sini­stra può indurre ad aggiun­gere aiuti visivi per com­pen­sarne i difetti, ad esem­pio, tra­mite colori di sfondo e gri­glie. Tuttavia, l’aggiunta di ele­menti tende a distrarre l’occhio e non pro­duce il risul­tato desiderato.

Azioni pri­ma­rie e secondarie

Ogni form ha (o dovrebbe avere) un’azione prin­ci­pale, come “Submit”, “Save”, “Invia” ecc. ed even­tual­mente altre azioni di impor­tanza minore. In que­sti casi l’azione prin­ci­pale deve avere un peso visivo mag­giore rispetto a tutte le altre.

Il pul­sante gra­fico ideale dovrebbe essere:

• Ridimensionabile oriz­zon­tal­mente in base alla quan­tità di testo
• Ridimensionabile nelle due dimensioni
• Poter avere gli angoli smussati
• Avere aree non cliccabili
• Essere leg­gi­bile quando le imma­gini sono disabilitate

L’articolo pro­pone di usare l’elemento <input type="submit">, accop­piato con l’uso di JavaScript per sosti­tuire l’elemento con un link che verrà poi abbel­lito. In que­sto modo il form rimarrà uti­liz­za­bile anche nel caso in cui JavaScript sia disabilitato.

La cosa che mi lascia per­plesso è che non viene fatto nes­sun cenno alla pos­si­bi­lità di usare l’elemento button (ma vedi anche i commenti).

Il primo pro­blema è la dif­fi­coltà di IE nel cal­co­lare la lar­ghezza di ele­menti di blocco, all’interno di ele­menti floa­ted senza il valore di width spe­ci­fi­cato. Questo serve nel caso dei pul­santi per fare in modo che il link si dimen­sioni in base alla quan­tità di testo.

Il secondo pro­blema è legato al posi­zio­na­mento asso­luto degli angoli del pulsante.

La solu­zione, un po’ pesante dal punto di vista del mar­kup, con­si­ste in 4 span nidi­fi­cati che avvol­gono uno span con il testo.

I difetti segna­lati sono:

• Gli angoli non pos­sono essere trasparenti;
• può essere dif­fi­cile usare sfondi non piatti;
• il pul­santi si può espan­dere solo fino alle dimen­sioni dell’immagine.

Articolo ori­gi­nale

Altri arti­coli correlati:

• Styling the Button ele­ment with Sliding Doors;
• Rediscovering the Button ele­ment (citato prima).

Spesso le infor­ma­zioni neces­sa­rie per for­nire un aiuto con­creto alla com­pi­la­zione dei form sono troppo lun­ghe, com­pro­met­tendo l’usabilità dei form. In que­sto caso pos­siamo gene­rare in modo dina­mico l’aiuto for­nito, in modo che sia visi­bile solo quando occorre. Ci sono diverse possibilità.

Esposizione in–line

L’aiuto viene mostrato quando il focus di un ele­mento del form è atti­vato e/o quando il focus è all’interno di un gruppo di ele­menti.
Il difetto prin­ci­pale di que­sto metodo è che l’utente non sa della pre­senza dell’aiuto fino a quando il focus non viene attivato.

Aiuti in–line atti­va­bili dall’utente

Prendo spesso la forma di icone piaz­zate in posi­zione adatta, vicino agli ele­menti del form, che mostrano un aiuto solo se ven­gono atti­vati espli­ci­ta­mente dall’utente.
La quan­tità di testo non dovrebbe essere tale da scon­vol­gere il lay­out del form; in alter­na­tiva si pos­sono usare dei rol­lo­ver, che hanno però il difetto di poter essere fasti­diosi visto che si atti­vano ogni volta che il mouse ci passa sopra.

Sezioni di aiuto atti­va­bili dall’utente

Alcuni mostrano l’aiuto in posi­zioni rego­lari e non accanto i sin­goli ele­menti del form, alle­viando i pro­blemi di lay­out senza sacri­fi­care troppo la pos­si­bi­lità di for­nire infor­ma­zioni dettagliate.

Articolo ori­gi­nale

Sapevo dell’esistenza dell’elemento button ma, dall’alto della mia appro­fon­dita cono­scenza degli stan­dard, pen­savo fosse uti­liz­za­bile solo attra­verso JavaScript, ma mi sba­gliavo: button offre le stesse fun­zio­na­lità dell’input, aggiun­gen­doci ulte­riori opzioni per il rendering.

In que­sto arti­colo ven­gono mostrate alcune delle pos­si­bi­lità, anche se non c’è di niente di ine­dito per chi abbia un po’ di cono­scenza dei css.

Il ren­de­ring delle tabelle è piut­to­sto diverso dagli altri ele­menti di blocco e può quindi suc­ce­dere che il bro­w­ser non rie­sca “con­te­nere” la lar­ghezza di una tabella, anche se cor­ret­ta­mente spe­ci­fi­cata nei fogli di stile.

La solu­zione, per la tabella, è quella di usare table-layout:fixed, che fun­ziona su tutti i bro­w­ser. Per il testo non ci sono delle solu­zioni così otti­mali, dato che l’ideale è la pro­prietà word-wrap, spe­ci­fi­cata nel modulo CSS3 degli effetti di testo, che è sup­por­tata solo da IE/Win, Safari ma non da Firefox. L’alternativa può essere quella di usare overflow:hidden.

Maggiori det­ta­gli nell’articolo ori­gi­nale.

Era ora! Finalmente un libro che si occupa solo del design dei form. Ho sem­pre tro­vato abba­stanza irri­tante la scarsa atten­zione a que­sto argo­mento nei vari libri in ambito web/css/javascript, anche se ne com­prendo benis­simo le ragioni: è una rogna e nes­suna giu­dica un sito dalla qua­lità dei form; eppure sono un ele­mento cruciale.

Adesso attendo un libro ana­logo per il design delle tabelle per i dati ;-)

Adesso c’è anche il wid­get

Ennesimo sito per creare schemi colore. Manca delle carat­te­ri­sti­che di con­di­vi­sione di siti come COLOURLovers o kuler ma, a livello d’interfaccia è uno dei migliori che ho visto.

Yahoo! ha rila­sciato la ver­sione 2.2.0 della YUI. Le novità più suc­cose, a mio parere, sono il sup­porto per le tabelle e quello per i pul­santi.

Imbarazzante… Adesso la barra di menu dell’editing è tor­nata come prima, con l’aggiunta del cor­ret­tore orto­gra­fico (solo inglese, ovvia­mente). Come non detto…