UX gier mobilnych w przeglądarce — zasady

Prawo Fittsa, strefa kciuka, minimalny HUD i krótkie komunikaty. Jak projektowane są gry na wskazuje.pl, na przykładzie Cyber Klubu.

W grach każdy piksel ekranu jest na wagę złota. Dlatego w Cyber Klubie z kilku paneli zrobił się jeden przycisk ustawień, a litera "E" na przycisku akcji zamieniła się w ikonę. To nie kosmetyka — to zasady, które mają badania za sobą.

Ekran gry jest dla gry. Wszystko inne idzie pod koło zębate albo pod ekran.

1. Prawo Fittsa i strefa kciuka

Prawo Fittsa: czas trafienia w cel zależy od odległości i jego wielkości. Na telefonie oznacza to duży przycisk akcji nisko, w naturalnym zasięgu kciuka (badania Stevena Hoobera nad trzymaniem telefonu). Wytyczne Apple zalecają cele co najmniej 44×44 pt, Google — 48×48 dp.

2. Jedno koło zębate zamiast pięciu ikon

Wyciszenie, pełny ekran poziomo i pionowo to opcje używane raz na sesję. Trzymanie ich na stałe na ekranie zabiera miejsce rozgrywce. W Cyber Klubie trafiły pod jedną ikonę ustawień — przykład stopniowego ujawniania opisanego w pierwszej części.

3. Sterowanie pod grą, nie w grze

Skróty klawiszowe są ważne dla osób przy komputerze, ale na telefonie są bezużyteczne. Dlatego lista klawiszy stoi pod ekranem gry, w zwykłym tekście strony. Gracz desktopowy ją znajdzie, gracz mobilny nie traci miejsca.

4. Krótki komunikat zamiast podpowiedzi po najechaniu

Na telefonie nie ma "hovera". Gdy znajdziemy przedmiot, na kilka sekund pojawia się nazwa i działanie, np. Crocsi Cola — 5 sekund sprintu. Komunikat znika sam i nie blokuje gry. To zasada widoczności stanu systemu z heurystyk Nielsena.

Psychologiczny twist

Gracz pamięta emocje, nie menu. Każda sekunda szukania opcji to sekunda wyjęta z zabawy.

Sprawdź to w praktyce w grach na wskazuje.pl.