za małe odstępy między elementami klikanymi

Za małe odstępy między elementami klikanymi zwiększają ryzyko przypadkowego dotknięcia niewłaściwego przycisku.

Dlaczego sąsiednie przyciski łatwo pomylić

Za małe odstępy między elementami klikanymi występują wtedy, gdy aktywne obszary dwóch lub większej liczby kontrolek znajdują się bardzo blisko siebie albo częściowo się nakładają. Dotyczy to między innymi przycisków, odsyłaczy, ikon, pól wyboru, przełączników i elementów listy reagujących na kliknięcie lub dotknięcie. Sam widoczny symbol może mieć niewielki rozmiar, ale o wygodzie obsługi decyduje także wielkość całego obszaru aktywnego, czyli miejsca rozpoznawanego przez interfejs jako cel wskazania.

Na ekranie dotykowym palec zasłania część interfejsu i nie wskazuje punktu tak precyzyjnie jak kursor myszy. Błąd wyboru może więc prowadzić do uruchomienia innej funkcji, zmiany ustawienia, przejścia na inną stronę albo zamknięcia formularza. Problem nasila się przy korzystaniu z laptopa z ekranem dotykowym, małego monitora, powiększenia systemowego lub interfejsu obsługiwanego jedną ręką. Podobne trudności mogą wystąpić przy sterowaniu klawiaturą, gdy wizualnie skupienie elementu jest słabo widoczne i trudno odróżnić sąsiednie kontrolki.

Obszar aktywny a widoczny element interfejsu

Projektant interfejsu powinien rozdzielić dwa pojęcia: rozmiar wizualny oraz rozmiar celu interakcji. Mała ikona kosza może pozostać niewielka, jeśli otacza ją odpowiednio duży przycisk z właściwym odstępem od innych kontrolek. Zwiększanie obszaru aktywnego bez zachowania odstępu nie zawsze rozwiązuje problem, ponieważ dwa elementy mogą zacząć reagować na wskazanie w zbyt bliskich miejscach. W praktyce trzeba kontrolować zarówno wymiary celu, jak i odległość pomiędzy jego granicami.

Wytyczna WCAG 2.2, kryterium 2.5.8 Target Size (Minimum), określa dla poziomu AA minimalny cel o wymiarach 24 na 24 piksele CSS albo wymaga zapewnienia odpowiedniej przestrzeni wokół mniejszego celu. Kryterium zawiera wyjątki, między innymi dla elementów rozmieszczonych w tekście oraz sytuacji, w których określony sposób prezentacji jest istotny. Jest to wymaganie dostępności treści internetowych, a nie uniwersalna reguła dla każdego programu. Dla porównania kryterium WCAG 2.2 o poziomie AAA dotyczące rozszerzonego rozmiaru celu wskazuje 44 na 44 piksele CSS. W aplikacjach mobilnych często spotyka się także zalecenia platformowe, takie jak 44 punkty w wytycznych Apple Human Interface Guidelines oraz 48 dp w materiałach projektowych Androida; punkt i dp nie są tym samym co piksel fizyczny ekranu.

Skutki błędnego rozmieszczenia kontrolek

Za mały odstęp może powodować błędy pozornie losowe, choć wynikają one z geometrii interfejsu. Użytkownik może nacisnąć ikonę usuwania zamiast edycji, sąsiedni odsyłacz zamiast rozwijanej listy albo niewłaściwy przycisk na pasku narzędzi. W formularzach problem jest szczególnie widoczny, gdy pola wyboru lub przełączniki są ułożone pionowo bez wystarczającego rozdzielenia. Jeżeli każda kontrolka ma własny duży obszar aktywny, ale obszary te na siebie nachodzą, rezultat może zależeć od kolejności warstw, kolejności elementów w kodzie lub mechanizmu obsługi zdarzeń.

Ocena problemu powinna obejmować różne sposoby wskazywania. Należy sprawdzić kliknięcie myszą, dotyk, powiększenie interfejsu, orientację pionową i poziomą oraz obsługę klawiaturą. W aplikacji internetowej przydatne jest zmierzenie prostokątów elementów w narzędziach deweloperskich i sprawdzenie, czy margines, padding oraz pseudo-elementy nie rozszerzają obszaru reagującego na kliknięcie w niezamierzony sposób. Trzeba również zweryfikować stan fokusu, kolejność przechodzenia klawiszem Tab i możliwość wykonania tej samej czynności bez precyzyjnego wskazywania małej ikony. Test powinien uwzględniać także urządzenia o różnej gęstości pikseli, ponieważ rozmiar CSS, punktów lub dp może być przeliczany na różną liczbę pikseli fizycznych.

Sprawdzenie i poprawa odstępów w używanym programie

Naprawa problemu zwykle polega na powiększeniu celu interakcji, odsunięciu sąsiednich kontrolek albo zmianie układu tak, aby funkcje o podobnym wyglądzie nie znajdowały się bezpośrednio obok siebie. W interfejsie responsywnym trzeba sprawdzić kilka szerokości okna, ponieważ reguły flexbox, grid, zawijanie tekstu i automatyczne skalowanie mogą zmienić położenie elementów. Nie należy naprawiać błędu przez samo zmniejszenie czcionki lub ukrycie części etykiety, ponieważ takie działania mogą pogorszyć czytelność i nie zwiększają precyzji obsługi.

Podczas diagnostyki laptopa lub komputera PC można odtworzyć problem w konkretnej przeglądarce albo aplikacji, sprawdzić ustawienia skalowania ekranu i powiększenia oraz ustalić, czy przyczyną jest projekt interfejsu, błędne działanie sterownika ekranu dotykowego, opóźnienie urządzenia wskazującego czy uszkodzenie elementu wejściowego. Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów stacjonarnych PC i ich podzespołów, dlatego w razie problemów z fizyczną obsługą urządzenia można zlecić sprawdzenie sprzętu oraz działania systemu.