29 marzo 2010

Sviluppi per Touch Screen ? Trucco 4 di 4 - la legge di Fitts

Con lieve ritardo rispetto ai precedenti post dovuto a piccoli problemi di salute in famiglia, passo a pubblicare il quarto trucco della serie 'Sviluppi per Touch Screen ?'.

Ricordo che nei precedenti post Trucco 1Trucco 2Trucco 3 ho cercato di riassumere brevi, a volte banali, accortezze che possono evitarvi problemi di usabilità se il target delle vostre applicazioni è il touch screen.

Nell'ultimo post richiamo quella che spesso è una delle leggi di riferimento per chi progetta interfacce utente: la Legge di Fitts. La Legge di Fitts è usata nello studio dei modelli di iterazione tra uomo e macchina tramite meccanismi di puntamento. Riassumendola in una frase potrebbe suonare come "il tempo impiegato per raggiungere un obiettivo è in funzione della distanza e della dimensione dell'obiettivo stesso".
Concetto banalissimo, quello della legge di Fitts, che porta ad una pratica altrettanto banale: "raggruppare i controlli usati più frequentemente, e farli più grandi possibile".


(se non vi basta la definizione e la pagina di Wikipedia, potete comprendere al meglio e approfondire gli aspetti della legge di Fitts con l'ottimo Visualizing Fitt's Law di Kevin Hale. Nemmeno in dieci anni potrei scrivere di meglio)


Ritornando allo sviluppo per touch screen, ci si può chiedere se la Legge di Fitts, applicata per tanti anni pensando al mouse, possa essere applicata allo stesso modo usando il dito come dispositivo di puntamento. Ebbene sì. Funziona. 


Ma con qualche eccezione.


4. Attenzione alle eccezioni alla Legge di Fitts


La prima eccezione alla legge di Fitts riguarda la dimensione dei display. Nel caso in cui il target sia un cellulare o un altro dispositivo di piccole dimensioni, la distanza fisica tra i controlli all'interno di una schermata è talmente bassa da ridurre drasticamente la propria influenza. In pratica, non è necessario preoccuparsi più di tanto della distanza, ma è meglio badare alla prevedibilità nella posizione dei controlli. Il dito dell'utente si muoverà molto velocemente tra un controllo e l'altro, per cui fate in modo che non abbia sorprese, e che possa addirittura 'anticipare' la posizione del controllo nella schermata o fase successiva ad ogni azione.

La seconda eccezione riguarda la regola della Legge di Fitts nota come la Regola dei Bordi Infiniti (Rule of the Infinite Edges). Questa regola spiega che, nel caso di un monitor, i bordi e gli angoli dello schermo sono zone speciali perché il puntatore raggiunge un limite non superabile, e quindi non è richiesta una decelerazione da parte dell'utente per raggiungere i controlli posti in queste zone. Ogni controllo la cui area sensibile include il bordo del display è automaticamente molto più facile da cliccare rispetto agli altri.

Nel caso dei touch screen, e del dito, la regola dei Bordi Infiniti funziona diversamente. Il dito, a differenza del puntatore del mouse, può superare il bordo dello schermo.
Partendo da questa consapevolezza, è possibile studiare l'hardware su cui girerà la vostra applicazione per applicare diverse strategie.

1. Se il display termina senza soluzione di continuità con il resto dell'hardware (stile iPhone e smartphone touch di ultima generazione), allora lasciate perdere i margini e posizionate i controlli dove vi pare.

2. Se il display termina su un bordo incavato, oppure nei pressi di una cornice in rilievo, allora avete il vantaggio di avere una zona di cui l'utente può sentire al tatto la presenza senza dover guardare lo schermo. Se volete sfruttarla, fatelo. E' ideale per operazioni di scroll, zoom, o simili. State solo attenti a non riservare una zona sensibile troppo sottile (non usate solo gli ultimi due pixel dello schermo, per intenderci) perché la cornice o il bordo stesso del display renderanno abbastanza difficoltoso riuscire a premere con precisione e forza il touch.

Inoltre considerate sempre che il bordo del display, in molti sensori touch, è a rischio di imprecisioni ed errori. Nel dubbio, rimanete al centro dello schermo. E disegnate pulsanti grandi.