Ci sono 3 articoli con tag form (questa è la pagina 1 di 1).
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:
Le 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.
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.
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.
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.
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.
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.
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.
(traduzione da Web Application Form Design, di User Interface Engineering)
Creare 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)