10 Consigli per un Form Migliore

di Chris Campbell, traduzione di Gdesign, 05 Dicembre 2005

Versione Stampabile

L'articolo (in lingua inglese) proviene da Particletree ed è stato tradotto e riprodotto per gentile concessione dell'autore.

Introduzione

Le entità più noiose dell'universo conosciuto, i form, sono gli ingredienti principali della dieta di ogni programmatore web. I form, che ci piaccia o no, sono responsabili dell'efficacia del nostro sito e spesso basta soltanto il loro design per stabilire se l'utente proverà a inserire dei dati o abbandonerà il sito. Senza ulteriori giri di parole, qui trovate 10 consigli per trasformare la vostra semplice vaniglia in doppio pezzo di cioccolatto con caramelle.

Il codice

Gli esempi di codice che vedremo non funzionano così come sono. Dipendono dalla libreria esterna prototype.js con addEvent incluso. Inoltre, le funzioni sotto, devono essere allegate a eventi come onclick o onmouseover.

1. Ricordate il vostro Markup

Abbiamo notato che molti dimenticano di usare gli strumenti che esistono per i form e così abbiamo messo in evidenza alcuni elementi HTML che sono nati soprattutto per i form.

Label (etichetta)

La label (etichetta) si utilizza per associare un informazione a un controllo. Se una label riceve il fuoco, passa il fuoco al controllo associato. Questo risulta utile quando un utente clicca sul nome della label e il campo associato ottiene il fuoco.

<label for="email">Email: </label>
<input type="text" id="email">

oppure:

<label>Email: <input type="text" id="email"></label>

Fieldset

"L'elemento FIELDSET consente agli autori di raggruppare tematicamente controlli correlati ed etichette. Raggruppare i controlli rende più semplice per gli utenti comprendere il loro scopo e facilita contemporaneamente la navigazione tramite selettori per i programmi utente visuali e la navigazione vocale per i programmi utente basati sulla sintesi vocale. L'uso corretto di questo elemento rende i documenti più accessibili."

Raccomandazione W3C

Legend

"L'elemento LEGEND consente agli autori di assegnare una didascalia ad un FIELDSET. Tale legenda migliora l'accessibilità quando il FIELDSET è riprodotto non visualmente."

Raccomandazione W3C

Tabindex

"Questo attributo specifica la posizione dell'elemento corrente nell'ordine dei selettori per il documento corrente. Questo valore deve essere un numero compreso tra 0 e 32767. I programmi utente dovrebbero ignorare gli zeri iniziali. L'ordine di selezione definisce l'ordine in cui gli elementi riceveranno il fuoco quando navigati dall'utente via tastiera. L'ordine di selezione può includere elementi annidati dentro altri elementi."

Raccomandazione W3C

Accesskey

"Questo attributo assegna un tasto di accesso ad un elemento. Un tasto di accesso è un singolo carattere dall'insieme di caratteri del documento. Nota: quando specificano un tasto di accesso, gli autori dovrebbero tener conto del metodo di immissione usato dal tipo di lettore previsto."

Raccomandazione W3C

Password

Aggiungendo type="password" al vostro campo input, i caratteri inseriti saranno trasformati in una serie di asterischi.

"I progettisti di applicazioni dovrebbero considerare che questo meccanismo offre solo una debole protezione di sicurezza. Benchè il codice di accesso sia mascherato dai programmi utente agli occhi di osservatori casuali, esso è trasmesso al server come testo in chiaro, e può essere letto da chiunque disponga di un accesso a basso livello alla rete."

Raccomandazione W3C

2. CSS

Non è una novità, ma i CSS possono rendere i form visivamente gradevoli. Non c'è bisogno di reinventare la ruota qui, perciò esaminate le seguenti risorse per migliorare i vostri form con i CSS e un pò di Javascript.

• Style Those Buttons - Man in Blue ci mostra come dare ai pulsanti dei form un aspetto gradevole.
• Niceforms - Niceforms fa un bel lavoro cambiando un brutto form in qualcosa di molto più sopportabile con l'uso di qualche azione CSS.
• Hide Optional Fields - In questo esempio, CSS e Javascript sono utilizzati per realizzare un form più usabile e con un aspetto migliore.
• CSS Forms - Jeff Howdens ci mostra come creare un form ben impaginato senza l'ausilio delle tabelle.

3. AutoTab

L'utente che naviga in un form, di solito utilizza il tasto tab per spostarsi tra i vari campi del form. La funzione AutoTab imposta automaticamente il fuoco al campo successivo dopo che è stata raggiunta la lunghezza massima consentita per il campo. Ciò consente all'utente di non dover utilizzare il tasto tab per muoversi tra quei campi che hanno una lunghezza massima impostata. Questa funzione è particolarmente utile per l'inserimento di dati come i numeri di previdenza sociale o i numeri di telefono che hanno un limite massimo di caratteri per ogni campo. Per esempio, dopo che l'utente inserisce il prefisso di un numero di telefono, il fuoco automaticamente si sposta al campo successivo permettendogli di inserire il suo numero di telefono senza alcuna interruzione.

Per impostare l'autotab ad un elemento input, è sufficiente inserire tre cose nel vostro markup: tabindex, il nome della classe per l'autoTab e maxlength.

<input type="text" name="areacode" class="autoTab" tabindex="1" maxlength="3"  />

Quando la pagina viene caricata, vengono associati gli eventi ai campi input per l'autotab. Se un campo ha un lunghezza massima (maxlength) e quel massimo viene raggiunto, il fuoco viene impostato automaticamente al controllo successivo con il più alto valore di tabindex. Sotto un'occhiata veloce alla nostra funzione, autoTab():

function autoTab(e) {
    if(this.value.length == this.getAttribute("maxlength") && 
        e.KeyCode != 8 && e.keyCode != 16 && e.keyCode != 9) {
            new Field.activate(findNextElement(this.getAttribute("tabindex")));
        }
}

function findNextElement(index) {
    elements = new Form.getElements('shippingInfo');
    for(i = 0; i < elements.length; i++) {
        element = elements[i];
        if(parseInt(element.getAttribute("tabindex")) == (parseInt(index) + 1)) {
            return element;
        }
    }
    return elements[0];
}

Due cose vanno sottolineate:

• Potreste usare anche input.form[(getIndex(input)+1)].focus(), ma ciò causerebbe un errore javascript in Firefox. Un esempio di quello che succede è documentato su The Javascript Source.
• Quando l'utente preme i tasti shift e tab, l'elemento precedente dovrebbe avere ancora il fuoco e l'autotab dovrebbe essere automaticamente disabilitato.

4. Informazioni sui campi

È sempre buona norma fornire informazioni che descrivono i requisiti e le restrizioni dei campi. In che modo l'utente deve sapere che una password deve avere 3 lettere maiuscole, un punto esclamativo e una lunghezza compresa tra 6 e 17 caratteri? Ispirati dai form utilizzati su Tangent, ecco alcuni suggerimenti.

• Mettete tutte le informazioni relative ai campi nel tag label. Potete inserire il className, l'accesskey e un titolo descrittivo, così tutte le informazioni saranno in un solo posto. Ciò renderà anche più semplice il lavoro al JavaScript che dovrà tirar fuori queste informazioni.
• Per mostrare le informazioni all'utente èè preferibile utilizzare onfocus al posto di onmouseover. È preferibile dare l'informazione sul campo nel momento in cui questo ha il fuoco piuttosto che darla quando ci si passa sopra con il mouse.
• È più semplice assegnare etichette e id simili al campo a cui sono associati. Per esempio, se un campo si chiama fname, chiamiamo l'etichetta lfname. Ciò rende le cose più facili al Javascript che deve estrarre l'informazione. Sotto un esempio per accedere al titolo di una label:
  p = document.createElement("p"); p.innerHTML = $("l" + this.id).title; span.appendChild(p);

5. Mostare l'errore

Quando l'utente sbaglia, è vostro dovere mostargli l'errore rapidamente ed in maniera efficace. Ecco qualche suggerimento su come mostrare gli errori nei form:

• Non mostrate agli utenti un solo errore alla volta. Se non hanno compilato 3 campi obbligatori, assicuratevi di dare loro 3 errori, così che possano rimediare tutto in un solo colpo.
• Fornite in anticipo agli utenti più informazioni possibili. Un esempio potrebbe essere marcare un campo come obbligatorio o precisare la lunghezza minima del campo password.
• Siate a conoscenza delle tre opzioni di validazione del form a vostra disposizione: 1) potete fonire un feedback immediato direttamente via JavaScript. L'utente beneficia di un feedback immediato, ma voi dovrete duplicare le funzioni di validazione sul client e sul server. 2) Potete munirvi della Degradable Ajax Validation che vi libera dal codice duplicato ma che aumenterà i tempi di caricamento dal server. 3) Potete validare soltanto all'invio del form, liberandovi dal codice duplicato, dal maggiore tempo di caricamento dal server e sfortunatamente anche dal feedback istantaneo.
• Date qualche stimolo visivo quando mostrate i messaggi di errore. Fateli in bold, distinguibili, e con un pizzico di creatività. Sarebbe anche meglio associarli con i colori che l'utente trova adatti: rosso per gli errori, giallo per gli avvertimenti, verde per le azioni andate a buon fine. Ovviamente potete cambiare questi colori in base alle vostre preferenze personali, ma allontanarsi troppo e fare un messaggio di errore rosa potrebbe creare un pò di confusione.

6. Postback

Non c'è nulla di peggio che compilare un form, incontrare un errore e dover reinserire di nuovo tutte le informazioni. Per preservare i vostri utenti da frustazioni non necessarie, assicuratevi che tutti i dati vengano conservati. Ciò signifca che se si verifica un errore, i campi dovrebbero essere ripopolati automaticamente. Se abbiamo un form a più passaggi, andando avanti e indietro nella navigazione si dovrebbe mantere il form popolato. Un approccio comune consiste nell'associare l'azione del form al suo URL corrente. In questo modo potete leggere i valori nel form e popolare i campi immediatamente nel caso di errore. Per esempio, impostiamo il valore nel post:

<input type="text" name="fname" value="<?=$_POST["fname"] ?>" />

In questo modo campi saranno popolati e in assenza di errori, si verrà mandati alla pagina di completamento del form.

7. onFocus

Un segnale visivo, come il cambio di colore del bordo del campo, aiuta l'utente a capire quale campo ha il fuoco. I CSS forniscono un soluzione facile per aggiungere i bordi con il selettore border, ma questa caratteristica non è al momento supportata in IE e non funziona con tutti gli elementi select. La nostra soluzione crea bordi e sfondi personalizzati aggiungendo uno span ad ogni elemento del form con l'ausilio di un piccolo JavaScript.

Il concetto è di racchiudere il nostro elemento del form con uno span per produrre un unico effetto. Non preoccupatevi, non c'e bisogno di mettere a mano nel codice lo span - una funzione JavaScript lo aggiungerà e lo rimuoverà dinamicamente. La cosa bella è che lo span puo avere immagini di sfondo, bordi e ogni altra combinazione desiderata dei due per creare un effetto che funzioni sugli elementi text, textarea e select. Ecco un esempio:

<span class="focus">
    <input type="text" id="fname" name="fname" />
</span>

function showFocus() {  
    this.parentNode.className = "focusHover";

function hideFocus() {
    this.parentNode.className = "focus";
}

È necessario indicare lo stato per lo span per prevenire lo spostamento della pagina quando un elemento non ha il focus. Per esempio se il nostro span ha 3 pixel di padding nello stato onfocus, abbiamo bisogno di 3 pixel di padding anche quando non c'è il focus, così non da non veder "saltare" gli elementi del form quando l'utente li naviga.

8. Click sulla Label

Quando una label riceve il fuoco, sia attraveso onclick che attraverso accessKey, l'elemento associato specificato con l'attributo for riceverà il fuoco.

"Quando un elemento LABEL riceve il fuoco, passa il fuoco al controllo che gli è associato."

Raccomandazione W3C

Sfortunatamente ciò non è garantito in tutti i browser. Per rimediare a questo problema ricorriamo ad una semplice funzione JavaScript:

function initLabels() {
    labels = document.getElementsByTagName("label");
    for(i = 0; i < labels.length; i++) {
        addEvent(labels[i], "click", labelFocus);
    }
}

function labelFocus() {
    new Field.focus(this.getAttribute('for'));
}

9. Doppio Invio

Nooo! Il nostro utente ha inviato il form due volte, probabilmente perchè il sito non ha risposto in modo abbastanza veloce. Non solo i dati saranno processati due volte, ma il secondo invio potrebbe causare degli errori che confonderanno ulteriormente l'utente. Tre cose da tenenre a mente per quasta situazione:

• Se JavaScript è attivo, utilizzatelo per l'invio del form. Dopo il primo invio, disabilitate il pulsante di invio.
• Se JavaScript non è attivo, fornire agli utenti un chiaro messato chiedendo loro di non inviare dati importanti più di una volta.
• Fate in modo che il server non processi due volte e non duplichi i dati inviati.

10. Altro

Chiudiamo questo articolo evidenziando i link di alcune utili funzioni che sono già state implementate o che lo saranno presto. Potreste non averne bisogno adesso, ma saranno dei veri e propri salvavita quando ne avrete bisogno.

• Mini Calendario - Quando c'è un campo data, la soluzione migliore è fornire sempre un calendario popup. Idealmente, questo calendario non si aprirà in una nuova finestra e risponderà prontamente. Dynarch fornisce una buona soluzione.
• Combo box - L'elemento che è stato tralasciato nell'HTML è il "mezzo" select, un input a metà tra testo ed elenco a discesa. Questo tipo di elemento permetterebbe all'utente di scrivere una propria voce in un elenco a discesa. In Upgrade Your Select Element to a Combo Box potete vedere un primo approccio a questa soluzione.
• Mappe Visuali - Proprio come il calendario popup, anche le mappe popup potrebbero essere efficaci. Fate un giro su Orbitz e cliccate su "airport code". Si aprirà un popup con una lista di testo di tutti gli aereoporti. Si potrebbe facilmente fare un popup dinamico con una mappa cliccabile facendo in modo che si clicca su un punto della mappa viene popolato il campo di testo.

Queste sono soltanto alcune idee. Fateci sapere se ne avete altre da aggiungere all'elenco.

^Top