Odblokowujesz telefon, przesuwasz palcem po ekranie i otwierasz aplikację bez zastanawiania się, gdzie nacisnąć. Interfejs w telefonie to warstwa, przez którą obsługujesz urządzenie i jego aplikacje, choć jej wygląd zależy od systemu, producenta oraz konkretnego programu.
Interfejs łączy ekran z działaniem telefonu
- Interfejs systemu obejmuje między innymi ekran główny, powiadomienia, ustawienia i nawigację.
- Interfejs aplikacji to przyciski, pola, menu i inne elementy służące do wykonania zadań w programie.
- Android i iOS inaczej organizują część gestów i elementów systemowych.
- Dla twórcy aplikacji liczy się czytelność, dostępność i poprawne działanie na różnych ekranach.
Interfejs to sposób, w jaki telefon odpowiada na twoje działania
Dotykasz ikony, wpisujesz tekst albo przesuwasz panel powiadomień. Każdy taki ruch jest częścią interakcji, a elementy widoczne na ekranie podpowiadają, co możesz zrobić i co stanie się po dotknięciu. Interfejs użytkownika, czyli UI, obejmuje te elementy wizualne oraz sposoby sterowania urządzeniem.
W telefonie spotykają się co najmniej dwie warstwy. Interfejs systemowy obsługuje funkcje urządzenia, na przykład pasek stanu, ekran blokady czy szybkie ustawienia. Interfejs aplikacji należy do konkretnego programu: w komunikatorze będą to lista rozmów i pole wiadomości, a w mapach widok trasy i kontrolki nawigacji.
To rozróżnienie przydaje się, gdy coś wygląda inaczej niż na zrzucie ekranu z instrukcji. Producent może zmienić wygląd ekranu głównego lub panelu systemowego, ale nie oznacza to automatycznie, że zmienił się sam Android albo aplikacja.
Nakładka producenta zmienia wygląd Androida, a aplikacja ma własne UI
Na dwóch telefonach z Androidem te same ustawienia mogą wyglądać inaczej. Samsung stosuje One UI, Xiaomi rozwija HyperOS, a ich rozwiązania wpływają na układ elementów systemowych, personalizację i dostęp do części funkcji.
To właśnie nakładka, czyli warstwa producenta działająca na systemie, często odpowiada za różnice w ekranie głównym czy panelu szybkich ustawień. Aplikacja może z kolei mieć własny układ i komponenty. Dlatego problem z wyglądem jednej aplikacji nie musi oznaczać, że cały interfejs telefonu działa nieprawidłowo.
Moja ocena jest prosta: przy analizie problemu najpierw rozdzieliłbym system, nakładkę i aplikację. Dzięki temu łatwiej ustalić, czy szukać opcji w ustawieniach telefonu, w konfiguracji programu, czy w jego aktualizacji.
Android i iOS inaczej prowadzą przez te same zadania
Wykonanie podobnej czynności może wymagać innego gestu zależnie od telefonu. Na przykład panel sterowania w iPhonie otwiera się gestem od górnej krawędzi ekranu; instrukcja Apple dotycząca centrum sterowania opisuje też różnice zależne od modelu.
Android pozostawia producentom więcej swobody w sposobie prezentowania części funkcji, ale aplikacja nadal musi uwzględniać obszary zajęte przez systemowe paski. Dokumentacja Android Developers o paskach systemowych wyjaśnia, że interfejs aplikacji może układać treść także pod nimi, więc projekt musi chronić ważne elementy przed zasłonięciem.
Dla osoby tworzącej frontend oznacza to praktyczny test: nie wystarczy sprawdzić jednego zrzutu ekranu. Trzeba zobaczyć, czy przyciski i treść pozostają dostępne przy różnych metodach nawigacji oraz po zmianie rozmiaru ekranu.
Mały przycisk może być trudny do trafienia, nawet gdy wygląda dobrze
Ikona wielkości paznokcia może wyglądać elegancko, ale obsługa kciukiem szybko ujawni problem. Obszar dotykowy to całe pole reagujące na dotyk, które może być większe niż sama widoczna ikona.
W wytycznych Android Developers dotyczących dostępności zalecany minimalny obszar interaktywnych elementów wynosi 48 × 48 dp. dp to jednostka skalowana względem gęstości ekranu, więc nie należy odczytywać jej jako stałej liczby pikseli na każdym telefonie.
Przy projektowaniu warto więc sprawdzić nie tylko kolor i kształt przycisku, lecz także to, czy da się go wygodnie nacisnąć. Jeśli ekran ma dużo ciasno rozmieszczonych ikon, powiększenie pola dotykowego może pomóc bez powiększania samej grafiki.
Gdy coś na ekranie nie działa, najpierw ustal, do której warstwy należy
Znikający przycisk albo zasłonięty tekst może wynikać z ustawień systemu, nakładki producenta lub błędu aplikacji. Zamiast od razu zmieniać kilka opcji naraz, zawęź źródło problemu.
| Sytuacja | Możliwa przyczyna | Co sprawdzić |
|---|---|---|
| Inny wygląd ekranu głównego niż w instrukcji | Nakładka producenta albo inny launcher | Sprawdź nazwę modelu telefonu i ustawienia ekranu głównego |
| Jedna aplikacja ma ucięty tekst lub przycisk | Układ aplikacji nie uwzględnia rozmiaru ekranu lub obszaru systemowego | Zaktualizuj aplikację i sprawdź, czy problem występuje w innych programach |
| Gest nawigacji zachowuje się inaczej niż oczekiwano | Aktywna inna metoda nawigacji albo gest systemowy | Odszukaj w ustawieniach telefonu opcje nawigacji systemowej |
Najpierw porównaj zachowanie kilku aplikacji. Jeśli kłopot pojawia się tylko w jednej, podejrzenie pada na jej interfejs. Gdy dotyczy całego telefonu, sprawdź ustawienia systemu i nakładki, zanim uznasz, że winna jest aplikacja.
Najlepszy interfejs nie zmusza do zgadywania
Dobry interfejs podpowiada, gdzie jesteś, co możesz zrobić i jaki będzie skutek dotknięcia elementu. W aplikacji do pracy może to oznaczać wyraźny przycisk zapisu oraz komunikat po wysłaniu formularza; w telefonie szybki dostęp do podstawowych ustawień.
Jeśli projektujesz aplikację, traktuj interfejs jako umowę z użytkownikiem: widoczny element powinien zachowywać się zgodnie z tym, co sugeruje jego wygląd. Gdy korzystanie z telefonu wymaga zgadywania, problem leży zwykle nie w użytkowniku, lecz w sposobie zaprojektowania tej umowy.
