FancyForm per form veramente cool

fancy form FancyForm è una libreria javascript in grado di migliorare l’aspetto dei classici checkbox e radiobutton con una grafica più accattivante. Semplicissimo da usare, FancyForm è uno strumento flessibile e potente. Inoltre si adatta facilmente a browser attempati.

In poche parole:

  • Setup veloce: sono necessarie solo 2 righe di codice
  • Completamente estendibile: sono innumerevoli le opzioni di personalizzazione previste
  • Downgrade facile: i forms sono compatibili anche su browser vecchi

Esempio di FancyForm

Progettare form per applicazioni web

Web form - come progettarleLe applicazioni web usano i form in modo estensivo per raccogliere dati dagli utenti. Non sempre, però, vengono usate in modo consistente. Variazioni nell’allineamento dei campi e delle loro relative etichette, bottoni e gli elementi visuali che attorniano i form possono aiutare o impedire il corretto utilizzo degli stessi.

Oggi segnalo un ottimo articolo che prende in considerazione alcuni aspetti che caratterizzano i moduli web e ci aiuta a comprenderne i pregi e i difetti di alcune soluzioni.

Layout

Quando il tempo di compilazione deve essere ridotto al minimo e i dati da raccogliere sono facili e familiari all’utente come il nome, l’indirizzo, allora il layout da preferire è quello verticale. Etichette e campi sono uno sopra l’altro in modo da diminuire il movimento degli occhi e facilitare di conseguenza la lettura. L’accoppiamento tra etichetta e campo è data dalla prossimità verticale. Spesso, per aumentare il peso visivo dell’etichetta si consiglia di renderla in grassetto.

form verticale

Quando invece i dati da raccogliere non sono familiari e il modulo è lungo, allora l’approccio migliore è quello delle etichette allineate a sinistra. In questo caso l’utente sarà facilitato nella lettura dei campi che potrà leggere tutti insieme.

etichette allineate a sinistra

Un modo alternativo è quello di allineare le etichette a destra, in modo da rafforzare il legame tra etichetta e campo. D’altro canto, questa soluzione crea uno spazio irregolare a sinistra che rende la scansione di lettura verticale meno immediata. Noi occidentali, abituati a leggere da sinistra a destra, preferiamo avere un punto fisso a sinistra, all’inizio della riga e per questo è meglio allineare le etichette a sinistra.

etichette allineate a destra

Uso di elementi visuali

Visto che la soluzione "orizzontale" a sinistra, sembra essere la migliore, cerchiamo di ovviare al suo principale svantaggio, cioè della separazione visiva tra il campo e l’etichetta.

Si possono aggiungere quindi sfondi colorati e righe di separazione. Sebbene questo approccio sembri ottimale, in realtà comporta alcuni problemi. Il modulo è in effetti sporcato da elementi che distraggono la nostra innata capacità di raggruppare visivamente gli elementi. Nella figura sotto, vediamo che sono stati introdotti 15 nuovi elementi.

elementi visuali

Questo non significa che sfondi e righe di separazioni non debbano mai essere usate. Quando è fondamentale dividere blocchi di domande, sottili righe orizzontali e leggeri sfondi si possono usare. Entrabi questi elementi grafici sono soprattutto utili quando si vuole evidenziare il bottone che intraprende l’azione.

elementi correlati

Azioni primarie e secondarie

L’ultimo aspetto che prendiamo in considerazione sono i bottoni o i link che permettono di compiere l’azione principale e secondaria. Di solito si tratta di sottomettere il modulo o di cancellarlo.

L’azione primaria deve essere visualmente molto carica (colori chiari, testo grassetto, sfondo colorato) rispetto agli altri elementi del modulo e deve essere allineata ai campi di immissione.

Quando un modulo ha più di un’azione possibile, come "continua" e "torna indietro", è consigliato diminuire la forza visiva dell’azione secondaria. Questo minimizza la possibilità d’errore da parte dell’utente e conduce l’utente alla terminazione del processo di compilazione.

 bottoni d'azione

(traduzione da Web Application Form Design, di User Interface Engineering)

Form online, AJAX ci mette lo zampino

Form OnlineCreare dei form non è mai stato così facile! Grazie alla pluricitata tecnologia Ajax, con dei semplici di trascitamento, è possibile aggiungere ed ordinare in qual si voglia elemento form. Sono due i siti che offrono questo tipo di servizio. Il primo è Jotform.com, offre un impaginazione molto semplice e trascinando gli elementi sul form, situati a destra, sull’area lavorativa, vi accorgerete che sarà semplice ed immediato l’ordinamento anche l’ordinamento. Il secondo, è ancora in fase di lavorazione ma è già disponibile un demo che riesce a rendere l’idea delle potenzialità di questo script. Si chiama Wufoo.com, per sapere quando sarà concluso il periodo test, potrete iscrivervi ad una newsletter. (via Desmm.com)