questioni di form

tecnica web design
f Simona De Robertis • [email protected] e Silvia Burigana • [email protected]
questioni di form
I moduli sono
strumenti funzionali
all’interazione con
il sito: consentono
di accedere
a un’area riservata,
acquistare prodotti,
iscriversi a una
newsletter, inviare
una cartolina
elettronica e non solo
U
no dei fattori che
hanno determinato
il successo della Rete quale strumento informativo, relazionale, commerciale è sicuramente la
possibilità di interagire con l’azienda
o con gli altri utenti del Web. Le form
(dai pannelli di controllo per l’accesso
ad aree riservate ai semplici moduli di
richiesta informazioni) sono uno degli strumenti più importanti presenti
all’interno di un sito, poiché consentono di creare un canale di comunicazione sempre aperto fra i visitatori e l’azienda. Gli utilizzi sono molti:
dall’iscrizione a una newsletter attraverso l’inserimento del proprio indirizzo e-mail in un’unica cella testuale fino alla compilazione di spazi strutturati per l’acquisto di un prodotto o di
un servizio.
Quando e come utilizzarle
Qual è l’obiettivo di una form? La risposta implica una riflessione in merito sulle logiche generali d’interazione a cui la Rete ci ha abituati e che
ci ha insegnato a utilizzare. Il primo
accesso a un sito è paragonabile a
una sorta di esplorazione: è un momento conoscitivo in cui, nella magUn pop up accoglie le visitatrici di DonnaD,
invogliandole alla registrazione attraverso
la proposta di alcuni vantaggi, concorsi
e regali messi a disposizione delle utenti
registrate. La form, inserita all’interno
del pop up, è ordinatamente strutturata
all’interno di un layout grafico coerente
e accattivante che spinge alla compilazione
grazie a un’interfaccia ergonomica,
sintetica e di immediata comprensione
e compilazione. Lo stile amichevole
e allegro, inoltre, rende meno noiosa
e formale l’immissione dei dati personali
gior parte dei casi, la comunicazione
avviene a senso unico, così come nei
confronti del canale televisivo o delle pagine di un giornale. In questo
frangente è l’azienda che parla e che
fornisce informazioni sulla sua natura, sui prodotti e sui servizi.
L’obiettivo della Rete sta, tuttavia,
nel riuscire a generare una relazione (prolungata nel tempo e abitudinaria) con gli utenti; un momento
d’incontro e di confronto attraverso
il quale le aziende possano dialogare con il proprio target di riferimento, reperendo informazioni utili o
stimolando l’acquisto online e offline, mettendo a disposizione servizi
di prevendita e post-vendita efficaci, fornendo informazioni puntuali e
aggiornate, difficili da reperire attraverso altri canali.
Possiamo dunque affermare che lo
scopo generale e comune a tutte
le form consiste nella fidelizzazione,
ovvero nel consolidamento di una
relazione stabile e interattiva con i
propri utenti, che, imparando ad utilizzare determinati moduli online,
avranno accesso a servizi e informazioni a valore aggiunto.
Il concetto di form, in realtà, racchiude una vasta gamma di moduli che
rispondono a obiettivi specifici fra
loro molto differenti.
Per un’usabilità delle form
L’interfaccia grafica delle pagine Html è indubbiamente una delle componenti visive che maggiormente
influisce sul successo di un ambiente
Web, poiché ne garantisce la riconoscibilità e un corretto utilizzo da parte del navigante.
Ciò è ancora più evidente all’interno delle aree create per agevola[www.donnad.it]
82
Internet News ottobre 2003
re interscambi relazionali (fra gruppi di utenti o fra l’azienda e gli utenti
stessi); le form, indipendentemente
dal loro scopo, rientrano sicuramente a pieno titolo in questa categoria.
Nell’impostazione grafica dei moduli online, dunque, la prima considerazione da fare è relativa al look&feel
che, anche nel caso di pagine assolutamente funzionali, non può essere trascurata. Le form, infatti, devono integrarsi con l’atmosfera generale del contesto online, diventando spazi di continuità facilmente gestibili e immediatamente comprensibili da parte dei naviganti. Sia che
si decida di progettare un modulo
online all’interno della pagina Web
o che si voglia inserirlo all’interno
di pop up, è indispensabile scegliere codici grafici che sappiano veicolare lo stile e l’impatto visuale del sito
Web a cui sono collegati, riutilizzando i medesimi background, progettando appositi pulsanti, integrando
gli elementi ornamentali che contribuiscono a caratterizzare l’interfaccia del sito, ecc.
Un secondo, ma non meno importante, fattore grafico da considerare
è l’ordinata disposizione di tutti gli
elementi funzionali in chiave ordinata all’interno del template, per agevolare la scansione visiva da parte
dell’utente e per consentirgli di interagire con estrema facilità nella compilazione del modulo.
In tal senso, strategici sono gli allineamenti fra le diverse componenti
delle form (celle testuali, check box,
pulsanti di invio e cancellazione ecc.)
che dovranno essere, il più possibile,
di immediata interpretazione e intuitivi nelle modalità d’utilizzo, per evitare abbandoni da parte dei naviga-
Gli elementi delle form
La prima tipologia è quella delle form di contatto, utili per creare una relazione, per dare
e ricevere informazioni, per creare un legame tra il sito e i suoi utenti.
[www.nike.com]
A RICEVERE INFORMAZIONI
un metodo utile per conquistare la fiducia dei naviganti è mettere a loro disposizione
una serie di strumenti per utilizzare al meglio le pagine del sito, per reperire in fretta le
informazioni cercate e per contattare l’azienda. Sono, in pratica, tutti le form di ricerca,
per l’invio di e-mail di richiesta informazioni specifiche e così via.
A FORNIRE INFORMAZIONI
è la tipologia più critica da progettare, perché si scontra con la naturale diffidenza
degli utenti nel fornire i propri dati personali. È fondamentale motivare ogni richiesta
d’informazione con un vantaggio per lo stesso utente, premiando il tempo dedicato
alla compilazione. Sono le pagine di registrazione che permettono di accedere
a servizi, informazioni specializzate o funzionalità d’ordine e d’acquisto. In questa
categoria possono, inoltre, rientrare i questionari di gradimento del sito o di un
particolare prodotto o servizio, pagine spesso poco frequentate e prive di riscontro
effettivo per gli utenti.
La seconda tipologia è rappresentata da moduli che consentono il reperimento di
un prodotto o di un servizio più o meno tangibili. Si tratta, in genere, di form successive
al primo contatto o alla prima registrazione; strumenti dedicati agli utenti in parte già
fidelizzati, che conoscono il sito e che vogliono sfruttare al meglio le sue potenzialità.
[www.lycos.it
La pagina dedicata alla ricerca avanzata di Lycos: una
cornice grafica chiara ed essenziale contiene tutte le
possibili funzioni per un utilizzo ottimale del servizio.
In primo piano è stato inserito il campo per la ricerca
veloce, per chi non vuole perdere tempo, ma non
mancano i campi apprezzati dagli utenti più esigenti
A OTTENERE UN RISULTATO SPECIFICO
rientrano in questa categoria tutte le pagine di passaggio per arrivare all’ordine
o al vero e proprio acquisto online e tutti quei moduli necessari a fruire di servizi
totalmente digitali come calcolare tariffe o orari, segnalare un sito, un prodotto o un
servizio, ma anche inviare una card o un messaggio d’auguri.
La form di registrazione del pop up di Nike.
Un’atmosfera coerente con il look&feel
del sito, l’utilizzo di colori, font ed elementi
ornamentali che ne garantiscono
la riconoscibilità e l’immediatezza all’atto
della fruizione, un’impaginazione ordinata
e facilmente scansibile, che sfrutta
gli elementi caratteristici delle form in chiave
funzionale ed efficace
tori. La corretta gestione dello spazio
visivo, inoltre, conferirà alla form un
aspetto più professionale e minimizzerà i tenpi di compilazione.
L’utilizzo ottimale degli elementi e
delle funzionalità tecniche disponibili contribuisce in modo significativo alla realizzazione di una form ottimale e funzionale; in tal senso sono vincenti le combo precompilate
(per esempio nel caso si richieda all’utente la città di residenza), i checkbox (nel caso si chieda di segnalare il prodotto sul quale si desiderano informazioni) e così via. Tutti gli
elementi funzionali che comportano una riduzione dello spazio occupato o una compilazione più rapida da parte di chi utilizza la form. z
A ESSERE RICONOSCIUTI
successivamente a una registrazione (a volte lunga e faticosa), il sito assegna
agli utenti un login e una password che consentono di collegarsi in qualunque
momento e di farsi rapidamente riconoscere quali visitatori registrati. Si tratta di una
form essenziale, spesso contenuta in un box all’interno della home page o di altre
pagine informative, che presenta un scopo puramente identificativo e di servizio.
Yahoo! propone un modulo semplice e chiaro per
l’invio di una cartolina virtuale ai propri amici, con
una particolare attenzione dedicata alle modalità
d’impaginazione e di scrittura del testo. In questo
modo il portale cerca di fornire un servizio facile
da utilizzare, ma anche personalizzabile e vicino
alle esigenze dei suoi fruitori
[www.esselunga.it
Acquisti sul sito di e-commerce Esselunga:
la form è strutturata in due macroaree, dedicate
rispettivamente alla verifica delle aree di consegna
e all’inserimento dei dati personali. In questo modo,
prima viene fornito il servizio (sapere se è possibile
ricevere la merce a casa nella propria zona) e solo poi
si richiede la registrazione a tutti gli effetti
[www.yahoo.it]
[www.kataweb.it.it]
Internet News ottobre 2003
Kataweb racchiude in un’unica form tre
differenti servizi: l’accesso alla propria
casella di e-mail, la possibilità di richiedere
una nuova casella o di ottenere un aiuto o un
servizio aggiuntivo. In questo modo si è potuto
rispondere contemporaneamente sia alle
esigenze dei nuovi utenti sia a quelle di fruitori
già fidelizzati
83
tecnica web design
Progettare una form
Html Il codice delle form
P
er definire una form si utilizza il tag principale <form>
... </form>, che racchiude tutti i contenuti. Le form non
consentono nidificazioni: è pertanto impossibile inserire
una form all’interno di un’altra form. La sintassi più comune
è <form method=”get|post” action=”http://www.nomesito.it/cgibin/nome_script.cgi”>. Se method è stato impostato come get,
i dati sono separati in due variabili e spediti al server e da
ciò deriva il numero di caratteri massimo () che la form
può contenere. Utilizzando “method=post”, invece, i dati sono
ricevuti direttamente dallo script Cgi senza un processo di
decodifica preventivo, consentendo allo script di leggere un
numero di caratteri illimitato. Impostato il primo tag <form>
del modulo, laddove lo script Cgi lo consenta, è possibile
creare elementi utili a una corretta ed efficace gestione dei
dati. La stringa <input type=”hidden”name=”mailform”_subject
value=”Titolo della form”> determina il titolo del messaggio che
si riceverà via e-mail, contenente i dati immessi nella form
stessa. <input type=”hidden”name=”mailform”_url value=”http:
//www.nomesito.it”>, invece, consente di far seguire alla
compilazione della form la redirezione una pagina Html
contenente un messaggio (per esempio, «il tuo messaggio è
stato correttamente inviato; ti risponderemo al più presto») o
di rimandare più semplicemente alla home page del sito. Si
tratta di comandi non standard, che variano in funzione del
Cgi utilizzato.
Il tag utile alla definizione degli elementi della form è <input>,
che consente di aggiungere menu di scelta, pulsanti, ecc.
Il valore dell’attributo type determina il tipo di controllo
visualizzato.
A type=”text”
determina i tipici campi testo. È utilizzato soprattutto nella richiesta di informazioni
personali e non predefinite. Text consente di determinare tre attributi aggiuntivi;
maxlength (numero massimo di caratteri che il campo contiene), size (larghezza del
campo) e value (che consente la visualizzazione di un testo di default interno al campo
testo, per esempio digita la tua e-mail).
A type=”password”
i testi inseriti non sono visualizzati, ma sostituiti da asterischi.
A type=”checkbox”
determina la creazione di caselle quadrate da vistare o lasciare bianche ed è
frequentemente usato per selezioni multiple da liste di elementi. Se la casella è vistata,
input restituisce un valore Cgi.
A type=”radio”
è simile a checkbox, ma consente di selezionare solo una delle voci proposte.
Selezionando una voce, infatti, tutte le altre si deselezionano automaticamente.
A type=”submit”
è il pulsante classico di invio, che varia la sua grandezza in funzione della lunghezza del
testo che vi compare all’interno.
A type=”reset”
è il pulsante che reimposta la form, cancellando i dati inseriti.
A type=”image”
consente di inserire un’immagine al posto del pulsante di default.
A type=”textarea”
è un campo testo che viene proposto agli utenti per inserire commenti o richieste testuali.
Cols ne definisce la larghezza e rows l’altezza. wrap=”physical” definisce invece
che, nel caso in cui il testo superi la larghezza della finestra, quest’ultimo deve essere
mandato a capo.
A type=”select”
consente di effettuare una scelta fra elenchi a discesa, inseriti in modo opportuno in
una combo.
84
1
DEFINIRE LO SCOPO
della form, facendo una capture del monitor,
tagliandoli e incollandoli all’interno dell’interfaccia
grafica per poterli disporre con ordine.
Il primo passo è identificare tutte le informazioni
che si vogliono richiedere all’utente, in relazione
agli specifici obiettivi della form e dell’azienda
stessa. In questo caso, per esempio, simuliamo
la creazione di una form molto semplice, volta a
richiedere user name e password per consentire
l’accesso all’area riservata dell’azienda.
Definiamo, quindi, all’interno di un file testuale,
tutte le informazioni che è necessario digitare per
entrare nelle pagine riservate.
2
CONTESTUALIZZARE
LO SPAZIO GRAFICO
Definiti gli ingombri e gli allineamenti fra le
differenti celle testuali, sarà possibile procedere
alle spaziature previste fra i diversi elementi che
costituiscono il modulo, utilizzando le linee guida
calamitate.
Il passo successivo consiste nel cominciare a integrare
gli elementi della form all’interno della cornice
del sito (che potrà essere salvata in un unico layer
del file Photoshop sotto il nome di background),
rispettando l’uniformità grafica delle altre pagine che
lo costituiscono, attraverso l’inserimento di elementi
visuali e moduli grafici ripetuti.
Duplicando gli elementi multipli e spostandoli
in modo facile e veloce all’interno del file grafico,
si otterrà la perfetta rappresentazione visiva di
ciò che dovrà essere poi montato e compilato
all’interno della pagina Html da pubblicare online.
3
STRUTTURARE GLI ELEMENTI UTILI
Successivamente alla definizione dell’area grafica,
volta a racchiudere e a supportare i contenuti
della form, si dovrà procedere all’impaginazione
degli elementi della form stessa, a partire dal testo
introduttivo previsto.
Si potranno quindi inserire gli elementi funzionali
Internet News ottobre 2003
Internet News ottobre 2003
85