Dimensione minima pulsanti touch: perché l’area che tocchi non è quella che vedi

La grafica è di quelle che spiegano in tre secondi quello che di solito richiede mezza giornata di riunione. Due pannelli affiancati su fondo avorio, tipografia a contrasto forte fra un serif editoriale e un sans geometrico. A sinistra, sotto l’etichetta Too Cramped, quattro iconcine blu — casa, lente, cuore, menu a tre righe — schiacciate l’una contro l’altra al centro di un riquadro lilla, ciascuna chiusa in un contorno tratteggiato che le sta addosso come un vestito di due taglie più stretto. A destra, More Room: stesse quattro icone, stessa grafica, ma i tratteggi sono diventati quadrati generosi, distanziati, con aria intorno. Sotto, due didascalie asciutte e una riga finale che è il vero messaggio del progetto: controlla l’area toccabile, non solo l’icona.

Quel contorno tratteggiato è il protagonista silenzioso dell’immagine. È il modo in cui noi progettisti disegniamo l’invisibile: il rettangolo sensibile al tocco, che nel codice esiste eccome ma sullo schermo non si vede. Da quindici anni, ogni volta che devo spiegare a un cliente perché la sua app sembra rotta, finisco per disegnare esattamente questo: due rettangoli, uno dentro l’altro.

Il pulsante che vedi non è il pulsante che tocchi

Nelle interfacce digitali esistono due geometrie sovrapposte. C’è la forma visibile — l’icona, il glifo, il pallino colorato — e c’è l’area sensibile, cioè la regione di schermo che intercetta il dito. Nei progetti fatti bene le due cose non coincidono quasi mai: l’icona resta piccola e leggera, l’area sensibile le cresce intorno di nascosto, con un riempimento trasparente. È esattamente la differenza fra i due pannelli dell’immagine, dove a destra l’icona non è diventata più grande: è cresciuto il tratteggio.

Il motivo è fisico prima che estetico. Il dito non è un cursore: non ha una punta, ha un polpastrello che si appiattisce sul vetro e copre un’area ampia, e per di più il sistema non può nemmeno sapere con certezza quale punto l’utente intendesse colpire. La ricerca sulla meccanica del tocco ha mostrato che il punto percepito dall’utente come centro del proprio tocco non corrisponde al centroide dell’area di contatto rilevata dal sensore, e che lo scarto cambia con l’angolo del dito e con la postura della mano. Tradotto: anche con un dito fermo e uno schermo perfetto, c’è un errore sistematico di qualche millimetro che il progettista deve assorbire allargando il bersaglio. Chi disegna solo l’icona, di fatto, scarica quell’errore sull’utente.

Da dove arrivano i numeri che tutti citano

I 44 punti di Apple, i 48dp di Google: sono le due cifre che chiunque lavori con le interfacce ripete a memoria, spesso senza sapere da dove vengano. La documentazione Android per l’accessibilità indica 48dp come dimensione minima dell’area toccabile, con l’avvertenza che su uno schermo tipico 48dp corrispondono a circa 9 millimetri reali — ed è lì che il numero smette di essere arbitrario.

Nove millimetri non è una cifra di fantasia. Uno studio condotto all’Università del Maryland con l’Università di Helsinki misurò il tocco del pollice su dispositivi palmari tenuti con una sola mano, distinguendo le azioni isolate (premere un pulsante una volta) da quelle seriali (digitare più bersagli in sequenza). Il risultato è che la velocità migliora man mano che il bersaglio cresce, ma il tasso di errore smette di calare in modo significativo oltre una certa soglia: intorno ai 9–9,6 mm per le azioni discrete e intorno ai 7,6–7,7 mm per quelle seriali. Sopra quella soglia si spreca spazio, sotto si regalano errori. I 48dp sono la traduzione in unità di schermo di una misura antropometrica.

Il mondo web ha aggiunto il suo tassello. Le linee guida WCAG 2.2 hanno introdotto un criterio di livello AA sulla dimensione dei bersagli che fissa l’asticella a 24 per 24 pixel CSS, con una clausola importante: un bersaglio più piccolo è accettabile se intorno c’è abbastanza spazio vuoto, cioè se un cerchio di 24 pixel di diametro centrato su ciascun bersaglio non ne tocca un altro. Il livello più stringente, di grado AAA, porta la soglia a 44 per 44 pixel CSS. Qui c’è il punto che quasi nessuno coglie: la norma considera dimensione e spaziatura come due facce dello stesso problema. Puoi rimediare a un bersaglio piccolo con il vuoto che ha attorno, ma non puoi rimediare al vuoto mancante con nessun espediente grafico. Nel pannello sinistro dell’immagine il peccato non è solo la taglia: è che i quattro tratteggi si toccano.

La legge di Fitts, nata nel 1954 con bersagli di cartone

Dietro tutto questo c’è un esperimento di settant’anni fa. Nel 1954 Paul Fitts pubblicò uno studio sulla capacità di informazione del sistema motorio umano nel controllo dell’ampiezza del movimento: chiedeva a dei soggetti di colpire alternativamente due bersagli con uno stilo, variando distanza e larghezza. Ne ricavò una relazione diventata canonica: il tempo necessario a raggiungere un bersaglio cresce con la distanza e diminuisce con la sua larghezza, secondo una legge logaritmica. Nessuno schermo touch, nessun pollice, nessuna app: solo cartone, stilo e cronometro.

La portata di quel lavoro sta nel fatto che il rapporto non riguarda il mouse o il dito, ma il braccio umano in quanto sistema di controllo. Per questo la stessa formula regge oggi su un telefono. E per questo tutte le scorciatoie progettuali che funzionano davvero derivano da lì: avvicinare i comandi usati spesso al punto di partenza del movimento, ingrandire i bersagli importanti, sfruttare i bordi dello schermo — che si comportano come bersagli infinitamente profondi, perché il dito non può uscirne — e mettere lontano ciò che è pericoloso.

Perché la tastiera del telefono sbaglia meno di quanto dovrebbe

C’è un esperimento che faccio fare sempre a chi dice che i tasti piccoli non sono un problema perché tanto io scrivo benissimo. Misura un tasto della tastiera del tuo telefono: in verticale sta ampiamente sotto le soglie di cui sopra. Eppure funziona. Non è merito del tuo pollice: è che sotto la grafica dei tasti il sistema ridisegna continuamente le aree sensibili. Le ricerche sul ridimensionamento dei bersagli nelle tastiere software hanno mostrato che si possono allargare o restringere le regioni di tocco dei singoli tasti in base alla probabilità delle lettere successive, ottenendo riduzioni di errore misurabili — a patto di non esagerare, perché un’area che si allontana troppo dal tasto disegnato produce correzioni che l’utente percepisce come ostili.

È la dimostrazione più elegante del principio dell’immagine: la grafica dei tasti è ferma, l’area toccabile respira. E vale come monito: lo scarto fra visibile e sensibile è uno strumento potente, ma va usato a favore di chi tocca, non contro.

Quando i pulsanti piccoli sono una scelta, non un errore

Qui arriva la parte scomoda del mestiere. La X per chiudere un annuncio pubblicitario è minuscola e appiccicata al bordo. Il pulsante che annulla un abbonamento è un link grigio di sei pixel, mentre quello che conferma il pagamento è un rettangolo pieno largo mezzo schermo. Non è incompetenza: è progettazione che sfrutta la legge di Fitts al contrario, rendendo costoso in termini di tempo e di errore il gesto che non conviene a chi ha commissionato l’interfaccia.

Il caso più frequente, e il più facile da correggere, è quello di due azioni opposte messe l’una accanto all’altra: conferma e annulla, salva ed elimina, paga e torna indietro. Prima ancora di essere un problema grafico è un problema di spaziatura — ed è esattamente il motivo per cui la norma sui bersagli prevede la clausola sullo spazio libero. Nella pratica, otto pixel di distanza sono il minimo sindacale fra due comandi ordinari; fra un’azione distruttiva e una ordinaria ne servono molti di più, o meglio ancora una gerarchia diversa: l’azione irreversibile non va messa alla stessa altezza, con la stessa forma, a un millimetro dall’altra.

Lo stesso vale per i casi che tutti conosciamo e nessuno nomina: le frecce dei caroselli incollate al bordo su schermi stretti, i link di testo dentro un paragrafo senza alcun riempimento verticale, le icone social in fondo alla pagina messe in fila come perline. Nella maggior parte dei casi basta aggiungere riempimento all’elemento stesso, senza toccare una virgola del disegno.

Il pollice descrive un arco, non una linea

C’è un ultimo strato, ed è il più trascurato: dove si trova il bersaglio. Tenendo il telefono con una mano sola, il pollice non raggiunge lo schermo in modo uniforme. Esiste un modello predittivo, sviluppato analizzando la cinematica del pollice, che descrive l’area funzionalmente raggiungibile come una regione curva dipendente dalla dimensione della mano e dalla presa sul dispositivo. In altre parole: la zona comoda è una fascia ad arco nella parte bassa dello schermo, mentre l’angolo opposto in alto è territorio scomodo, raggiungibile solo cambiando presa — cioè rischiando di far cadere il telefono.

Da qui discende, senza bisogno di mode, la ragione per cui le barre di navigazione sono migrate in basso, perché i pulsanti principali delle app stanno vicino al bordo inferiore e perché i comandi distruttivi hanno senso in alto: non per estetica, ma perché quella posizione impone un gesto deliberato. E da qui discende anche il limite degli schermi cresciuti a dismisura: più il display si allunga, più la parte alta diventa zona di sola lettura.

La prova del pollice: riconoscere un’interfaccia fatta male in dieci secondi

Questo è il test che uso in fase di revisione, e che funziona anche per chi non progetta app ma deve valutare il lavoro di qualcuno.

Una mano sola, in piedi. Prendi il telefono con la mano che usi di solito e prova a completare l’azione principale senza mai usare l’altra. Se devi riposizionare la presa, il progetto ha un problema di posizione.
Mano occupata e corpo in movimento. Cammina mentre lo fai. Il tremore e l’attenzione divisa fanno emergere tutti i bersagli sottodimensionati che da seduti non noti.
Due azioni opposte. Cerca la coppia conferma/annulla e misura lo spazio fra le due. Se il dito può coprirle entrambe, è un errore progettuale, non una tua disattenzione.
Condizioni reali. Guanti, unghie lunghe, mani fredde, schermo bagnato, luce diretta. Un’interfaccia che regge questi quattro casi è un’interfaccia progettata per esseri umani e non per un cursore su un monitor.

Per chi invece progetta, le leve concrete sono poche e tutte noiose: ragionare in millimetri reali e non in pixel, perché la stessa misura su densità diverse diventa un’altra cosa; allargare l’area sensibile con il riempimento lasciando l’icona piccola, esattamente come mostra il pannello destro dell’immagine; considerare dimensione e spaziatura un’unica decisione; verificare sempre il risultato sul dispositivo, in mano, in piedi, con la luce sbagliata. Non è glamour. Ma è la differenza fra un’app che sembra funzionare bene e una che l’utente accusa di essere lenta, quando in realtà è solo imprecisa.

La cosa più onesta di questa grafica è proprio il fatto che renda visibile il tratteggio. Nel lavoro quotidiano quel rettangolo non si vede mai, e per questo è la prima cosa che salta nei progetti sotto pressione: nessuno se ne accorge in una presentazione su schermo grande, tutti se ne accorgono il primo giorno in cui l’app finisce in tasca a qualcuno. Forse qualcuno dirà che è buon senso. Lo è — ma è buon senso misurato in laboratorio, scritto in una norma e sistematicamente dimenticato.

Fonti

Tag:Interfacce digitali