Quando il tuo design viene visualizzato su un dispositivo mobile, devi assicurarti che gli elementi interattivi come pulsanti o link siano abbastanza grandi e abbiano abbastanza spazio intorno a loro, per facilitarne la pressione senza sovrapporsi accidentalmente ad altri elementi. È un vantaggio per tutti gli utenti, ma è particolarmente utile per chi ha una disabilità motoria.
Le dimensioni minime consigliate per il touch target sono di circa 48 pixel indipendenti dal dispositivo su un sito con un'area visibile mobile impostata correttamente. Ad esempio, anche se un'icona può avere solo larghezza e altezza di 24 px, puoi utilizzare una spaziatura interna aggiuntiva per portare le dimensioni del target dei tocchi a 48 px. L'area di 48 x 48 pixel corrisponde a circa 9 mm, all'incirca la dimensione dell'area del dito di una persona.
Nella demo, ho aggiunto una spaziatura interna a tutti i link per assicurarmi che soddisfino le dimensioni minime.
I touch target devono inoltre essere distanti circa 8 pixel, sia orizzontalmente che verticalmente, in modo che il dito dell'utente che preme su un target dei tocchi non tocchi inavvertitamente un altro.
Test dei touch target
Se il target è di tipo testo e hai utilizzato valori relativi come em o rem per ridimensionare il testo e la spaziatura interna, puoi utilizzare DevTools per verificare che il valore calcolato dell'area sia abbastanza grande.
Nell'esempio seguente, utilizzo em per il testo e la spaziatura interna.
Ispeziona l'elemento a del link e, in Chrome DevTools, passa al riquadro Calcolato, dove puoi esaminare le varie parti della casella e vedere le dimensioni in pixel di conseguenza.
In Firefox DevTools è presente un riquadro Layout.
In quel riquadro vedrai le dimensioni effettive dell'elemento ispezionato.
Utilizzo di query supporti per rilevare l'uso del touchscreen
Invece di limitarsi a testare le dimensioni dell'area visibile per poi indovinare che è probabile che le dimensioni ridotte siano telefoni o tablet, che a loro volta utilizzano un touchscreen, ora esistono modi più solidi per adattare il design in base alle effettive funzionalità del dispositivo.
Una delle funzionalità multimediali che ora possiamo testare con le query supporti
è se l'input principale dell'utente è un touchscreen (pointer) e
se uno degli input attualmente rilevati è un touchscreen (any-pointer).
Le funzionalità pointer e any-pointer restituiranno fine o coarse.
Un puntatore sottile è invece l'utente che utilizza un mouse o un trackpad,
anche se il mouse è connesso a un telefono tramite Bluetooth.
Il puntatore coarse indica un touchscreen,
che potrebbe essere un dispositivo mobile, ma anche lo schermo di un laptop o un tablet di grandi dimensioni.
Se modifichi il CSS all'interno di una query supporti per aumentare il touch target, il test di un puntatore approssimativo consente di aumentare i target dei tocchi per tutti gli utenti che utilizzano il touchscreen. In questo modo l'area tocco più ampia sarà disponibile a seconda che si tratti di uno smartphone o di un dispositivo più grande.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Puoi trovare ulteriori informazioni sulle funzionalità dei contenuti multimediali di interazione, ad esempio il puntatore, nell'articolo Nozioni di base sul Adattamento web.