Mimo to, że prawie nie rozstajemy się z naszymi smartfonami, dość często spotykam się z jednym błędem, który jest bardzo irytujący na mobilnych stronach. A mianowicie – złym dobraniu wielkości interaktywnych elementów.
Projektując interfejs na urządzenie mobilne, na którym korzystamy z ekranu dotykowego, musimy bowiem pamiętać o… palcach! A palce to coś innego niż kursor, choć co do zasady, używamy ich w podobnym celu – chcemy wejść w interakcję z tym, co widzimy na ekranie.
No to gdzie ta różnica?
Przede wszystkim w wielkości. Wielkość kursora możemy oczywiście systemowo zmieniać, ale obstawiam, że zdecydowana większość z was korzysta jednak z ustawień domyślnych systemu. Zróbmy sobie zatem mały eksperyment. Jeśli macie pod ręką komputer, przesuńcie kursor w widoczne miejsce. A następnie obok kursora przyłóżcie palec. Prawdopodobnie zaobserwowaliście właśnie dość sporą różnicę wielkości (chyba, że jesteście właścicielami bardzo drobnych palców, czego zazdroszczę!).
Jakie to ma znaczenie?
Małym kursorem łatwiej operować w gąszczu małych, interaktywnych elementów. Jeśli nie zmienimy ich wielkości (lub aktywnego obszaru) dla urządzenia mobilnego – użytkownicy próbujący trafić w nie palcem, mogą mieć trudne chwile.
Interakcja będzie wymagała precyzji, czyli poświęcenia więcej czasu i uwagi. Co przy interfejsach, które chcielibyśmy obsłużyć szybko (np. szybko kupić bilet na autobus, który właśnie nadjeżdża) – potrafi sprawić wiele irytacji, a także powodować błędy.
Przypadkowe kliknięcia
Oprócz tego, że w małe obiekty trudniej będzie trafić palcem, ułożenie kilku interaktywnych elementów obok siebie może powodować błędy. Pewnie nie tylko mi zdarza się przypadkowo trafić palcem (a czasem i kursorem) w coś, co było obok mojego celu. Dlatego poza wielkością elementu, ważna jest również odległość od pozostałych interaktywnych obiektów.
Nie wszystko musi mieć wielkość 44-48 px
Wiele design systemów zaleca minimalne wielkości obiektów interakcji. To około 44-48 px (czasem więcej). Czy to oznacza, że wszystkie linki, ikony, przyciski i inne elementy po prostu trzeba powiększyć do tej wielkości? Niekoniecznie!
Preferowane wielkości często odnoszą się do minimum touch target size – czyli minimalnej wielkości obszaru, który dotykamy. Nie musi się to pokrywać z wizualną granicą obiektu. Najłatwiej pokazać to na ikonach. Czasami zbyt duże ikony, względem innych obiektów będą wyglądać po prostu dziwnie. Dlatego stosuje się mniejsze rozmiary, ale aktywny obszar do kliknięcia (czy dotknięcia) jest większy – mimo, że go nie widzimy. Oznacza to, że nie musimy dokładnie trafić palcem w kształt ikony, żeby wejść z nią w interakcję.
Najlepiej po prostu zrobić więcej miejsca
Co do zasady lepiej jednak zrobić elementy odrobinę większe i ułożyć je w wygodnych do trafienia od siebie odległościach. Pomoże nam w tym podglądanie projektu na docelowym urządzeniu. Wiele aplikacji do projektowania UI ma taką możliwość, a nawet jeśli nie, pozwala wygenerować link, który można wyświetlić na telefonie.
Nie wykluczajmy
Warto pamiętać, że użytkownikom kursorów wcale nie musi być łatwiej. Miejcie na uwadze również osoby mające problemy z kontrolowaniem ruchów dłoni. Osoby starsze, osoby cierpiące na choroby wywołujące drżenie rąk, ale też mające zmęczone lub zmarznięte dłonie (halko, mamy zimę), również mogą mieć problem z precyzyjną obsługą myszki. A co za tym idzie, ich celność w trafianiu w mocno zbliżone do siebie, małe elementy, będzie mniejsza niż gdybyśmy zadbali o odpowiednie wielkości i bezpieczne odległości.
Artykuły do pogłębienia tematu
Sprawdź artykuł na nngroup.com: Touch Targets on Touchscreens
Przykłady z design systemów: Fluent, BBC, Apple
Wytyczne WCAG: Target size
Prawo Fittsa: artykuł na Wikipedii
