Dobierz odpowiedni rozmiar elementów dotykowych

Ta reguła uruchamia się, gdy PageSpeed Insights wykryje że niektóre elementy dotykowe (np. przyciski, linki czy pola formularzy) mogą być zbyt małe lub położone zbyt blisko siebie, by można ich było łatwo użyć na ekranie dotykowym.

Omówienie

Małe oraz położone blisko siebie linki i przyciski trudniej jest precyzyjnie dotknąć na ekranie dotykowym niż tradycyjnie wskazać kursorem myszy. Przypadkowe trafianie w niewłaściwe elementy może denerwować, dlatego warto zadbać, by elementy były odpowiednio duże i od siebie oddalone. Użytkownicy nie będą mieć wówczas problemu z precyzyjnym dotknięciem pojedynczego elementu, a nie kilku na raz. Obszar dotykany palcem ma średnio około 10 mm szerokości (nieco mniej niż pół cala), a wytyczne na temat interfejsu użytkownika w Androidzie zalecają, by minimalny rozmiar elementu dotykanego wynosił mniej więcej 7 mm lub 48 pikseli CSS w witrynie z widocznym obszarem prawidłowo ustawionym pod kątem komórek.

Zalecenia

Upewnij się, że najważniejsze elementy dotykowe w witrynie, czyli te, które będą najczęściej używane, są wystarczająco duże, by można je było łatwo nacisnąć: mają co najmniej 48 pikseli CSS na wysokość i szerokość (przy założeniu, że poprawnie skonfigurowałeś widoczny obszar). Rzadziej używane linki mogą być mniejsze, ale i tak powinny być między nimi odpowiednie odstępy, by 10-milimetrowy obszar dotknięcia nie objął przypadkiem kilku linków jednocześnie. Lepiej, by użytkownicy nie musieli używać funkcji dotykowego powiększania ekranu (ani polegać na funkcjach interfejsu przeglądarki ułatwiających interakcję, takich jak lupa w przeglądarce Chrome, która powiększa wyskakujące okienka) w celu wygodnego i precyzyjnego skorzystania z wybranego przycisku czy linku.

Ustaw odpowiednio duży rozmiar najważniejszych elementów dotykowych, by ułatwić ich użycie

Dotyczy to elementów używanych najczęściej, takich jak przyciski najpopularniejszych funkcji, paski wyszukiwania i inne ważne pola, a także główne linki nawigacyjne. Powinny one mieć co najmniej 7 mm (48 pikseli CSS przy poprawnie skonfigurowanym widocznym obszarze), a jeżeli są mniejsze, zadbaj o dodatkowe odstępy wokół nich.

Upewnij się, że między mniejszymi elementami dotykowymi są dodatkowe odstępy

Rzadziej używane linki czy przyciski mogą oczywiście być mniejsze niż zalecane 7 mm, jednak w odległości 5 mm (32 piksele CSS) od nich, zarówno w poziomie, jak i w pionie, nie powinny się znajdować żadne inne elementy tego typu. Dzięki temu użytkownik będzie mógł trafić dokładnie w wybrany element.