Pillole di usabilità: come non creare un form
Sì ok, se avessi voluto essere più SEO friendly avrei dovuto scrivere “come creare un form”. Ma in questo caso vorrei analizzare un form che è l’antitesi dell’usabilità. In pratica vi mostrerò il male per spiegarvi il bene.
Tutto nasce quando finisco per imbattermi nella pagina del concorso Enel Blog Award 2012.
Bello, concorso per blog, bella la grafica, molto social, molto 2.0.
Cioè, la grafica è un terrificante png appiccicato nel codice HTML e già qui ho avuto un brivido.
Clicchiamo su “registrati”. Si apre un box tramite jQuery contenente il form.
Compilo la prima pagina con i dati personali, ho quasi finito, poi per sbaglio clicco fuori dal box del form. Tragedia. Il form scompare, tutti i dati sono andati persi. Devo cliccare di nuovo su “registrati” e ricompilare dall’inizio.
Errore numero 1: che lo devo pure spiegare? Ma soprattutto, pur nell’assurda incapacità di adoperare jQuery, vuoi segnalarmi in qualche modo di non cliccare fuori dal box?
Arrivo alla seconda schermata e qui il dramma.
La storia è questa. Una mia amica blogger voleva iscriversi a questo concorso. Non ci riusciva perché alla seconda schermata gli indicava alla fine sempre un errore. Segnala la cosa anche nell’apposita pagina di Facebook ma le rispondono che funziona tutto a meraviglia. Ma lei continua ad avere problemi. Allora mi dice: “tu che sei webcoso, non è che ci provi tu ad iscrivermi?”
Il webcoso ci prova, compila tutti i campi obbligatori, invia tutte le informazioni e tragedia.
Errore numero 2: il messaggio d’errore che non significa una cippa.
Attenzione: tutti i campi devono essere compilati!
Errore numero 3: i campi del form tutti resettati, devo ricompilarli di nuovo.
Morale della favola: alla fine la mia amica riesce ad iscriversi, sembra che ci fosse un link troppo lungo. Sembra perché non sapremo mai la verità dato che l’ideatore di questo capolavoro ha pensato bene di non suggerire all’utente cosa sbagliava nel compilare tale form.
Quindi riassumendo, sappiate che:
- Segnalate sempre all’utente cosa produrranno le sue azioni. Se il form si chiuderà perdendo tutti i dati al mio click su un punto della pagina, me lo dovete dire, ve ne sarei decisamente grato.
- Curate i messaggi d’errore: non ditemi che non ho compilato tutti i campi quando invece ho fatto un altro tipo di errore.
- Visto che volete fare i fighi con jQuery, dovreste sapere che jQuery si integra perfettamente con AJAX e che grazie a questo potete segnalarmi immediatamente dov’è l’errore nella compilazione e che tipo di errore è, in questo modo evito di inviare al server tutto quanto per ritrovarmi poi con il form vuoto, tutti i dati da riscrivere e un errore che non posso sapere a cosa è dovuto.
Quindi prendete questo bell’esempio di form fatto male, producete l’esatto opposto, e avrete fatto un form almeno di base usabile e accessibile.
Diego Magionami, web designer e sviluppatore web da Perugia. Mi occupo di SEO, di sviluppo front-end con HTML, CSS e JavaScript. Specialista in soluzioni Wordpress e Ruby on Rails. Se vuoi metterti in contatto con me fai un salto nella sezione contatti.
