Forse non tutti sanno che: esistono delle regole matematiche per valutare l'efficacia di una interfaccia

Lo scopo della scienza esatta è di ridurre, tramite operazioni su numeri, i problemi della natura alla determinazione di alcune quantità
James Clerk Maxwell (1856)

Nel momento di valutare una proposta di UX design per una applicazione o per un sito diventa spesso difficile separare l'opinione soggettiva da quella oggettiva, spesso perchè non abbiamo parametri oggettivi da confrontare.

Le scelte di design si basano di frequente su studi fatti direttamente sull'utenza, tramite A/B testing oppure analizzando il comportamento di singoli utenti; si tratta però sempre di dati che si ottengono dal caso specifico e il cui reperimento richiede discrete quantità di tempo e denaro.

Molti designer invece non sanno che esiste anche un approccio scientifico per valutare quanto una soluzione di UX possa essere più efficiente di un'altra: tramite delle valutazioni generali puramente matematiche possiamo ottimizzare il lavoro senza bisogno di effettuare costosi test che possono invece riservare alle situazioni più specifiche del progetto ottimizzando quindi il budget.

La prima volta che ho affrontato questo argomento è stato agli inizi degli anni 2000, leggendo il libro "Interfaccie a misura d'uomo" di Jef Raskin ( link all'editore ) quando ancora il design di un sito web era dettato puramente da scelte grafiche ed i concetti di UI/UX erano limitato solo allo sviluppo di applicazioni desktop: ad oggi invece queste regole vengono comunemente applicate anche al web.

Il modello GOMS

Prendiamo ad esempio uno dei princìpi base dell'usabilità delle form: l'utente deve poter usare la tabulazione per passare da un campo all'altro. Questo requisito ci sembra banale, anche basandoci solo sul buon senso, ma come possiamo spiegarlo matematicamente?
Esiste un metodo di calcolo chiamato Modello GOMS; se prendiamo la sua variante più semplice il keystroke-level (KLM, ma esiste anche una variante per le interfaccie Touch, ovvero la TLM), possiamo dare un valore (indicativo) in tempo ad una serie di operazioni:

• battitura (K) = 0,2s
• puntamento (del mouse sull'elemento) (P) = 1,1s
• tragitto (della mano dalla tastiera al mouse e viceversa) (H) = 0,4s
• preparazione mentale (M) = 1,35s
• risposta (del sito all'azione) (R) = variabile in base all'applicazione

Se consideriamo che l'attivazione del focus di un campo (R) sia praticamente 0 sia usando la tastiera che il mouse, e che l'utente abbia già le mani sulla tastiera dopo aver completato il campo precedente, possiamo fare questo tipo di valutazione: il passaggio da un campo all'altro tramite tab richiede solo la pressione di un tasto (M+K), mentre se deve usare il mouse deve spostare la mano sul mouse, puntare il campo, fare click con il mouse e spostarsi di nuovo sulla tastiera (H+M+P+K+H). Questo è il confronto matematico: tab = 1,35s + 0,2s = 1,55s
mouse = 0,4s + 1,35s + 1,1s + 0,2s + 0,4s = 3,45s
Il modello GOMS ha una complessità superiore a questo semplice calcolo, ma è comunque palese il perchè la navigazione delle form tramite mouse sia più frustrante per l'utente, che necessita di più del doppio del tempo per completarla.

La legge di Fitts

La matematica ci viene in soccorso anche per quanto riguarda un altro principio: nel caso di un banner di callout con un pulsante all'interno è preferibile applicare l'area cliccabile a tutto il banner e non solo al pulsante.

Questo presupposto è dimostrabile tramite la legge di Fitts, che consente di stimare il tempo necessario a fare click su un bersaglio, dato la sua distanza dal cursore (D) e la larghezza del bersaglio(W):
Tempo (ms) = a + b * log₂(1 + D/W)
dove a e b sono delle costanti che dipendono dal dispositivo usato; questa per la precisione è la formulazione di Shannon, quella più comunemente usata per valutare le interazioni uomo macchina. Una ulteriore variante prevede che invece di usare il valore della larghezza (W) si usi la più piccola della due dimensioni (S).

Anche in questo caso non entrerò in dettagli che esulano dalle mie competenze, ma considerando che l'aumento della dimensione di un'area cliccabile ne riduce anche la distanza (occupa più spazio) si capisce quanto questo possa avere effetto sul tempo richiesto all'utente per compiere l'operazione.
Il confronto tra un pulsante di 100px ed un banner di 400px è ovviamente a favore del secondo senza la necessità di calcoli complessi, ma la prossima volta che dovete decidere se allineare il vostro pulsante a sinistra o a destra nella pagina, provate a chiedervi dove potrebbe più facilmente trovarsi in quel momento il cursore (o l'attenzione) dell'utente e potete quindi valutare se spostarlo o ingrandirlo.

Conclusioni

Ho inserito in questo articolo solo un paio di esempi, ma ci sono molte altre leggi generali che possono essere applicate alla progettazione di una interfaccia, se volete saperne di più vi consiglio (oltre al già citato libro) il sito https://lawsofux.com/ come base di partenza.