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 log₂ (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:

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.

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 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.

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.

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.