Usabile.it

usabilità, accessibilità e interaction-design per il web

home » Articoli » Cos'è la legge di Fitts

16/12/2004

Cos'è la legge di Fitts

[di Maurizio Boscarol]

Sviluppata nel 1954 dallo psicologo Paul M. Fitts, nel Journal of Experimental Psychology, la legge di Fitts stabilisce che il tempo di raggiungimento di un obiettivo (un'area, un bottone) in un compito di puntamento dipende dalla distanza dell'oggetto da raggiungere e dalle dimensioni di tale oggetto. Banalmente, più grande e vicino è l'oggetto, più veloce sarà il compito di puntamento. Per compito di puntamento intendiamo un movimento continuo che parta da una certa posizione e termini sopra l'obiettivo.

Ovviamente, dire che tanto più grande e vicino è un oggetto, e tanto più veloce sarà posizionarcisi sopra non sembra a prima vista una gran scoperta. La legge di Fitts però definisce in termini numerici, quantitativi, il tempo di acquisizione, dati distanza e dimensione del target e note alcune variabili, secondo la seguente formula:

MT = a + b log2 (d/s +1)

dove:

MT = movement time to a target, ovvero tempo di acquisizione dell'oggetto
d = distanza tra il dispositivo di puntamento (ad esempio il puntatore sullo schermo) e l'oggetto
s = size, ovvero dimensione dell'oggetto (misurata sull'asse del movimento).
Nella formula originale i valori di a e b erano: a = 0,230 sec; b = 0,166 sec., ma variano a seconda delle situazioni e possono essere ricavati sperimentalmente.

Questo schema indica il compito tipico:

schema del compito di puntamento
In questo schema un puntatore (freccia bianca) deve raggiungere un obiettivo di dimensione "s" (rettangolo a destra) attraverso un percorso lineare di lunghezza "d".

La legge di Fitts è dunque una formula che riesce a predire in maniera piuttosto precisa il tempo di puntamento di un oggetto. E' stata ripetutamente confermata empiricamente.

Ambito di applicazione

E' importante precisare i limiti entro cui questa legge vale. Si riferisce a movimenti continui, in cui la persona ha già deciso quale obiettivo vuole raggiungere (non si applica dunque allo scorrimento progressivo di voci di menu per prenderle in esame ad una ad una), e quando comunque il movimento è abbastanza piccolo rispetto al corpo umano.

Inoltre presuppone che il compito di puntamento sia scomposto in due momenti principali: un primo movimento ampio, rapido e non preciso, seguito da una fase di avvicinamento fine. Originariamente la formula è stata proposta per movimenti unidimensionali, ma si è applicata anche a movimenti su due dimensioni, prendendo a riferimento la dimensione dell'oggetto lungo l'asse di avvicinamento. Si è dimostrata comunque valida anche quando il percorso di avvicinamento all'oggetto non è lineare, ma spezzato (ad esempio secondo un tracciato noto o vincolato).

La legge di Fitts e le interfacce utente

Le conseguenze per la progettazione di interfacce grafiche sono molte. La più importante, probabilmente, è che il punto più rapido da raggiungere è... quello in cui il puntatore già si trova! E' ovvio, perché non c'è alcun movimento da fare, nè rapido nè lento. Questa proprietà è implementata nel menu contestuale, quello che si attiva cliccando il pulsante destro di un mouse.

menu contestuale nel punto in cui si trova il puntatore
Ovunque si trovi il puntatore è possibile attivare istantaneamente un menu contestuale: l'applicazione più efficiente della legge di Fitts.

A parte il punto in cui il cursore del mouse si trova, la legge di Fitts stabilisce anche quali sono gli altri punti più rapidi da raggiungere sullo schermo. Come qualcuno può facilmente immaginare, i punti più rapidi non dipendono affatto da dove il cursore si trova. Si tratta infatti di punti rapidissimamente raggiungibili da qualunque punto: sono infatti i quattro angoli dello schermo. Il motivo è semplice: il movimento può essere rapidissimo (si può lanciare il mouse verso l'angolo), senza necessità di ricorrere agli aggiustamenti fini, dato che l'angolo non consente al mouse di andare oltre. In questo modo, è come se l'oggetto "angolo" avesse dimensione infinita, dato che possiamo immaginarlo come un oggetto che si estende a piacere oltre i limiti dello schermo. Sorprendentemente, questa proprietà degli angoli dello schermo non è mai stata sfruttata a dovere dalle interfacce grafiche, fino alla più recente versione del sistema operativo per il Macintosh, che implementa exposé, un sistema che consente di attivare funzioni specifiche proprio puntando i 4 angoli dello schermo (c'è un interessante commento di Bruce Tognazzini al riguardo).

Dopo i 4 angoli, ovviamente i punti più rapidi da raggiungere sono i lati: anche se in una direzione sola, anche per loro vale l'assunzione di dimensione infinita. E' per questo motivo che l'interfaccia del Mac ha fin dalle sue prime versioni le barre di menu confinanti con il limite dello schermo. Una caratteristica che rende molto agevole il raggiungimento delle voci di menu.

la barra dei menu nel mac
La barra dei menu nel mac ha le voci attaccate al bordo superiore dello schermo. E' possibile selezionare la voce di menu anche posizionando il puntatore contro il bordo dello schermo, contrariamente a quanto avviene con le versioni di Windows precedenti a XP.

Un errore commesso da tutte le versioni di Windows e in parte corretto solo con la versione XP è che distanzia di pochi pixel dal margine dello schermo le voci disposte sulla barra dei compiti, in basso, unito al fatto che distanzia, sempre di pochi pixel, anche il bottone di avvio, che invece potrebbe trarre giovamento dalla posizione angolare.

Giova specificare che il fatto che gli oggetti siano staccati di pochi pixel dal bordo non li rende "solo un po'" meno rapidi da raggiungere. Rende infatti necessario controllare i movimenti fini (che sono quelli che fanno perdere tempo) e dunque gli oggetti, sebbene vicini ai bordi, sono oggetti come tutti gli altri a tutti gli effetti. O sono disposti esattamente sul bordo, o non trarranno alcun vantaggio dalla legge di Fitts, rispetto ad altri oggetti di pari dimensione.

Altre conseguenze per le interfacce web

Ovviamente, per come è fatto il web, nessuna pagina può giovarsi dal posizionare bottoni o link adiacenti al margine dello schermo, semplicemente perché le finestre del browser hanno un margine di pochi pixel che rende vano il tentativo (recentemente Safari per Mac ha eliminato completamente i margini laterali, ma la finestra fluttua sullo schermo e dovrebbe essere l'utente a posizionarla esattamente sul bordo, prima di poter trarre vantaggio da eventuali link posizionati sul lato). Tuttavia, una supposizione statistica che si può fare (e che abbiamo fatto nel design di questo sito) è che il puntatore del mouse gravita mediamente più spesso vicino alla barra di scorrimento della finestra del browser, sulla destra. E' per questo motivo che abbiamo inserito una colonna di menu e comandi sulla destra, e anche il tab menu orizzontale è spostato verso destra: perché la distanza necessaria per raggiungere quei link è mediamente minore che se stessero da qualche altra parte. Ovviamente il guadagno è piccolo e non merita vincoli di design molto rigidi: ma è pur sempre una considerazione mirata alla facilità d'uso. Oggigiorno, con il diffondersi delle rotelle sul mouse, il puntatore sarà meno probabilmente relegato nella zona destra dello schermo, e anche i vantaggi di questo posizionamento diminuiranno lentamente. Inoltre, passata la prima schermata (quando i menu spariscono), il vantaggio scompare.

La legge di Fitts può essere ancora utilmente sfruttata nella progettazione, anche di pagine web. Infatti, molto semplicemente, ci ricorda che i comandi e le funzioni più importanti e frequenti dovrebbero essere più grandi ed evidenti. I comandi meno usati, o che potrebbero dar vita a conseguenze pericolose, dovrebbero invece essere più piccoli e distanti nella pagina.
Fondamentalmente questo si traduce nella pratica consigliata di ingrandire le aree cliccabili dei link principali. Un tempo si poteva fare usando delle immagini, mentre ora, con l'uso dei css, si può ottenere lo stesso risultato con la proprietà display: block; applicata alle ancore, cioè all'elemento <a hfref> che definisce il link, quando questo è contenuto in elementi di lista. L'effetto è quello che si può notare su questo sito con i menu laterali.

Fitts e gli errori di puntamento

La legge tiene conto del tempo di acquisizione, ma non parla di tasso d'errore. In teoria, naturalmente le zone che sfruttano al massimo la legge di Fitts, come il menu contestuale, gli angoli o i lati hanno tassi di errore bassissimi o nulli. Ma tutte le altre aree sono soggette all'errore dell'utente, che può sbagliare a posizionarsi, e cliccare fuori dalla zona sensibile. Va precisato che questo succede con maggiore probabilità quanto meno la legge di Fitts viene rispettata. Ovvero, succede di preferenza con link e bottoni troppo piccoli e/o lontani.

Talvolta, la necessità obbliga a inserire molte icone e tasti in poco spazio, riducendone le dimensioni e aumentando in tal caso il tasso di errore. Se le icone troppo piccole sono adiacenti, allora un errore può far sì che si clicchi il tasto sbagliato, facendo partire un'azione indesiderata. Per ridurre questo rischio i progettisti talvolta usano inserire un piccolo spazio (pochi pixel sono sufficienti) non cliccabile fra icona e icona, detto area di buffer. L'area di buffer non riduce l'errore: fa sì che l'errore non produca conseguenze indesiderate.

Esempio di area di buffer inserita fra alcune icone
La barra degli strumenti di WordPad prevede delle piccole aree di buffer (zone di salvaguardia di pochi pixel non cliccabili) fra gruppi di icone, ma non all'interno dei gruppi, dove le icone sono adiacenti. Difficile dire se lo scopo dei progettisti era però in questo caso quello di evitare click per funzioni non simili, o semplicemente quello di separare visivamente i diversi gruppi logici di icone...

In generale, comunque, l'inserimento di una manciata di pixel come zona di buffer fra due zone sensibili, ovviamente va contro la legge di Fitts (infatti serve a non far cliccare...). Il motivo è evidente: dato un certo spazio disponibile e un certo numero di oggetti (tasti, icone), l'inserimento di zone di buffer riduce la dimensione degli oggetti. Se lo spazio viene invece aggiunto e non sottratto, si mantengono inalterate le dimensioni dell'oggetto, ma si introducono piccole distanze (aumentando d nella formula vista sopra). In entrambi i casi si va contro la legge di Fitts. Bisogna inoltre ricordare che inserire arbitrariamente spaziature fra tutti gli elementi può ostacolare fenomeni percettivi come il raggruppamento o l'allineamento, che facilitano l'interpretazione dell'interfaccia.

Le zone di buffer dovrebbero dunque essere inserite con una certa cautela, solo dove i target siano piccoli e i rischi di errore possano dar vita ad azioni indesiderate. In ogni caso non dovrebbero essere superiori a pochi pixel. Laddove è possibile, il tasso di errore si riduce semplicemente rendendo più grandi le singole zone cliccabili, cosicché sia più improbabile per un utente cliccare sul margine e più probabile cliccare al centro.

Fitts e la Fisheye view

Un caso particolarmente controverso di applicazione della legge di Fitts riguarda il Dock del Macintosh, o molti altri simili sistemi di menu fatti in flash, dove all'avvicinarsi del cursore gli oggetti del dock (o le voci del menu) si ingrandiscono (expanding targets), sfruttando un effetto di ingrandimento selettivo che diminuisce progressivamente per le zone vicine, simulando in parte la tecnica che viene chiamata Fisheye view, vista grandangolare.

Il Dock del mac in azione
Un esempio del funzionamento del dock del macintosh. Una serie di icone disposte sul bordo inferiore dello schermo si ingrandiscono al passaggio del mouse nel tentativo (riuscito?) di facilitare il click. Così facendo però fanno muovere anche le icone attorno, con un leggero effetto di disorientamento. Il Dock ha diviso gli appassionati: alcuni lo trovano divertente in sè, quasi come gadget, altri lo trovano irritante e disattivano la funzione di ingrandimento. Tognazzini ritiene pragmaticamente che sia stata un'ottima trovata di marketing...

L'ingrandimento dinamico degli oggetti mentre ci si avvicina, però, comporta la considerazione di diversi casi particolari. Ad esempio, l'ingrandimento di una zona può avvenire in molti modi: sottraendo spazio agli elementi vicini, o aggiungendo spazio all'intero gruppo. In generale, i benefici dell'ingrandimento sono molto minori di quel che appare a prima vista (ed è dimostrabile geometricamente) mentre si sono evidenziati problemi dovuti al fatto che l'utente si disorienta vedendo muoversi gli oggetti che si ingrandiscono o rimpiccioliscono, facendo variare il contesto dell'azione. L'argomento è molto complesso, così come sono molti e diversi i sistemi (ognuno con specifici vantaggi e svantaggi) che sfruttano il medesimo principio. Per chi volesse approfondire, un'ottima analisi del Dock si trova in questo lavoro sperimentale di Zhai et al. (in formato pdf).

Conclusioni

La legge di Fitts applicata al web dovrebbe farci ricordare che:

  • Tutti i link dovrebbero essere di dimensione non troppo piccola, perché più piccola è la dimensione, più tempo si impiega a cliccare e maggiore è il rischio di errore
  • I link più importanti dovrebbero stare visibili e facilmente raggiungibili, idealmente nella prima schermata
  • I bottoni e i menu dovrebbero avere un'area cliccabile ampia, non limitata al solo ingombro del testo, ma anche all'area del "bottone" circostante, attraverso l'uso del display: block;
  • Elementi di uso frequente o che si vogliono mettere in evidenza dovrebbero essere più grandi
  • Elementi di uso infrequente o che possono provocare danni dovrebbero essere messi lontani dalle zone principali e resi più piccoli
  • Le zone di buffer non cliccabili fra un'oggetto cliccabile e l'altro dovrebbero essere limitate a pochi pixel e solo nei casi in cui gli oggetti sono molto piccoli e numerosi, e l'azione compiuta per sbaglio è indesiderabile
  • Condizioni e variazioni per casi particolari (ad esempio per soggetti con disturbi motori) dovrebbero essere testate.

E' particolarmente importante l'ultima considerazione: i disabili motori non hanno tutti gli stessi problemi e non utilizzano nemmeno tutti gli stessi dispositivi di puntamento. La legge di Fitts vale finché il movimento è continuo e c'è una corrispondenza lineare fra movimento fisico e movimento del puntatore virtuale. Se, per effetto di un mancato controllo dei movimenti fini, o per l'uso di sistemi di cursore a rotazione, o di altri meccanismi discreti di puntamento, le premesse non vengono rispettate, non bisogna considerare attiva in quel caso la legge di Fitts, e bisogna verificare caso per caso quali sono i problemi di quella categoria di disabili. Purtroppo le ricerche in tal senso non sembrano numerose, ma è importante non generalizzare una legge che ha ambiti di applicazione ben definiti ad ambiti che non le competono.

Articoli correlati:

torna su Torna su