zbyt małe strefy kliknięć na mobile

Zbyt małe strefy kliknięć na mobile zwiększają ryzyko pomyłkowego dotknięcia niewłaściwego elementu.

Na czym polega problem zbyt małych stref kliknięć

Zbyt mała strefa kliknięcia oznacza, że obszar reagujący na dotknięcie ekranu jest niewielki w stosunku do rozmiaru palca i dokładności typowej obsługi telefonu. Dotyczy to między innymi ikon w menu, przycisków formularzy, odnośników umieszczonych blisko siebie, elementów nawigacji oraz kontrolek zamykania okien. Użytkownik może wtedy nacisnąć sąsiedni przycisk, aktywować inną opcję albo nie wywołać żadnej reakcji. Problem jest szczególnie widoczny na ekranach o dużej gęstości pikseli, ponieważ element może wyglądać na wyraźny, ale jego rzeczywisty obszar interakcji pozostaje mały.

Strefa kliknięcia nie musi być ograniczona wyłącznie do widocznego obrysu ikony. W interfejsie można powiększyć obszar aktywny za pomocą marginesu wewnętrznego, odpowiedniego paddingu lub niewidocznego obszaru obsługi, zachowując mniejszy symbol graficzny. Ważne jest jednak, aby sąsiednie elementy nie nachodziły na siebie i aby użytkownik mógł jednoznacznie rozpoznać, który obszar uruchamia daną funkcję. Samo zwiększenie rozmiaru grafiki nie rozwiązuje problemu, jeśli zdarzenie dotknięcia nadal jest obsługiwane tylko na małym elemencie.

Wpływ na obsługę strony i formularzy

Małe strefy dotykowe zwiększają liczbę pomyłek podczas korzystania ze strony na smartfonie. Użytkownik może przypadkowo przejść na inną podstronę, usunąć wpis, wybrać błędną wartość na liście albo wysłać formularz z niewłaściwymi danymi. W przypadku odnośników tekstowych ustawionych jeden pod drugim problem wynika nie tylko z szerokości tekstu, ale również z odstępu między wierszami i wysokości obszaru, który odbiera dotknięcie. Jeżeli aktywny jest wyłącznie sam napis, trafienie w link może wymagać większej precyzji niż kliknięcie w cały wiersz lub przycisk.

Ocena problemu powinna obejmować różne rozmiary ekranów, orientację pionową i poziomą oraz obsługę jedną ręką. Trzeba sprawdzić także pola formularzy, przyciski wyboru, pola wyboru, przełączniki, ikony powrotu, menu rozwijane i elementy pojawiające się w wyskakujących oknach. Szczególnej uwagi wymagają kontrolki znajdujące się przy krawędzi ekranu, ponieważ część użytkowników trzyma telefon w sposób ograniczający zasięg kciuka. Błąd może występować tylko w określonym układzie CSS, po zmianie powiększenia tekstu albo po wyświetleniu komunikatu walidacyjnego.

Wymagania dostępności i sposoby poprawy

Wytyczne WCAG 2.2 dla kryterium 2.5.8 określają minimalny rozmiar celu dotykowego na 24 na 24 piksele CSS, z określonymi wyjątkami, między innymi gdy cel znajduje się w tekście lub gdy odpowiedni odstęp zapewnia wymagany obszar. Jest to wartość zgodności z konkretnym kryterium, a nie uniwersalna gwarancja wygodnej obsługi. W praktyce projektowej większe kontrolki często ograniczają liczbę pomyłek, zwłaszcza na telefonach używanych w ruchu, przez osoby z ograniczoną precyzją ruchów lub przy powiększonym interfejsie.

Przy poprawie interfejsu należy zwiększyć obszar elementu interaktywnego, zachować odstępy między celami i nie polegać wyłącznie na kolorze lub drobnej zmianie wyglądu jako sygnale aktywności. Przycisk powinien mieć wyraźny stan wciśnięcia, fokus klawiatury i stan wyłączenia, jeśli dana funkcja jest czasowo niedostępna. Warto przetestować obsługę bez precyzyjnego celowania oraz z powiększeniem strony. Narzędzia deweloperskie przeglądarki pozwalają sprawdzić rzeczywisty rozmiar elementu, jego położenie i ewentualne nakładanie się warstw. Test automatyczny może wykryć część zbyt małych celów, ale nie zastępuje sprawdzenia całego przepływu użytkownika.

Diagnostyka na laptopach i komputerach

Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC oraz podzespołów, a przy diagnozowaniu problemów z obsługą stron może sprawdzić, czy źródłem trudności jest ekran dotykowy, przeglądarka, ustawienia powiększenia, sterownik urządzenia wskazującego lub sam interfejs witryny. W laptopach z ekranem dotykowym warto porównać działanie tej samej strony przy użyciu palca, gładzika i myszy. Jeżeli pomyłki występują tylko przy dotyku, przyczyną może być niewłaściwy rozmiar celu albo błędne mapowanie zdarzeń dotykowych.

Diagnostyka obejmuje również sprawdzenie aktualności przeglądarki, skalowania systemowego, rozdzielczości ekranu i zachowania strony przy zmianie szerokości okna. Na komputerze można zweryfikować, czy element nie jest zasłaniany przez niewidoczną warstwę, czy obszar aktywny odpowiada wizualnemu przyciskowi oraz czy kod nie obsługuje kliknięcia tylko na pojedynczym elemencie graficznym. Po zmianach należy ponownie przejść przez formularze i nawigację, ponieważ powiększenie strefy może zmienić układ sąsiednich kontrolek. Prawidłowa poprawka powinna zmniejszyć ryzyko błędnego wyboru bez utraty czytelności i bez utrudniania obsługi klawiaturą.