przyciski blisko siebie – ryzyko kliknięcia nie tego co trzeba

Przyciski umieszczone zbyt blisko siebie zwiększają ryzyko przypadkowego kliknięcia niewłaściwego elementu.

Jak zbyt mały odstęp zmienia działanie interfejsu

Przyciski blisko siebie tworzą problem wtedy, gdy obszary reagujące na kliknięcie lub dotknięcie są większe niż widoczne etykiety albo gdy odstęp między nimi jest niewystarczający. Użytkownik może wskazać właściwy napis, ale system odczyta położenie wskaźnika jako wybór sąsiedniego elementu. W komputerze stacjonarnym częściej wynika to z niedokładnego ruchu myszy, drżenia dłoni lub przesunięcia kursora podczas naciskania przycisku. Na ekranie dotykowym palec zasłania część interfejsu, a jego nacisk nie ma tak precyzyjnej krawędzi jak wskaźnik myszy.

Ryzyko rośnie, gdy obok siebie umieszczone są działania o odmiennych skutkach, na przykład „Usuń” i „Zapisz”, „Anuluj” i „Potwierdź” albo przyciski zmieniające ustawienia systemowe. Sam wygląd etykiety nie chroni przed pomyłką, ponieważ o wyborze decyduje również techniczny obszar aktywny elementu. Jeżeli dwa elementy mają nachodzące na siebie obszary obsługi zdarzeń, problem może wynikać nie tylko z ergonomii, lecz także z błędnej implementacji stylów CSS, pozycjonowania lub obsługi zdarzeń.

Rozmiar pola aktywnego i odstępy między kontrolkami

Projektując interfejs, należy rozdzielić widoczny kształt przycisku od jego pola aktywnego. Padding może zwiększyć obszar, który można kliknąć, ale nie powinien powodować nakładania się sąsiednich kontrolek. W interfejsie internetowym warto sprawdzić rzeczywiste prostokąty elementów w narzędziach deweloperskich przeglądarki, a następnie ocenić ich położenie przy różnych szerokościach okna. Zmiana skali systemowej, powiększenie strony, tryb pełnoekranowy i responsywne przełamanie wiersza mogą zmienić odległości, które na ekranie projektowym wyglądały poprawnie.

Wytyczne WCAG 2.2 zawierają kryterium 2.5.8 dotyczące minimalnego rozmiaru celu dla wskaźnika: dla elementów obsługiwanych przez wskaźnik cel powinien mieć co najmniej 24 na 24 piksele CSS albo być odpowiednio oddzielony od innych celów. To kryterium przewiduje wyjątki, między innymi dla elementów umieszczonych w tekście lub dla których rozmiar wynika z odpowiednika dostępnego w innym miejscu. Nie oznacza to, że każdy przycisk powinien mieć dokładnie taki wymiar. Dla często używanych kontrolek, zwłaszcza dotykowych, rozsądne jest zastosowanie większego pola aktywnego i wyraźnego odstępu, ponieważ zmniejsza to liczbę pomyłek bez uzależniania obsługi od precyzji użytkownika.

Skutki błędnego kliknięcia w aplikacji i przeglądarce

Pomyłkowe kliknięcie nie zawsze kończy się jedynie zmianą zaznaczenia. W formularzu może wysłać niepełne dane, przełączyć kartę, zamknąć okno albo wywołać akcję przed zakończeniem edycji. W aplikacji zakupowej może zmienić liczbę produktów, a w programie do obsługi plików — przenieść lub usunąć niewłaściwy obiekt. Dlatego kontrolki wykonujące operacje trudne do cofnięcia powinny być od siebie wyraźnie oddzielone, a sama operacja powinna mieć możliwość anulowania albo dodatkowe potwierdzenie, jeżeli jest to zgodne z logiką aplikacji.

Diagnostyka powinna obejmować zarówno kliknięcia myszą, jak i obsługę klawiatury oraz ekranu dotykowego. Należy sprawdzić, czy fokus klawiatury przechodzi w logicznej kolejności, czy aktywny przycisk jest widoczny i czy klawisz Enter lub spacja nie uruchamia przypadkiem innej kontrolki. Warto także przetestować interfejs przy powiększeniu strony, z większym rozmiarem czcionki, na ekranie o wysokiej rozdzielczości oraz przy zmniejszonej szerokości okna. Jeżeli elementy zaczynają się ściskać, nachodzić na siebie lub przechodzić do trudnego do odczytania układu, problem wymaga korekty układu, a nie tylko zmiany koloru przycisków.

Sprawdzenie układu przycisków w laptopie i komputerze PC

Podczas serwisowania laptopa lub komputera PC warto odtworzyć warunki, w których użytkownik zgłasza pomyłkowe aktywowanie przycisków. Obejmuje to sprawdzenie rozdzielczości ekranu, ustawień skalowania systemu, powiększenia w przeglądarce, rodzaju urządzenia wskazującego oraz zachowania aplikacji po zmianie rozmiaru okna. Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i podzespołów, a w ramach diagnostyki można również zweryfikować, czy problem wynika z nieprawidłowego wyświetlania interfejsu, uszkodzonego panelu dotykowego, błędnego sterownika lub samej aplikacji.

Jeżeli pomyłki występują tylko w jednym programie albo na jednej stronie, należy porównać jej działanie z inną przeglądarką, świeżym profilem użytkownika i aktualną wersją aplikacji. Gdy kursor samoczynnie przeskakuje, panel dotykowy rejestruje dotknięcia w innym miejscu niż wskazane albo mysz generuje podwójne kliknięcia, źródłem może być sprzęt wejściowy, sterownik lub konfiguracja systemu. Gdy urządzenia działają poprawnie, a błędny wybór powtarza się przy tych samych przyciskach, bardziej prawdopodobny jest problem projektowy: zbyt mały obszar aktywny, brak odstępu, nakładanie elementów albo nieprawidłowa obsługa zdarzeń.