Gli ultimi post di Edit
Alternative al doppio inserimento dell’indirizzo e-mail
Venerdì 13 Novembre 2009 - 08:30
di Cesare Lamanna
Credo che Facebook (vedi screenshot qui sotto) sia uno dei pochi siti che all’atto della registrazione non richiede il doppio inserimento dell’indirizzo e-mail (se è per questo nemmeno della password…).
La prassi del doppio inserimento, per quanto la si possa trovare noiosa, ha una sua ragion d’essere, su questo non si discute. Ciò non toglie che possano essere individuate delle alternative che non vadano ovviamente a rinunciare al controllo dell’utente su quanto inserito nel form. Un alert in forma di testo rosso che segnala a chi compila il modulo quanto ha scritto. O altre variazioni sul tema in varie posizioni e con modalità invero molto particolari.
Vale davvero la pena in questi casi tentare nuove strade? C’è qualcuna delle soluzioni proposte che vi convince?
Categoria: Web Design | Permalink | Commenti (11)
Come realizzate il layout dei vostri form?
Lunedì 2 Novembre 2009 - 10:35
di Cesare Lamanna
Questo breve tutorial mi serve solo come spunto. Spiega come creare il layout di un form facendo a meno delle tabelle. La tecnica adottata è quella già nota basata sull’adozione di elementi li per contenere gli input e le label.
Voi quale tecnica adottate e/o preferite per impostare il layout dei moduli? Avete buttato a mare le tabelle pure per questi scopi?
Categoria: CSS, Web Design | Permalink | Commenti (17)
Rivelare la password, Apple style
Venerdì 9 Ottobre 2009 - 08:36
di Cesare Lamanna
Il caso è simile a quello di cui si discuteva ieri a proposito del checkbox “Ricordati di me”. Fu sollevato, come qualcuno ricorderà, da Jakob Nielsen, il quale in uno dei suoi celebri alertbox deprecò come inutile la pratica di mascherare i caratteri all’interno dei campi per le password.
Due proposte sicuramente controverse, che se prese alla lettera forse aumentano i problemi piuttosto che risolverli. Già nel post in cui parlavamo della presa di posizione di Nielsen, non erano mancati i suggerimenti per soluzioni di compromesso. Ricordo in particolare quanti hanno fatto riferimento alla tecnica adottata su certi dispositivi mobili, iPhone in primis.
Vedo ora che Jeremy Keith ha appena pubblicato sul suo blog una soluzione Javascript (codice) ispirata a quella adottata in certi casi da Apple. Consiste nell’aggiunta di un checkbox che consente di rivelare i caratteri inseriti (potete vedere lo script in azione su questa pagina).
La tecnica aderisce per certi versi al suggerimento contenuto nell’alertbox di Nielsen, ma con una differenza sostanziale: il nostro consigliava di aggiungere un checkbox per mascherare i caratteri, lasciandoli di default rivelati.
Categoria: Web Design | Permalink | Commenti (3)
Ricordati di me
Giovedì 8 Ottobre 2009 - 08:45
di Cesare Lamanna
Mi era sfuggito che qualcuno avesse organizzato una crociata per far fuori il povero checkbox “Ricordami su questo computer” (con tutte le sue varianti) che troviamo a corredo di tanti form di login :) Quel qualcuno ha un nome, David Heinemeier Hansson di 37Signals.
Fare fuori, nello specifico, si traduce così: è scontato che la gente voglia accedere al sito senza dover sempre inserire username e password, per cui quel checkbox è inutile. E con i computer condivisi come la mettiamo? Facile, secondo l’ottimista Hansson: si può assumere che gli utenti in questione facciano ogni volta il logout.
Una soluzione di compromesso potrebbe essere quella suggerita su Usability Post e che poi è quella adottata da Google: impostare di default il segno di spunta sul checkbox.
Categoria: Web Design | Permalink | Commenti (9)
Sulla visibilità dei campi dei form
Lunedì 28 Settembre 2009 - 08:03
di Gabriele Romanato
Stavo testando una semplice pagina con un form di invio email in cui avevo specificato una regola di stile per i bordi degli input di testo. La regola era:
input {
border: 1px solid #ccc;
}
Continua a leggere Sulla visibilità dei campi dei form
Categoria: CSS | Permalink | Commenti (1)
Sui messaggi di errore nella validazione dei form
Mercoledì 16 Settembre 2009 - 09:35
di Gabriele Romanato
Credo che non ci sia nulla di peggio a livello di user experience dei messaggi di errore scarsamente informativi o, peggio, confusi e fuorvianti. Il problema non sta tanto nello scegliere una validazione cumulativa o campo per campo, quanto piuttosto nello scrivere dei messaggi che indentifichino realmente l’errore e aiutino l’utente nella correzione.
Continua a leggere Sui messaggi di errore nella validazione dei form
Categoria: Web Design | Permalink | Commenti (4)
VanadiumJS
Giovedì 10 Settembre 2009 - 08:20
di Riccardo Degni
VanadiumJS è un plug-In realizzato per il framework jQuery che consente di effettuare la validazione client-side degli elementi HTML di un form.
Nell’originale home del progetto, possiamo testare diverse situazioni che ci fanno provare lo script in azione, partendo dal classico test per la presenza di testo in un campo di input fino ad arrivare ad esempi più complessi che sfruttano Ajax ed il formato JSON.
Per quanto sia abbastanza intuitivo, non manca inoltre una completa documentazione.
Categoria: Scripting | Permalink | Commenta
Storie di interfacce
Mercoledì 2 Settembre 2009 - 11:45
di Cesare Lamanna
Della serie “Sono i dettagli a fare la differenza”. Situazioni minime incrociate nelle quotidiane scorribande per il web, ma magari sufficienti per evidenziare la criticità di certe scelte.
Ho un account Gmail e uno Live/Hotmail. Usando il servizio di posta di Google, trovo eccezionalmente utile e ben fatta la piccola barra che consente di selezionare selettivamente (scusate il gioco di parole…) i messaggi della casella:
A seconda dell’operazione da compiere, con un solo click, posso selezionare i messaggi a cui applicarla. Possono essere tutti, ma potrei essere interessato solo a quelli letti o non letti, cosa che capita praticamente ogni giorno. In effetti, mi viene da dire in base alla mia esperienza che l’opzione meno frequente è proprio quella della selezione di tutti i messaggi.
Continua a leggere Storie di interfacce
Categoria: Web Design | Permalink | Commenti (12)
Uno studio sull’usabilità dei form
Venerdì 12 Giugno 2009 - 08:10
di Cesare Lamanna
Che i form siano un elemento di criticità nel contesto di un sito non lo scopriamo oggi e non mancano approfondite analisi svolte con il metodo dell’eyetracking che hanno messo in risalto i fattori più problematici.
Sempre basato sul tracciamento oculare è lo studio recentemente svolto da CXPartners. Sotto esame il comportamento di un gruppo di utenti alle prese con i moduli di registrazione di eBay, Yahoo Mail, GMail e Hotmail.
La sintesi dei risultati consiste in 10 linee guida. Le label? L’ideale è posizionarle verticalmente rispetto al campo corrispondente e quando ciò non sia possibile è consigliabile piazzarle, ben evidenziate in grassetto, sul lato sinistro. Evitare poi di distribuire i campi su più di una colonna; per situazioni in cui si inseriscano due input di testo sulla stessa riga (classico il caso della coppia nome/cognome) è opportuno fare in modo che siano ben ravvicinati e che siano raggruppati sotto una sola label.
Interessante poi l’osservazione sui campi obbligatori. Il consiglio, in base alle osservazioni svolte, è di non usare l’asterisco come indicazione di una compilazione obbligatoria, ma di rendere esplicito il fatto che un campo è opzionale attraverso un’indicazione testuale. Gli screenshot allegati sono comunque molto significativi, per cui vi rimando alla lettura dello studio per maggiori dettagli.
Categoria: Web Design | Permalink | Commenti (3)
Il focus sui form
Martedì 19 Maggio 2009 - 08:42
di Cesare Lamanna
Ho già scritto su questo blog quanto trovo utile e ben fatta l’evidenziazione dei campi di form che ricevono il focus su Mac OS X (per chi un Mac non ce l’ha riporto uno screenshot in fondo al post).
Sul tema (focus e form) dice la sua, con grande saggezza, Roger Johansson. L’invito è semplice: non usate mai la proprietà CSS outline per eliminare l’indicazione del focus per i form e i link.
La questione però è un’altra: c’è un solo motivo valido e convincente per eliminarla? Se qualcuno lo trova, si faccia vivo :)
Categoria: Web Design | Permalink | Commenti (8)