Su uno schermo touch il cursore è il dito, e un dito è molto meno preciso di un puntatore. Un'icona di 16 pixel che con il mouse si clicca senza problemi, su un telefono diventa un bersaglio da colpire con attenzione, magari mentre si cammina o si tiene in braccio una borsa. Le dimensioni dei bersagli sono uno dei fattori più concreti dell'usabilità mobile, e anche uno dei più trascurati.
Area visibile e area attiva
Bisogna distinguere tra ciò che si vede e ciò che risponde al tocco. Un'icona può essere disegnata a 20 pixel ma avere un'area attiva di 44 o 48 pixel, grazie a margini interni trasparenti. È la soluzione più comune per mantenere un aspetto leggero senza sacrificare la facilità d'uso.
.icona-azione {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
Che cosa dicono le linee guida
Le principali indicazioni sono queste:
| Fonte | Indicazione |
|---|---|
| WCAG 2.2, criterio 2.5.8 (livello AA) | Almeno 24 × 24 pixel CSS, o spaziatura sufficiente intorno a bersagli più piccoli |
| WCAG, criterio 2.5.5 (livello AAA) | Almeno 44 × 44 pixel CSS |
| Linee guida Apple | Area minima di 44 × 44 punti |
| Material Design (Google) | Area minima di 48 × 48 dp |
Il requisito di livello AA è un minimo: serve a escludere i casi davvero problematici. I valori delle piattaforme, intorno ai 44-48, sono un riferimento più adatto per i controlli principali di un'app. Il criterio WCAG prevede alcune eccezioni, per esempio i link all'interno di un paragrafo di testo, dove le dimensioni dipendono dall'interlinea.
La spaziatura conta quanto la dimensione
Due bersagli grandi ma attaccati sono comunque fonte di errori: il tocco tende a cadere sul bordo e ad attivare quello sbagliato. È il caso tipico di due icone vicine come «Modifica» ed «Elimina», dove un errore ha conseguenze serie. Alcune buone pratiche:
- lasciare almeno qualche pixel di spazio tra bersagli adiacenti;
- separare con più spazio, o collocare in posizioni diverse, le azioni distruttive da quelle frequenti;
- negli elenchi, rendere attiva l'intera riga invece di un piccolo link all'interno;
- nelle barre di strumenti, preferire meno azioni ben distanziate a molte icone compresse.
La zona del pollice
Molte persone usano il telefono con una mano sola, toccando con il pollice. In questa posizione la parte centrale e inferiore dello schermo è facile da raggiungere, mentre gli angoli in alto, soprattutto quello opposto alla mano, richiedono di allungarsi o di cambiare presa. Con schermi sempre più grandi la differenza si accentua.
Ne derivano alcune scelte di progettazione:
- collocare le azioni frequenti nella metà inferiore, per esempio in una barra a schede o in un pulsante principale in basso;
- evitare di mettere il pulsante di conferma di un modulo solo in alto a destra;
- tenere conto che una parte degli utenti è mancina: le azioni più importanti funzionano meglio al centro che in un angolo.
Non è una regola assoluta: chi usa il telefono con due mani o appoggiato al tavolo ha esigenze diverse. Ma progettare per l'uso con una mano raramente penalizza gli altri.
Errori frequenti
- Link di testo minuscoli nei piè di pagina, come «Privacy» e «Termini», ammassati su una riga.
- Pulsanti di chiusura piccolissimi nelle finestre sovrapposte, a volte posizionati vicino al bordo dello schermo.
- Caselle di spunta e pulsanti di opzione di 12-16 pixel, senza che l'etichetta accanto sia cliccabile.
- Elementi che si spostano durante il caricamento, così che il tocco destinato a un pulsante finisca su un banner apparso all'improvviso.
- Gesti come unico modo per un'azione: uno scorrimento laterale per eliminare un elemento va bene come scorciatoia, ma deve esistere anche un pulsante.
Il caso delle caselle di spunta ha una soluzione semplice: associare correttamente l'etichetta al controllo, così che toccare il testo selezioni la casella. L'area utile cresce senza cambiare la grafica.
Chi ne beneficia
Bersagli generosi aiutano le persone con tremori, artrite o mobilità ridotta delle mani, chi ha una vista non perfetta, gli anziani, ma anche chiunque usi il telefono su un autobus, con i guanti o con una mano occupata. È un esempio chiaro di come un requisito di accessibilità migliori l'esperienza di tutti.
Come verificare
Il controllo più efficace è usare il prodotto su un telefono reale, con una mano, magari camminando. In aggiunta, gli strumenti per sviluppatori dei browser permettono di ispezionare le dimensioni effettive degli elementi interattivi, e alcuni strumenti di verifica automatica segnalano i bersagli sotto la soglia minima.
In sintesi
- L'area attiva può essere più grande dell'icona visibile: 44-48 pixel sono un buon riferimento per i controlli principali.
- Le WCAG 2.2 fissano un minimo di 24 × 24 pixel CSS al livello AA.
- La spaziatura tra bersagli è importante quanto la loro dimensione.
- Le azioni frequenti stanno meglio nella zona raggiungibile dal pollice.
