Projektowanie UI/UX aplikacji mobilnych – o tym warto pamiętać

Pułapki często wynikają z User Experience. Sposób korzystania z aplikacji mobilnych znacząco różni się od interakcji w miejscu, przy komputerze z dużym ekranem, w warunkach stabilnego poziomu nasłonecznienia. Aplikacja mobilna to próba przeniesienia stacjonarnego komfortu UX na mniejszy ekran i w mniej przewidywalne warunki użytkowania.

Nawet jeśli wersja na duże ekrany odnosi sukcesy, w odpowiedniku mobilnym cały interfejs należy przemyśleć od nowa, w kontekście odmiennych sposobów użytkowania. Tak, aby kluczowe funkcje nadal były czytelne i użyteczne. Z kolei poszczególne elementy interaktywne powinny być tworzone z myślą o trudniejszym dostępie, np. w przestrzeni miejskiej, niż z perspektywy użytkownika w domu czy biurze.

Na wszystkie procesy w aplikacji mobilnej użytkownik ma także mniej czasu, bo często używa jej w ruchu. Ponieważ projektowanie takich produktów ma swoje zasady, warto zacząć z czystym podejściem i nastawić się na przyswajanie nowych priorytetów.

Bazowanie na sukcesach innych

Niezbędny punkt wyjścia dla projektowania UX aplikacji mobilnej to określenie grupy docelowej i sprawdzenie aplikacji, z których ta grupa najczęściej korzysta. W interakcjach z nimi kształtowane są nawyki, na które nowa aplikacja musi odpowiedzieć.

Im bardziej rozległa grupa docelowa, tym bardziej uniwersalne są rozwiązania. Jednocześnie zyskuje na znaczeniu prostota i minimalizm. Projektowanie może przebiegać na podstawie gotowych bibliotek, np.:

• Google Material Design,
• Google Material You,
• Microsoft Fluent Design System / Fluent UI,
• Apple Human Interface Guidelines.

Z kolei bardziej niszowy target wymaga indywidualnego podejścia. Projektowanie najlepiej poprzedzić badaniami UX, aby lepiej poznać nawyki użytkowników i w miarę możliwości zhierarchizować ich oczekiwania.

Nie da się takich badań zastąpić — to ryzyko, że pozornie uniwersalne rozwiązania, które są obecne w większości aplikacji, nie będą wpisywać się w scenariusze i nawyki niszowej grupy docelowej.

Badania UX w projekcie aplikacji mobilnej

Są bardzo pomocne przed rozpoczęciem tworzenia, ale potem muszą się stać niezbędnym elementem całego procesu projektowania. Najlepsze efekty można uzyskać, jeśli badania odbywają się po każdym etapie i każdej większej zmianie w produkcie.

3 najpopularniejsze badania UX przy tworzeniu aplikacji mobilnych, to:

1. Badania etnograficzne – obserwacje użycia aplikacji w typowym dla niego środowisku, połączone z wywiadami uzupełniającymi.
2. Indywidualne wywiady pogłębione – kilkudziesięcio-minutowe spotkania, w których użytkownik odpowiada na pytania dotyczące aplikacji. Dla badacza jeszcze istotniejsze od samych odpowiedzi są reakcje emocjonalne.
3. Testy użyteczności – obserwacje użytkowników pracujących na różnych wersjach aplikacji w ramach różnorodnych scenariuszy. Można rozpoznać problematyczne miejsca interfejsu, reakcje i mechanizmy radzenia sobie z nimi.

Spójność mobilnego UI z UX marki

Jeśli aplikacja ma być dodatkowym kanałem kontaktu z dotychczasowymi klientami, trzeba wziąć pod uwagę ich aktualne doświadczenia w innych produktach cyfrowych. Strona internetowa, sklep, newsletter, mają z reguły podobny układ i design. Sposób interakcji na dużych ekranach jest zbliżony. Styczność z jednym produktem powinna mieć podobną charakterystykę, co z kolejnym.

Interfejsu z dużych ekranów nie można jednak przełożyć na UI aplikacji mobilnej 1:1. Można wzorować się na aktualnie używanych rozwiązaniach, ale muszą zostać zoptymalizowane pod specyficzne wymagania użytkownika mobilnego. Dzięki temu pojawia się szansa stworzenia produktu użytecznego, estetycznego i godnego zaufania, który jednocześnie będzie zawierał znajome elementy — co z kolei przyspieszy onboarding użytkowników.

Wielkość elementów interfejsu

Tu priorytetem jest szybkość i łatwość obsługi. Smartfony są używane w bardzo zmiennych warunkach. Użytkownik może potrzebować aplikacji w sytuacji, kiedy:

• właśnie skończył dźwigać zakupy,
• doniósł do domu, samochodu lub wózka małe dziecko,
• nie ma czasu zwiększyć jasności wyświetlacza po wyjściu na zewnątrz – lub nie pozwala na to tryb oszczędzania energii,
• stoi na mrozie z drżącymi rękami, bez rękawiczek,
• robi przerwę w sesji treningowej,
• przemieszcza się w komunikacji miejskiej i próbuje utrzymywać równowagę.

W takich i podobnych sytuacjach wygrywa aplikacja, która ma odpowiednio duże elementy, a odstępy pomiędzy nimi redukują ryzyko przypadkowego wciśnięcia złego przycisku – co zmuszałoby do szukania sposobu anulowania i ponawiania w i tak już trudnych warunkach.

Jakie są liczby wyjściowe dla planowania wielkości elementów interfejsu?

1. kontrast ≥ 4,5 tło: 1 elementy,
2. przyciski:
   wielkość 40x40pt+,
   odstęp 12pt+,
3. tekst:
   lany: font 16pt+,
   pomocnicze (np. tabele): font 11pt+
   odstęp między wierszami: 125%+,
   liczba znaków w linii: max 80.
   (stan na 2022 rok)

Projektowanie UX aplikacji mobilnych — klarowna ścieżka użytkownika

Użytkownik powinien zawsze wiedzieć, na jakim etapie drogi do celu się znajduje i co teraz należy zrobić. Logiczny podział treści na ekrany bardzo wpływa na sprawność nawigacji.

Aby o to wszystko zadbać, najpierw projektujemy ścieżkę procesu. Na wszystkich ekranach będzie na pierwszym planie. Jeśli chodzi o proces sprzedażowy, przez cały czas powinna być widoczna liczba produktów w koszyku, jego aktualna wartość oraz przycisk przejścia do płatności. Przeklikiwanie się przez kolejne ekrany ma służyć wyszukiwaniu kolejnych produktów i sprawnemu dodawaniu do koszyka. W każdej chwili jednak proces da się sfinalizować.

Po skompletowaniu koszyka pojawia się kolejne ważne wyzwanie: podać użytkownikowi formularz zamówienia w jak najbardziej logiczny sposób. Tego etapu nie warto ograniczać do jednego przewijanego ekranu. Czasami lepiej podzielić formularz na spójne części, na przykład:

• ekran z podsumowaniem koszyka,
• dane osobowe,
• dane dostawy,
• wybór formy płatności,
• ostateczne podsumowanie z potwierdzeniem.

W ten sposób użytkownik będzie rozumiał kontekst każdej decyzji i odczuje postępy krok po kroku. Brak przeładowania danymi także ułatwi podejmowanie świadomych decyzji i ograniczy szansę przeoczenia pól obowiązkowych.

Przy projektowaniu tych ekranów warto zadbać o autouzupełnianie. Użytkownicy doceniają, kiedy muszą wpisywać stałe dane tylko raz. Ograniczenie się do sprawdzenia wypełnionego formularza danych osobowych, formy płatności, czy adresu dostawy, znacząco podniesie poziom UX.

Jeżeli jest to aplikacja, to możemy zachęcić użytkownika do założenia konta celem zapamiętania jego danych i przyśpieszenia złożenia zamówień w przyszłości.

Metodyki pomagające w projektowaniu UX aplikacji mobilnych

Wiele powyższych zasad można odnaleźć lub zastosować w ramach gotowych metodyk projektowania interfejsów. Pomagają one zamknąć proces projektowania w jednym spójnym systemie.

UCD – User Centered Design

Metodyka łącząca psychologię i ergonomię, aby ocenić zestaw aspektów tworzących doświadczenia: zadowolenie, satysfakcję, zaangażowanie, czas interakcji.

Ma na celu między innymi:

• maksymalne zrozumienie użytkownika,
• godzenie ze sobą zasady „Voice of Customer”, „Voice of Business” i „Voice of Market”,
• regularną ocenę jakości zaangażowania użytkowników,
• walidację pomysłów,
• utrzymywanie badań UX w cyklu projektowym,
• dbanie o jakość zespołu projektowego.

4D

4-etapowa metodyka prowadzenia projektu, znajdująca zastosowanie także w tworzeniu aplikacji mobilnych:

1. Discovery – kreowanie wizji produkt, począwszy od problemu, który ma rozwiązywać. Na tym etapie prowadzi się rozmowy z właścicielami projektu, bada argumentację uzasadniającą powstanie produktu i ustala priorytety. To jest też moment na badania eksploracyjne np. IDI
2. Define – założenia i cele konfrontuje się z twardymi danymi podczas wewnętrznych warsztatów. Kompetencje członków zespołu pozwalają spojrzeć realnie na pomysły z pierwszego etapu i rozpoznać ograniczenia. Bardzo ważną rolą tego etapu jest wymiana informacji wewnątrz zespołu, aby każdy mógł szerzej spojrzeć na projekt i zrozumieć zależności.
3. Develop – faza projektowania, podczas której programiści współpracują z designerami, aby optymalną ścieżką i z minimalną liczbą poprawek dojść do finalnej wersji produktu.
4. Deploy – Testowanie produktu z użytkownikami. Przeprowadza się zarówno wywiady kontekstowe, jak i testy z użytkownikami. Pomocne są także badania etnograficzne.

Projektowanie UX aplikacji mobilnych — podsumowanie

Projektowanie ux aplikacji mobilnych to zadanie przeniesienia jakości UX aktualnych produktów cyfrowych udostępnianych użytkownikom pod daną marką, na mniejszy ekran. Wymaga to przemyślenia od podstaw koncepcji interfejsu i stworzenia takiego UX, który będzie nawiązywał do znajomych mechanizmów obecnych w aktualnych produktach, łącząc je w spójną całość z odpowiedziami na potrzeby użytkownika mobilnego.

Dobre aplikacje mobilne łączy wiele zasad. Jedną z nadrzędnych jest ograniczanie funkcji do minimum, aby postawić użyteczność ponad wszechstronnością.

Aplikacja, która sprawdza się w każdych warunkach, w ograniczonym zakresie zawsze wygra z taką, która jest doinwestowana w zakresie ilości funkcji i w efekcie tworzy chaos w głowie użytkownika. Zamiast wywoływać wśród elementów interfejsu bitwę o uwagę, lepiej zacząć od poznania prawdziwych potrzeb grupy docelowej. Poznać jej przyzwyczajenia, określić najważniejsze cele aplikacji i stworzyć przejrzystą hierarchię funkcji. Od tego zaczyna się tworzenie skutecznej aplikacji, z której obsługą użytkownik nie musi się długo oswajać.