questioni di form
Transcript
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