Imposta dimensioni appropriate per target tocco

Questa regola viene attivata quando PageSpeed Insights rileva che determinati target tocco (ad esempio, pulsanti, link o campi modulo) potrebbero essere troppo piccoli o troppo vicini per consentire all'utente di premerli facilmente su un touchscreen.

Panoramica

Quando i pulsanti o i link sono troppo piccoli o ravvicinati, gli utenti fanno più fatica a premere in modo accurato su un touchscreen rispetto a quando usano un tradizionale cursore del mouse. Per non generare frustrazione se gli utenti premono pulsanti o link sbagliati, i target tocco devono avere dimensioni sufficienti e una giusta distanza gli uni dagli altri, in modo da poter essere premuti senza che il dito dell'utente si sovrapponga ad altri target tocco. La dimensione media del polpastrello del dito di un utente adulto ha una larghezza di circa 10 mm, mentre le linee guida all'interfaccia utente di Android relative ai target tocco consigliano una dimensione minima approssimativa di 7 mm o di 48 pixel CSS nel caso di un sito con un'area visibile per dispositivi mobili impostata correttamente.

Consigli

Devi assicurarti che i target tocco più importanti del tuo sito (quelli, cioè, che gli utenti utilizzeranno più spesso) siano abbastanza grandi da poter essere premuti con facilità, con un'altezza/larghezza minima di 48 pixel CSS (presupponendo che tu abbia configurato l'area visibile in modo corretto). I link utilizzati più saltuariamente possono avere dimensioni inferiori, ma devono comunque essere distanziati gli uni dagli altri, in modo tale che un polpastrello di 10 mm non prema involontariamente su due link contemporaneamente. Gli utenti non devono pizzicare per regolare lo zoom (o ricorrere ad altre funzionalità di interfaccia del browser di disambiguazione del tocco, come la lente di ingrandimento popup di Chrome) per premere con facilità e sicurezza il link o il pulsante desiderato.

Imposta i target tocco in modo che siano abbastanza grandi per essere premuti facilmente

Questo vale per i target tocco più utilizzati dagli utenti, come i pulsanti relativi ad azioni frequenti, barre di ricerca e altri campi modulo importanti, nonché per i link di esplorazione principali. Questi target tocco devono misurare almeno 7 mm (48 pixel CSS se hai configurato l'area visibile in modo corretto). Se misurano meno di 7 mm, devono inoltre avere ulteriore spazio circostante.

Assicurati che sia presente spazio aggiuntivo tra i target tocco più piccoli

È normale che i pulsanti o i link utilizzati meno di frequente misurino meno della dimensione consigliata di 7 mm. Tuttavia, non devono esserci altri target tocco nel raggio di 5 mm (32 pixel CSS). In questo modo, quando l'utente preme un target tocco con il dito, non ne tocca altri involontariamente.