Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » 10 Consigli per un Form Migliore

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.

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:

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.

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:

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:

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.

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

^Top

Dai un voto a questo articolo:   HITS: 1 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 1