Jak zachować widoczność zwierzaka i jego elementów sterujących w kompaktowym interfejsie gry

Wypisz informacje i działania potrzebne graczowi podczas głównej pętli rozgrywki. Na początek mogą wystarczyć: zwierzak, jedna podstawowa akcja, taka jak karmienie lub zabawa, oraz niewielki wskaźnik informujący, czy można wykonać tę akcję. Przenieś ustawienia, kolekcje i rzadziej używane akcje do menu dodatkowego lub krótkiego panelu kontekstowego. To metoda projektowania, a nie uniwersalna zasada: gra, której głównym zadaniem jest wybieranie spośród kilku akcji, może wymagać jednoczesnego wyświetlania większej liczby elementów sterujących.

Zanim dodasz elementy sterujące, wyznacz zwierzakowi określony obszar na ekranie. Zadbaj o to, by wyraźnie było widać najważniejsze elementy jego sylwetki i mimiki, i nie umieszczaj na nich przycisków ani etykiet. Jeśli akcja wymaga bezpośredniego dotknięcia zwierzaka, pozostaw ten obszar wolny; jeśli elementy sterujące znajdują się na scenie gry, upewnij się, że nie zasłaniają tych części zwierzaka, które gracz powinien widzieć. Wytyczne Apple dotyczące sterowania w grach zalecają ograniczanie wirtualnych elementów sterujących, gdy ich rolę mogą pełnić bezpośrednie interakcje z obiektami gry (Sterowanie w grach).

Pogrupuj często używane akcje w łatwo dostępnym miejscu, a dodatkowe umieść dalej lub schowaj w menu. Na ekranie dotykowym nie stłaczaj przycisków w obszarze, w którym dłoń gracza zasłania zwierzaka. Apple sugeruje umieszczanie często używanych elementów sterujących blisko kciuka, a dodatkowych — u góry ekranu; zaleca też uwzględnienie wygodnego zasięgu i granic urządzenia. Potraktuj te wskazówki jako punkt wyjścia do testów na docelowym urządzeniu i w wybranej orientacji, a nie jako sztywny układ odpowiedni dla każdej gry.

Ikony widoczne na ekranie mogą być małe, ale nie zmniejszaj do nich obszarów dotykowych. Apple zaleca, by często używane elementy sterujące miały na jego platformach co najmniej 44 na 44 punkty, a mniej istotne — 28 na 28 punktów. Android zaleca interaktywne obszary dotykowe o wymiarach co najmniej 48 na 48 pikseli niezależnych od gęstości. Są to wartości właściwe dla poszczególnych platform, dlatego korzystaj z jednostek i wytycznych odpowiedniej platformy, zamiast traktować te liczby jako równoważne (Sterowanie w grach według Apple, Wytyczne dostępności Androida). Zostaw wystarczająco dużo miejsca między elementami, by uniknąć przypadkowych dotknięć, zwłaszcza gdy dwie akcje dają różne wyniki.

Zwierzak może być widoczny na ekranie, a mimo to trudno go dostrzec, jeśli konkurują z nim elementy sterujące, etykiety lub dekoracyjne panele. Zadbaj o to, by dodatkowe elementy interfejsu były mniej wyraziste: używaj małych ikon, krótkich etykiet i paneli zajmujących tylko tyle miejsca, ile potrzebują. Podczas najważniejszych akcji pilnuj, by twarz i inne istotne szczegóły zwierzaka pozostawały widoczne. Jeśli scena gry zmienia się za tekstem lub ikonami, rozważ dodanie subtelnego tła albo obrysu, aby interfejs pozostał czytelny bez dużego, nieprzezroczystego panelu.

Sprawdź, jak tekst i ikony wyglądają na jasnych i ciemnych fragmentach sceny. Kontrast, który działa na jednym tle, może zniknąć, gdy zwierzak się poruszy lub scena się zmieni. W przypadku tekstu wytyczne WCAG organizacji W3C określają współczynnik kontrastu 4,5:1 dla tekstu o zwykłej wielkości i 3:1 dla dużego tekstu. WCAG dotyczy treści internetowych, a nie konkretnie gier, ale podane progi kontrastu mogą pomóc ocenić czytelność tekstu interfejsu na zmiennym tle (Wytyczne W3C dotyczące kontrastu). Nie używaj samego koloru do oznaczania niedostępnej akcji; zmień też widocznie jej etykietę, kształt lub stan.

Jeśli stale widoczne elementy sterujące zajmują zbyt dużo miejsca, pokazuj opcjonalne akcje po otwarciu menu lub wybraniu zwierzaka. Ukrywaj akcje niedostępne w bieżącym stanie i wyraźnie sygnalizuj zmianę stanu po naciśnięciu elementu sterującego. Apple zaleca dostosowywanie widocznych wirtualnych elementów sterujących do kontekstu rozgrywki, w tym ukrywanie tych, które nie są potrzebne, i zwiększanie widoczności aktywnych elementów. Praktyczne rozwiązanie to pozostawienie dostępnej podstawowej akcji i wyświetlanie powiązanych opcji w niewielkim menu, które zamyka się po dokonaniu wyboru.

Dbaj o przewidywalność zmian stanu. Zniknięcie elementu sterującego tuż przed jego użyciem może zdezorientować gracza, dlatego ukrywanie i pokazywanie stosuj tylko w przypadku akcji, których dostępność jasno wynika z bieżącego stanu. Jeśli przycisk staje się nieaktywny, zasygnalizuj to i, w razie potrzeby, krótko wyjaśnij, co się zmieniło. Rozwijane menu nie powinno zasłaniać twarzy zwierzaka ani obszaru, który gracz musi dotknąć w następnym kroku.

Projektuj z myślą o obszarze użytkowym, a nie tylko zewnętrznym prostokącie ekranu. Wcięcia, wycięcia na kamerę, paski systemowe i obszary gestów mogą nachodzić na ważne elementy sterujące przy krawędziach. Wytyczne Apple dotyczące układu opisują obszary bezpieczne jako przestrzenie, które pomagają chronić treść przed elementami interfejsu i funkcjami urządzenia. Android również zaleca uwzględnianie wcięć związanych z paskami systemowymi, gestami i wycięciami ekranu, a także trzymanie ważnych elementów sterujących z dala od wycięć (Wytyczne Apple dotyczące układu, Wytyczne Androida dotyczące układu od krawędzi do krawędzi). Grafika tła może sięgać krawędzi ekranu, podczas gdy elementy interaktywne pozostają odsunięte.

Nie zakładaj, że jeden kompaktowy układ sprawdzi się przy każdym współczynniku proporcji. Zakotwicz elementy sterujące w obszarze użytkowym i dostosowuj odstępy lub grupowanie do dostępnej szerokości. Wytyczne Androida dotyczące gier w Unity zalecają korzystanie z interfejsu API obszaru bezpiecznego oraz obsługę różnych rozmiarów ekranów i współczynników proporcji. Testuj układy pionowe lub poziome, jeśli gra je obsługuje, i sprawdź je ponownie po obróceniu urządzenia, zmianie rozmiaru okna lub złożeniu urządzenia, o ile te konfiguracje są uwzględniane (Wytyczne Androida dla gier w Unity na dużych ekranach).

Statyczna makieta nie pokazuje, które obszary zasłaniają palce gracza podczas gry. Obejrzyj interfejs na ekranie o docelowym rozmiarze fizycznym, a następnie wykonaj główne akcje i sprawdź, czy palce nie zasłaniają szczegółów zwierzaka, czy dotknięcia trafiają w cel i czy elementy sterujące nie nachodzą na funkcje systemowe. Powtórz ten test na najmniejszym obsługiwanym ekranie oraz przy szerszym lub wyższym współczynniku proporcji. Jeśli to możliwe, poproś osobę, która nie zna układu, o wykonanie głównego zadania i zanotuj, gdzie dotyka ekranu, waha się lub traci zwierzaka z pola widzenia.

Dla każdego obsługiwanego układu zastosuj krótką listę kontrolną z wynikiem „zaliczone” albo „niezaliczone”:

• Zwierzak pozostaje widoczny podczas głównej akcji, w tym jego twarz lub inne najważniejsze szczegóły.

• Podstawowa akcja jest łatwo dostępna, ma wyraźny stan po naciśnięciu i nie nachodzi na inny obszar dotykowy.

• Etykiety i ważne wskaźniki stanu są czytelne na zmieniającym się tle sceny.

• Żaden niezbędny element sterujący nie znajduje się pod wycięciem, paskiem systemowym ani obszarem gestów.

• Otwarcie dodatkowego elementu sterującego nie zasłania części zwierzaka ani obszaru rozgrywki potrzebnych w następnym kroku.

Jeśli układ nie przejdzie któregoś punktu, zmieniaj po jednej rzeczy naraz: usuń element o niskim priorytecie, przesuń element sterujący ku krawędzi obszaru rozgrywki z zachowaniem bezpiecznych marginesów albo pokazuj dodatkowe akcje tylko wtedy, gdy są potrzebne. Ponownie przetestuj tę samą interakcję. Dzięki temu łatwiej ocenisz, czy zmiana rozwiązała problem z widocznością, czy tylko przeniosła go w inne miejsce.

• Apple Developer, Sterowanie w grach

• Apple Developer, Układ

• Android Developers, Zwiększanie dostępności aplikacji

• Android Developers, Projektowanie układów od krawędzi do krawędzi

• Android Developers, Jak zadbać o to, by gra w Unity działała świetnie na różnych urządzeniach

• W3C Web Accessibility Initiative, Objaśnienie kryterium sukcesu 1.4.3: Kontrast (minimum)