Differenziare i pulsanti

In questi giorni ho installato Tracks un’applicazione Rails che mi aiuta ad implementare il famoso metodo GTD (Get Things Done) di David Allen per la gestione dei progetti lavorativi ed extra.

Tracks è molto semplice ed intuitivo, infatti non so nemmeno se ci sia un manuale dato che finora non è ho avuto bisogno. L’interfaccia è moderna e fa largo uso di Ajax per aggiornare i dati: vedi un’attività che vuoi modificare, ad es. “Iscriviti al convegno”:
Tracks, cattura pulsanti
clicchi la matitina e nella stessa pagina ti si apre il form per modificare l’attività.

E zac! eccoci al punto. Su un’interfaccia composta di bianchi e grigi compaiono due pulsanti colorati. Beh devo dire che la prima volta che ho aperto uno di questi form il mio occhio è subito sceso in basso attirato da questi oggetti colorati, saltando tutto quello che c’era in mezzo, un po’ come quando l’idraulico ti presenta il conto, non importa quante e quali voci abbia scritto nella fattura, l’occhio salta subito al totale.
Il fatto che l’occhio sia inizialmente attirato da questi due pulsanti è fondamentale perché l’utente capisce immediatamente che se vuole salvare le modifiche dovrà premere “Update”, se invece ha cliccato la matitina solo per vedere i dettagli premerà “Cancel”. In molte interfacce ci si trova con dei pulsanti standard che sono assolutamente anonimi e quindi non attirano l’attenzione dell’utente o al più con dei pulsanti colorati in tema con il resto dell’applicazione e quindi anche questi se pur esteticamente più gradevoli tendono a “scomparire”. Un altro aiuto all’usabilità viene dato dal fatto che i pulsanti siano colorati differentemente, certo usare un colore diverso per ogni pulsante può sembrare eccessivo quando si hanno molti pulsanti ma in questo caso come nella maggior parte dei casi i pulsanti sono solo due e sono associati ad azioni tra loro opposte. L’abbinata verde - rosso è quindi a mio avviso azzeccata dato che già in molti altri contesti di utente siamo abituati a pensare al verde come il colore dell’OK, avanti, via libera, non ci sono problemi; mentre il rosso ci dice: “attento”, “sei sicuro?”.
Un ultimo accorgimento usato è quello di illuminare i pulsanti quando il mouse ci passa sopra, per cui il pulsante “Cancel” ad esempio acquista uno sfondo rosso chiaro. Con l’illuminazione del pulsante l’utente viene ulteriormente sollecitato a valutare quello che sta facendo e quindi viene aiutato a non sbagliare.

Sono solo due pulsanti, i due soliti pulsanti che ritroviamo nelle applicazioni che testiamo o in quelle che sviluppiamo ma sono l’elemento imprescindibile di ogni interfaccia e uno degli elementi con cui si interagisce maggiormente, per questo una corretta valutazione può cambiare l’esperienza dell’utente in modo significativo.

Alla prossima user experience.

Nicola