Il mio primo articolo

http://www.uxmagazine.it/interface-interaction-design/il-ruolo-dei-moduli-nellinterazione-tra-utente-interfaccia-web/#more-865

Learning html and css form

impariamo a generare form html gradevoli e funzionali

da qualche giorno sto seguendo una discussione su friendfeed in merito alla gestione dei form, e nello specifico a come utilizzare tutti gli elementi che possono essere utilizzati all’interno di questo tag:

• fieldeset
• legend
• label
• id
• name
• select
• radio
• text area
• button

mi sono imbattuto in queste slide davvero molto utili…have a nice design!

Il portale dell’automobilista, l’ennesima toppa!

Da qualche giorno passa in radio lo spot per lancio del nuovo portale dell’automobilista, alcuni sostengono di aver visto lo stesso spot anche in tv.
Il caso vuole che ho un padre monello che zigzaga per le strade della provincia lucana allegramente ben sopra i 70 km orari consigliati, ho dovuto confrontarmi con questo portento di tecnologia web!
Ci arrivo inserendo su google “saldo punti patente” e il suddetto portale è in prima posizione oltretutto come link sponsorizzato (quindi soldi nostri!).
Ci vado e la home page si presenta così:
https://www.ilportaledellautomobilista.it/http://vps.ilportaledellautomobilista.it:8080/portal/dt?JSPTabContainer.setSelected=JSPTabContainer%2FHome&targetPage=default&targetLabel=Home&last=false

home page del portale dell'automobilista

Chiaramente la cosa che più m’interessa non è presente e il servizio per cui son stati pagati denari pubblici non è nemmeno menzionato.
Visto ogni tanto il mononeurone mi funziona, provo a cliccare la voce del menù di primo livello “utilità”.

pagina interna del portale dell'automobilista

Anche in questa pagina le indicazioni son poche ma per fortuna ben confuse, insomma del saldo punti per la patente nemmeno l’ombra, vabbè mi armo di santa pazienza e seleziono la voce del menù di secondo livello “come fare per” e finalmente EUREKA!

pagina interna del portale dell'automobilista

Eccolo il tanto agognato link dopo soltanto 4 passaggi e tanta ma tanta fortuna l’ho trovato, bene adesso non mi resta che capire come avere questo stramaledetto saldo!
Seleziono il link “Perdita parziale dei punti: reintegro punti patente” e arrivo in una pagina che in sole 8 righe di testo mi dice che devo registrarmi (il risparmiare tempo è essenziale per questi geni!).
Chiaramente il breadcrumb è svalvolante e non serve a granché visto che non è legato logicamente ai passaggi che l’utente fa (Ti trovi in:Home » Utilità » Come fare per… » Patente » perdita parziale punti, io questa ultima voce non l’ho letta da nessuna parte).

pagina interna del portale dell'automobilista

pagina interna del portale dell'automobilista

Il form di registrazione è abnorme e chiaramente non ottimizzato in step che possano facilitare la registrazione e poi l’integrazione dei dati personali, ma questo c’era da aspettarselo.
Comunque per la cronaca mi ha dato due volte errore di registrazione, per avere questo benedetto saldo ho fatto una cara e vecchia telefonata al numero
848782782

Si, ma poi vallo a spiegare!

mi occupo di accessibilità di siti e applicativi web (cioè che funzionano attraverso un browser), quando si rilascia un progetto, questo va in verifica di accessibilità.La verifica comprende l’analisi dei 22 punti della legge Stanca con  una discreta aggiunta di verifica della compatibilità tra quello che si legge nella pagina e quello che effetivamente deve essere compreso (chiamiamola per comodità e anche per pigrizia usabilità).

Ad essere onesti i problemi principali non riguardano nello specifico il rispetto dei 22 punti di controllo (certo è uno smazzo quando si ereditano grafiche sviluppate in tempi remoti, tipo con tabelle e stili in linea), ma per quello che mi riguarda è la difficoltà nell’illustrare le funzionalità se nza scrivere righe e righe che tanto l’utente non leggerà mai!

Sarà che oggi ho finalmente passato la verifica di un mega progetto e mi son reso conto che sarà pure accessibile secondo la legge stanca ma indubbiamente ci sono dei passaggi nei form di dubbia comprensibilità.

Per cui il mio dubbio è nettamente questo, a chi giova avere un sito pulito con un codice perfetto, se quando c’è un form che ti chiede millemila cose non c’è una chiara comprensione dell’obiettivo del form stesso?

termini che forse è meglio specificare:

1. accessibilità termine con cui si individuano delle linee guida attraverso le quali permettere a chiunque di navigare pagine web (persone che hanno difficoltà fisiche o cognitive nell’utilizzare il mezzo internet)
2. sito genericamente inteso come raccolta di pagine collegate tramite link
3. applicativo sfrutta l’architettura del sito ma ha dietro un compelsso motore di elaborazione dati attraverso il quale si compiono delle operazioni (es. compilazione di un questionario o iscrizione ad un servizio erogato tramite web)
4. legge stanca prende il nome dal suo promotore Lucio Stanca che nel 2004 (numero 4 del 9 gennaio 2004) ne promosse l’abrogazione a legge per i siti delle pubbliche amministrazioni
5. form in linguaggio html il tag form serve per presentare controlli e operatori (esempio radio button, select etc) è presentato all’interno del tag Fieldset
6. codice perfetto ossia in linea con gli standard utilizzati dal consorzio w3c

fieldset

Tutte le pagine che presentano controlli (con o senza il tag form) devono presentare un fieldset che raggruppi questi elementi (INPUT, BUTTON, SELECT, etc).

il tag legend deve sempre riportare in poche parole a cosa serve compilare o agire su quella serie di controlli.

Importante all’interno del tag fieldset rispettare alcune regole per la presentazione dei controlli:

radio button devono presentare l’etichetta nella parte sinistra del controllo con presenza di label (per questo controllo si può usare la tecnica di label nascosta)

check box devono presentare l’etichetta nella parte sinistra del controllo con presenza di label (per questo controllo si può usare la tecnica di label nascosta)

select tutti i controlli di questo tipo devono avere un’etichetta ben visibile in modalità scrittura e un’etichetta nascosta in fase di lettura (ad esempio nella fase di report del form) per dare indicazioni precise all’utente.

button il nome deve essere nella lingua delle pagine dove si presenta e deve avere la presenza dell’attributo title per permettere di essere localizzato e individuato come controllo che fa quella specifica operazione (ad esempio invio dati)

esempio di codice:

<FIELDSET>
<LEGEND>Generalità</LEGEND>
<label for=”nome”>nome</label>
<INPUT type=”text” id=”nome”>Nome</input>
<label for=”cognome”>cognome</label>
<INPUT type=”text” id=”cognome”>Cognome</input>
</fieldset>

infine è buona regola verificare sempre che i campi di testo possano contenere solo testo e i campi numerici solo numeri!